标签：
先上简单的html代码
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="./css/init2.css"> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="./js/test2.js"></script> </head> <body> <div id="layout"> <header class="clearfix"> <div id="banner"> <ul id="banner_img"> <li class="active"><img src="./img/1.jpg"></li> <li><img src="./img/2.jpg"></li> <li><img src="./img/3.jpg"></li> </ul> </div> </header> </div> </body> </html>
在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。
html代码很简单，不做过多解释。
init2.css
*{ margin: 0px ; padding: 0px ; } #layout{ width: 960px ; margin: 0 auto ; } #banner{ position: relative; overflow: hidden; width: auto; height: 200px; border-radius: 10px ; border: 2px solid black; } #banner_img li{ float: left; list-style-type: none; position: absolute; left: -100% ; } #index{ position: absolute; right: 8px ; bottom: 8px ; } #index li{ float: left; width: 16px ; height: 16px ; text-align: center; line-height: 16px ; border-radius: 5px ; border:1px solid #FF7300 ; background: white; list-style: none; margin-left: 8px ; cursor: pointer; } .clearfix:after{ content: "" ; height: 0px ; display: block; clear:both ; } .on { background:#FF7300 ; }
css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，主要思路是把图片设置成绝对布局之后全部移动到父元素的一侧，然后再通过jquery动画来改变图片的位置，从而达到轮播的效果。
看一下对于鼠标悬停在图片区域的处理（参考别人的）：
$("#banner").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
//alert(index) ;
showImgs(index);
index++;
if(index==len){
index=0;
}
},2000)
}).trigger(‘mouseleave‘);
hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。
再来看看jquery动画的实现：
function showImgs(index) { $(".active").animate({"left": "-100%"},1000); $(".active").removeClass(‘active‘) ; $("#banner_img li").eq(index).css(‘left‘, ‘100%‘); $("#banner_img li").eq(index).animate({"left": "0%"},1000); $("#index li").removeClass(‘on‘).eq(index).addClass(‘on‘) ; $("#banner_img li").eq(index).addClass(‘active‘) ; }
这里的主要思路就是把有class=active的图片，也就是正在显示的图片进行左移，并去掉active类，同时把传进来index的所对应的图片放在父元素右边，然后也左移，这样就造成了一个接一个从右往左移的假象。然后把从右边移过来的图片添加上active类。
我们还需要一个方法来添加图片索引：
function addIndex(n) { var ul = $("<ul id=\"index\"></ul>") ; for(var i=1;i<=n;i++) { var li = $("<li></li>") ; li.append(function(num){ return num }(i)) ; ul.append(li) ; } ul.children().first().addClass(‘on‘) ; $("#banner").append(ul); }
基本上就是这样，需要注意图片的宽度要和父元素一样，不然会有无法连续衔接或者部分溢出的问题。
全部js：
init(); function init() { $(function(){ var index = 1 ; var adTime ; var len = $("#banner_img li").length ; addIndex(len) ; $(".active").css(‘left‘, ‘0%‘); var bannerLi = $("#index li"); //handle index $("#index li").mouseover(function() { index = $("#index li").index(this) ; jumpImgs(index) ; index++ ; if(index==len) { index = 0 ; } }); //toggleInterval $("#banner").hover(function(){ clearInterval(adTimer); },function(){ adTimer=setInterval(function(){ //alert(index) ; showImgs(index); index++; if(index==len){ index=0; } },2000) }).trigger(‘mouseleave‘); }); } //auto add index function addIndex(n) { var ul = $("<ul id=\"index\"></ul>") ; for(var i=1;i<=n;i++) { var li = $("<li></li>") ; li.append(function(num){ return num }(i)) ; ul.append(li) ; } ul.children().first().addClass(‘on‘) ; $("#banner").append(ul); } function jumpImgs(index) { $(".active").css(‘left‘, ‘-100%‘); $(".active").removeClass(‘active‘) ; $("#banner_img li").eq(index).css(‘left‘, ‘0%‘); $("#banner_img li").eq(index).addClass(‘active‘) ; } function showImgs(index) { $(".active").animate({"left": "-100%"},1000); $(".active").removeClass(‘active‘) ; $("#banner_img li").eq(index).css(‘left‘, ‘100%‘); $("#banner_img li").eq(index).animate({"left": "0%"},1000); $("#index li").removeClass(‘on‘).eq(index).addClass(‘on‘) ; $("#banner_img li").eq(index).addClass(‘active‘) ; }
标签：
原文地址：http://www.cnblogs.com/maskmtj/p/4743525.html
