轮播图例子
下面是一个轮播图的例子,实现无缝滚动。
思路如下:把ul复制一份,当图片停止滚动时,判断这张图是不是复制的ul的第一张图片,如果是就把ul拉回来。
源代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding: 0; } #box{ width: 730px; height: 454px; margin: 50px auto; position: relative; overflow: hidden; } li{ list-style: none; float: left; } ul{ position: absolute; left:0; } #box div{ height: 70px; width: 100%; background: black; opacity: 0.6; position: absolute; bottom: 0; color:white; text-indent: 20px; /*缩进*/ } #box div h3{ line-height: 40px; } </style> <script src="js/move.js"></script> /*运动框架*/ <script> window.onload=function(){ var ul=document.querySelector("ul"); var box=document.getElementById("box"); var div=document.querySelector("#box div"); var timer; var n=0; //n存储图片走的个数 var textArr=[ {"title":'盛惠而来',"content":'京东携手天天果园百万车厘子,29元包邮畅想'}, {"title":'荣耀7',"content":'有点不同,0元预约,免费抽奖1999元'}, {"title":'老板购物节',"content":'2015我要更省,老板XX购物节精彩来袭'}, {"title":'送钱送美酒',"content":'大盘让我心碎,我在京东买醉送钱送美酒'}, {"title":'玩转暑假',"content":'追风少年,联想拯救者全国独家抢购'}, {"title":'游园门票',"content":'奔跑吧周末游游园门票一元秒杀'} ]; //复制ul ul.innerHTML+=ul.innerHTML; var lis=document.querySelectorAll("li"); var w=parseInt(getComputedStyle(lis[0]).width); ul.style.width=w*lis.length+"px"; div.innerHTML='<h3>'+textArr[0].title+'</h3><p>'+textArr[0].content+'</p>'; //创建轮播函数 function roll(){ timer=setInterval(function pic(){ n++; //文字向下移动 move(div,{bottom:-70},500,"linear",function(){ //ul向左移动 move(ul,{left:-730*n},1000,"linear",function(){ if(n==lis.length/2){ ul.style.left=0; n=0 //n值重置为0 } //在文字上去之前应该把内容改了 div.innerHTML='<h3>'+textArr[n].title+'</h3><p>'+textArr[n].content+'</p>'; //文字向上移动 move(div,{bottom:0},500,"linear"); }) }); },3000); } //调用函数 roll(); //鼠标移入,停止滚动 box.onmouseover=function(){ clearInterval(timer); } //鼠标移出,继续滚动 box.onmouseout=function(){ roll(); } } </script> </head> <body> <div id="box"> <ul> <li><img src="img2/1.jpg"/></li> <li><img src="img2/2.jpg"/></li> <li><img src="img2/3.jpg"/></li> <li><img src="img2/4.jpg"/></li> <li><img src="img2/5.jpg"/></li> <li><img src="img2/6.jpg"/></li> </ul> <div> <h3></h3> <p></p> </div> </div> </body> </html>
放弃不难,但坚持一定很酷!