一、所用到的知识点
1.DOM操作
2.定时器
3.事件运用
4.Js动画
5.函数递归
6.无限滚动大法
二、结构和样式
<div> <ul> <li><a href="#"><img src="https://www.jb51.net/images/banner4.jpg" alt="" title="" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/banner1.jpg" alt="" title="" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/banner2.jpg" alt="" title="" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/banner3.jpg" alt="" title="" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/banner4.jpg" alt="" title="" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/banner1.jpg" alt="" title="" /></a></li> </ul> <div> <div> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> <div> <a href="#"></a> </div> <div> <a href="#"></a> </div> </div>
.banner{position:relative;width:624px;height:200px;overflow:hidden;} .banner .list-banner{position:absolute;width:5000px;} .banner .list-banner li{float:left;width:624px;height:200px;} .banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;} .banner .list-num{width:100px;margin:0 auto;} .banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;} .banner .list-num a:hover{background:url(../images/list-num-hover.png));} .banner .list-num a.hover{background:url(../images/list-num-hover.png);} .banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;} .banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
三、脚本思路
1.先左右按钮功能
window.onload=function(){ var prev=document.getElementById("left"); var next=document.getElementById("right"); var list_banner=document.getElementById("list-banner"); next.onclick=function(){ list_banner.style.left=parseInt(list_banner.style.left)-624+'px'; //注：html上的ul要加行间样式left:0;，否则这里动不起来 } prev.onclick=function(){ list_banner.style.left=parseInt(list_banner.style.left)+624+'px'; } }
2.左右按钮点击的两句话很像，封装成函数
function animate(offset){ list_banner.style.left=parseInt(list_banner.style.left)+offset+'px'; } next.onclick=function(){ animate(-624); } prev.onclick=function(){ animate(624); }
3.无限滚动
①假图的做法
即图片为412341，小于最后一张位置的时候，回到第一张的位置，大于 第一张位置的时候，拉到最后一张的位置
function animate(offset){ var newLeft=parseInt(list_banner.style.left)+offset; list_banner.style.left=newLeft+'px'; if(newLeft<-2496){ list_banner.style.left=-624+"px"; } if(newLeft>-624){ list_banner.style.left=-2496+"px"; } }
4.小圆点跟着左右按钮切换
var index=1; function showDot(){ for(var i=0;i<list_num.length;i++){ list_num[i].className=""; } list_num[index-1].className="hover"; } next.onclick=function(){ animate(-624); index++; if(index>4){ index=1; } showDot(); } prev.onclick=function(){ animate(624); index--; if(index<1){ index=4; } showDot(); }
5.点击小圆点图片滚动及小圆点切换
for(var i=0;i<list_num.length;i++){ list_num[i].onclick=function(){ if(this.className=="hover"){ return; } var myIndex=parseInt(this.getAttribute("index")); var offset=-624*(myIndex-index); index=myIndex; animate(offset); showDot(); } }
①点自己的时候不执行下列代码
②
<div> <div> <a index="1" href="#"></a> <a index="2" href="#"></a> <a index="3" href="#"></a> <a index="4" href="#"></a> </div> </div>
关键是要取到点击的是第几张图片，不能直接var myIndex=this.index;因为index是自定义属性，dom自带属性可以通过点来获取，自定义属性不行，.getAttribute（）既可以获取自定义属性，又可以获取dom自带属性
③更新index值，index=myIndex;
6.动画函数（有一个渐变的运动过程）
function animate(offset){ animated=true; var newLeft=parseInt(list_banner.style.left)+offset; var time=300; //位移总时间 var interval=30; //位移间隔时间 var speed=offset/(time/interval); //每次移动距离 speed=speed>0?Math.ceil(speed):Math.floor(speed); //可能存在小数，取整 function go(){ if((speed < 0 && parseInt(list_banner.style.left)>newLeft)||(speed>0&&parseInt(list_banner.style.left)<newLeft)){ //newLeft目标值 list_banner.style.left=parseInt(list_banner.style.left)+speed+'px'; setTimeout(go,interval); //不止做一次运动（go函数），每隔30毫秒前进一下 } else{ animated=false; list_banner.style.left=newLeft+'px'; if(newLeft<-2496){ list_banner.style.left=-624+"px"; } if(newLeft>-624){ list_banner.style.left=-2496+"px"; } } } go(); } next.onclick=function(){ if(!animated){ index++; } if(index>4){ index=1; } showDot(); if(!animated){ animate(-624); } } prev.onclick=function(){ if(!animated){ index--; } if(index<1){ index=4; } showDot(); if(!animated){ animate(624); } } for(var i=0;i<list_num.length;i++){ list_num[i].onclick=function(){ if(this.className=="hover"){ return; } var myIndex=parseInt(this.getAttribute("index")); var offset=-624*(myIndex-index); index=myIndex; showDot(); if(!animated){ animate(offset); } } }
①一个函数不停地在一个条件后调用自身，这种做法就叫做递归，这里通过递归可以实现animate这个函数的动画效果
②不停点就意味着不停调用animate函数，可能会造成卡顿，图片乱刷，需要优化，引进变量animated
7.自动播放