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" id="wrap"> <div class="list" id="list" style="left:-1920px;"> <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:;" id="prev"><</a> <a href="javascript:;" id="next" style="right:0;">></a> <div class="buttons" id="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>