仿网易轮播图（html+css+javascript）

本篇博客还是有点难度的，前前后后加起来花了一天时间才算搞明白。涉及的技术栈包括定时器、动画原理、排他思想、json解析、浏览器兼容性问题、根据图片动态显示张数等。关键点是点击上一张和下一张以及特定张时的逻辑实现。

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网易轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" target="_blank" rel="external nofollow" />
		<script type="text/javascript" src="js/animate.js" ></script>
		<script type="text/javascript" src="js/base.js" ></script>
	</head>
	<body> 
		<div class="w-slider" id="js_slider">
			<div class="slider">
				<div class="slider-main" id="slider_main_block">
					<div class="slider-main-img"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/1.jpg" alt="" /></a></div>
					<div class="slider-main-img"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/2.jpg" alt="" /></a></div>
					<div class="slider-main-img"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/3.jpg" alt="" /></a></div>
					<div class="slider-main-img"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/4.jpg" alt="" /></a></div>
					<div class="slider-main-img"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/5.jpg" alt="" /></a></div>
					<div class="slider-main-img"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/6.jpg" alt="" /></a></div>
				</div>
			</div>
			<div class="slider-ctrl" id="slider_ctrl">
				<span class="slider-ctrl-prev"></span>
				<span class="slider-ctrl-next"></span>
			</div>
		</div>
	</body>
</html>

base.css代码

*{
	margin: 0;
	padding: 0;
}
img{
	/*去除图片地下的空隙*/
	vertical-align: top;
}
.w-slider{
	width: 310px;
	height: 265px;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}
.slider{
	width: 310px;
	height: 220px;
}
.slider-main{
	width: 620px;
	height: 220px;
}
.slider-main-img{
	position: absolute;
	top: 0;
	left: 0;
	
}
.slider-ctrl{
	text-align: center;
	padding-top: 5px;
}
.slider-ctrl-con{
	width: 24px;
	height: 20px;
	background:url(../images/icon.png) no-repeat -24px -782px;
	display: inline-block;
	margin: 0 5px;
	cursor: pointer;
	/*首行缩进*/
	text-indent: -20em;
	overflow: hidden;
	
}
.current{
	background-position:-24px -762px ;
}
.slider-ctrl-prev,
.slider-ctrl-next{
	position: absolute;
	top: 50%;
	margin-top: -35px;
	width: 20px;
	height: 35px;
	background: url(../images/icon.png) no-repeat 6px top;
	opacity: 0.8;
	cursor: pointer;
}
.slider-ctrl-prev{
	left: 0;
}
.slider-ctrl-next{
	right: 0;
	background-position: -14px -44px;
}

animate.js

/**
 * Created by ydj on 2018/08/08.
 */
// 多个属性运动框架  添加回调函数
function animate(obj,json,fn) {  // 给谁    json
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
        for(var attr in json){   // attr  属性     json[attr]  值
            //开始遍历 json
            // 计算步长    用 target 位置 减去当前的位置  除以 10
            // console.log(attr);
            var current = 0;
            if(attr == "opacity")
            {
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr)); // 数值
            }
            // console.log(current);
            // 目标位置就是  属性值
            var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判断透明度
            if(attr == "opacity")  // 判断用户有没有输入 opacity
            {
                if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current + step) /100;
                }
                else
                {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                }
            }
            else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }
            else
            {
                obj.style[attr] = current  + step + "px" ;
            }

            if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
            {
                flag =  false;
            }
        }
        if(flag)  // 用于判断定时器的条件
        {
            clearInterval(obj.timer);
            //alert("ok了");
            if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
            {
                fn(); // 函数名 +  （）  调用函数  执行函数
            }
        }
    },10)
}
function getStyle(obj,attr) {  //  谁的      那个属性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
    }
}

base.js

window.onload = function() {
	// 1.获取元素
	function $(id) {
		return document.getElementById(id);
	}
	// 2.获取最大的盒子
	var js_slider = $("js_slider");
	// 3.获取图片组的父类
	var slider_main_block = $("slider_main_block");
	// 4.获取图片组
	var imgs = slider_main_block.children;
	// 5.获取控制span的父盒子
	var slider_ctrl = $("slider_ctrl");
	// 6.动态生成小span
	for (var i = 0, len = imgs.length; i < len; i++) {
		// 7.创建元素
		var span = document.createElement("span");
		// 8.为生成的span添加类名，并且倒叙赋值 叠加现象
		span.className = "slider-ctrl-con";
		span.innerHTML = len - i;
		// 9.将生成的span插入到盒子中
		slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
	}
	// 10 为插入的第一个span设置样式
	var spans = slider_ctrl.children;
	spans[1].setAttribute("class", "slider-ctrl-con current");
	// 11.获得后面动画走的距离
	var scrollWidth = js_slider.clientWidth;
	// 12.开始时只有第一张图片留下，其余的走到显示框的右边
	for (var i = 1; i < imgs.length; i++) {
		imgs[i].style.left = scrollWidth + "px";
	}
	// 16.控制图片的张数
	var Now = 0;
	// 13.开始遍历spans 图片+左右的轮播共计8个
	for (var k in spans) {
		spans[k].onclick = function() {
			// 14.判断当前的span是不是prev
			if (this.className == "slider-ctrl-prev") {
				//alert("左侧按钮");
				// 15.开始动画了 第一个参数 谁要动   第二参数 怎么动  第三个参数 回调函数(可省落)
				animate(imgs[Now], {
					left: scrollWidth
				});
				// 17.上一张图片要快速的走到显示框的左侧，然后慢慢的走到舞台中
				--Now < 0 ? Now = imgs.length - 1 : Now;
				imgs[Now].style.left = -scrollWidth + "px";
				animate(imgs[Now], {
					left: 0
				});
				setSquare();
			}
			// 18.判断当前的按钮时next
			else if(this.className=="slider-ctrl-next"){
				// 19.当前的图片先慢慢的走到舞台的左边，下一张快速走到舞台的右侧，然后慢慢的走到舞台中
//				animate(imgs[Now],{left:-scrollWidth});
//				++Now > imgs.length -1 ?Now =0:Now;
//				imgs[Now].style.left = scrollWidth + "px";
//				animate(imgs[Now],{left:0});
//				setSquare();
				autoPlay();
			}else{
				// 20.点击图片下方的序列 1-2-3-4-5-6 对应图片序号是 0-1-2-3-4-5
				var that = this.innerHTML -1;
				if(that >Now){
					// 21.处理逻辑和next按钮类似 当前的慢慢的走到舞台的左侧，下一张快速走到右侧
					animate(imgs[Now],{left:-scrollWidth});
					imgs[that].style.left = scrollWidth + "px";
					//animate(imgs[that],{left:0});
				}else if(that < Now){
					// 22 .处理逻辑和prev类似，当前的慢慢走到舞台的右侧，下一张快速走到舞台的左侧
					animate(imgs[Now],{left:scrollWidth});
					imgs[that].style.left = -scrollWidth + "px";
					//animate(imgs[that],{left:0});
				}
				//else{
					Now = that;
					animate(imgs[Now],{left:0});
					
				//}
				setSquare();
			}

		}
	}
	// 设置走动的显示序列
	function setSquare(){
		// 去掉头部的prev 和尾部的next 两个小span
		for(var i = 1,len = spans.length-1;i<len;i++){
			spans[i].className = "slider-ctrl-con";
		}
		// 这里一定要+1 是下一张
		spans[Now+1].className = "slider-ctrl-con current";
	}
	// 设置定时器开始
	var timer = null;
	timer = setInterval(autoPlay,2000);
	// 23 仔细想想其实定时器的运动和设置next这个小span的功能是一样一样的
	function autoPlay(){
		// 19.当前的图片先慢慢的走到舞台的左边，下一张快速走到舞台的右侧，然后慢慢的走到舞台中
		animate(imgs[Now],{left:-scrollWidth});
		++Now > imgs.length -1 ?Now =0:Now;
		imgs[Now].style.left = scrollWidth + "px";
		animate(imgs[Now],{left:0});
		setSquare();
	}
	// 24.鼠标经过清除定时器
	js_slider.onmouseover = function(){
		clearInterval(timer);
	}
	// 25.鼠标移开是设置定时器
	js_slider.onmouseout = function(){
		// 先清除定时器
		clearInterval(timer);
		// 开启定时器
		timer = setInterval(autoPlay,2000);
	}
}

仿网易轮播图（html+css+javascript）

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条