先上简单的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‘) ;
}
时间： 2024-12-21 07:10:02