css-style**/ /**画布大小*/ #container { margin:0 auto; width: 600px; height: 400px; overflow: hidden;/*超出画布部分隐藏*/ position: relative;/*相对定位*/ cursor: pointer; } /**图片容器*/ #list { width: 4200px; height: 400px; position: absolute; z-index:1; } #list img { float: left; } /**轮播选中按钮样式*/ #button { position: absolute; bottom: 25px; left: 175px; width: 250px; z-index: 2; } #button ul li { list-style: none; width: 15px; border-radius: 50%; padding: 7.5px; height: 15px; margin-right: 10px; background: green; float: left; font:15px/15px "microsoft yahei"; text-align: center; font-weight: bold; color: white; cursor: pointer; } #button ul li.chos { background: orange; } #container:hover .arrow{ display: block; } #pre { left: 20px; } #next { right: 20px; } /**pre next定位*/ .arrow { position: absolute; width: 40px; height: 40px; background: black; z-index: 3; top: 180px; text-decoration: none; text-align: center; line-height: 40px; font-size: 40px; color: white; opacity: 0.3; filter: alpha(opacity=0.3); display: none; } /**pre next按钮透明度*/ #container a:hover { opacity: 0.7; filter: alpha(opacity=0.7); }

<Meta charset="UTF-8">

5) { index=1; }; showButton(); console.info('next'+index); } //prev prev.onclick=function(){ if(!animated){ animate(600); } index-=1; if(index<1){ index=5; } showButton(); console.info('prev'+index); } //animate function animate(offset){ animated=true; var left=parseInt(list.style.left)+offset; var animateTime=600;//位移总时间 var interval=10;//时间间隔 var speed=offset/(animateTime/interval);//每次位移量 var go=function(){//animate内部函数 if ((speed<0 && parseInt(list.style.left)>left) || (speed>0 && parseInt(list.style.left)-600){//第一张最前面 list.style.left=-3000+'px';//显示最后一张 } animated=false; }; } go(); } //chos function showButton(){ for (var i = 0; i < buttons.length; i++) { buttons[i].className=''; }; buttons[index-1].className='chos'; } //buttons-click for (var i = 0; i < buttons.length; i++) { buttons[i].onclick=function(){ if(this.className=='chos'){ return; } var myIndex=parseInt(this.getAttribute('index')); var offset=(myIndex-index)*-600; //偏移量 animate(offset); index=myIndex;//set Index showButton(); } }; function play(){ timer=setTimeout(function(){ next.click(); play(); },interval) } function stop(){ clearInterval(timer); } play(); container.onmouSEOver=function(){ stop(); } container.onmouSEOut=function(){ play(); } }

0) { offset = '+=' + offset; } else { offset = '-=' + Math.abs(offset); } list.animate({'left': offset},300,function () { if(left > -200){ list.css('left',-600 * len); } if(left < (-600 * len)) { list.css('left',-600); } }); } function showButton() { buttons.eq(index-1).addClass('chos').siblings().removeClass('chos'); } function play() { timer = setTimeout(function () { next.trigger('click'); play(); },interval); } function stop() { clearTimeout(timer); } next.bind('click',function () { if (list.is(':animated')) { return; } if (index == 5) { index = 1; } else { index += 1; } animate(-600); showButton(); }); prev.bind('click',function () { if (list.is(':animated')) { return; } if (index == 1) { index = 5; } else { index -= 1; } animate(600); showButton(); }); buttons.each(function () { $(this).bind('click',function () { if (list.is(':animated') || $(this).attr('class')=='chos') { return; } var myIndex = parseInt($(this).attr('index')); var offset = -600 * (myIndex - index); animate(offset); index = myIndex; showButton(); }) }); container.hover(stop,play); play(); });