javascript无缝全屏轮播

虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线;

其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦!

代码还没封装成插件,其实我也还没弄清楚。

下面有很多注释的,如果路过的你认为有错误,请指出来啊,使劲拍。

 

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style>
    html,body{
    	margin:0px;
    	padding:0px;
    }
    .wrap{
        width: 1920px;
        height: 450px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    .list{
        position: absolute;    
    }
    img{
        width: 1920px;
        height: 450px;
        float: left;
    }
    a{
        text-decoration: none;
        position: absolute;
        top:100px;
        display: inline-block;
        width: 85px;
        line-height: 70px;
        background: rgba(3,3,3,.3);
        color: #fff;
        font-weight: 700;
        font-size: 50px;
        text-align: center;
        display: none;
    }
    .buttons{
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }
    span{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        border: 1px solid #fff;
    }
    span~span{
        margin-left: 20px;
    }
    .light{
        background-color: #fff;
    }
    </style>
</style>
</head>
<body>
    <div class="wrap" >
    	<div class="list" >
    		<img src="4.jpg">
    		<img src="1.jpg">
    		<img src="2.jpg">
    		<img src="3.jpg">
    		<img src="4.jpg">
    		<img src="1.jpg">
    	</div>
    	<a href="javascript:;" ><</a>
    	<a href="javascript:;" >></a>
    	<div class="buttons" >
    		<span class="light"></span>
    		<span ></span>
    		<span ></span>
    		<span ></span>
    	</div>
    </div>
</body>
</html>

js

<script type="text/javascript">
	window.onload = function(){
		var index = 1;
		var b = false;
        var timer;
		var wrap = document.getElementById('wrap');
		var list = document.getElementById('list');
		var prev = document.getElementById('prev');
		var next = document.getElementById('next');
		var buttons = document.getElementById('buttons');
		var dots = document.getElementsByTagName('span');
		var width = list.getElementsByTagName('img')[0].width;
		var length = dots.length;


		//初始化
		list.style.width = (length * width +2*width)+ 'px';
        
        //给span添加索引
        function addIndex(){
        	for(i = 0 ; i < dots.length ; i++){
        		dots[i].setAttribute('index',i+1) ;

        	}
        }
        addIndex();

		//左右按钮鼠标滑入显示
		wrap.onmouseover = function(){
			prev.style.display = 'block';
			next.style.display = 'block';
			stop();
		};

		//左右按钮鼠标滑出隐藏
		wrap.onmouseout = function(){
			prev.style.display = 'none';
			next.style.display = 'none';
			play();
		};

		//上一张
		function prevImg(){
			//防止连续滚动出现bug
			if(b){
                return;
			}

			//上一张函数
			slider(width);

			//索引,pagination用到
			index--;
			if(index < 1){
				index = length;
			}else if(index > length){
				index = 1;
			}

            //pagination函数
            pagination();
		}

		//下一张
		function nextImg(){
			//防止连续滚动出现bug
			if(b){
                return;
			}
			//上一张函数
			slider(-width);

			//索引,pagination用到
			index++;
			if(index < 1){
				index = length;
			}else if(index > length){
				index = 1;
			}

            //pagination函数
            pagination();
		}

		//上一张,下一张,触发其他函数变化
		function btn(e){
			if(b){
				return;
			}
            //兼容ff,ie
			e = window.e || e;
			var target = e.target ? e.target : e.srcElement;
            if(target.nodeName.toLowerCase() == 'span'){
            	var index1 = target.getAttribute('index');
            	//获取目标索引图片和当前图片的距离
                var offset = (index - index1) * width;
                slider(offset);
                index = index1;
                pagination();
            }
		}
        
        //切换核心函数
        function slider(offset){

            b = true ;
            //完成时间
            var time = 500;
            //间隔时间
            var inter = 5;
            //间隔时间内的移动距离,需要优先级限制,不然会出现问题(6/3/1)与(6/(3/1))结果不一
            
            var speed = Math.ceil(offset/(time/inter));

            //每次运动后的距离
            var left = parseInt(list.style.left) + offset;

            //运动函数
            var go = function(){

            	//当前left
            	var curLeft = parseInt(list.style.left);

            	//当滑动出处于中间,并且left没有完成动画时
            	if((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)){
                    
                    //运动(根据speed,的正负,决定左右方向)
            		list.style.left =curLeft + speed + 'px';
            		//延迟动画,是否执行取决于条件,也就是距离是否返程
            		
            			setTimeout(go,inter);
            		
            		
            	}
            	//当处于两端的时候
            	else{

            		//首先执行完成运动函数
            		list.style.left = left + 'px';
                    //根据left的值,决定是否重新设置left;
                    //当滑到最右
                    if(left < -(width * length)){
                    	list.style.left = -width + 'px';
                    }
                    //当滑到最左
                    else if(left > -width){
                    	list.style.left = -(width * length) + 'px';
                    };
                    b = false;
            	};
            };
            go();
        };
        
        //绑定dom
        function addEvent(element, event, listener){
        	//兼容ff,ie
        	if(element.addEventListener){
        		element.addEventListener(event,listener,false);
        	}else{
        		element.attachEvent('on'+event,listener);
        	};
        };
        
        //触发点击事件
        addEvent(prev,'click',prevImg);
        addEvent(next,'click',nextImg);
        addEvent(buttons,'click',btn)

        //分页函数
        function pagination(){

        	//遍历span,找出当前点亮的span
        	for( i = 0 ; i< dots.length ; i++){
        		if(dots[i].className == 'light'){
        			dots[i].className = '';
        			//跳出循环,执行循环后的函数
        			break;
        		};        		
        	};
        	//使span索引为当前index-1(span的索引从0开始)的点亮
        	dots[index -1].className = 'light';
        };

        //自动轮播
        function play(dire,interval){
            interval = interval || 3000;
            if(dire == 'left'){
            	timer = setInterval(prevImg,interval);
            }else{
            	timer = setInterval(nextImg,interval);
            }
        };
        play('right',3000);

        //终止轮播
        function stop(){
        	clearInterval(timer);
        };

        //全屏滚动,图片居中;
        function center(){
        	var viewWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        	var imgWidth = width;
            var posCenter = (imgWidth - viewWidth) / 2;

            wrap.style.left = -posCenter + 'px';
        }
        window.onresize = center;
        

	};
</script>

  

30人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册