css样式：
<style>
* {
padding: 0px;
margin: 0px;
list-style: none;
}
.banner {
width: 660px;
height: 200px;
margin: 100px auto;
border: 1px solid #808080;
position: relative;
overflow: hidden;
}
.banner .img {
width: 6600px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
}
.banner .img img {
width: 660px;
height: 200px;
}
.banner .img li {
float: left;
}
.banner .num {
position: absolute;
width: 100%;
bottom: 10px;
left: 0px;
text-align: center;
font-size: 14px;
}
.banner .num li {
width: 20px;
height: 20px;
background-color: #888;
border-radius: 50%;
display: inline-block;
margin: 0px 3px;
cursor: pointer;
text-align: center;
line-height: 18px;
color: #FFFFFF !important;
}
.banner .num li.on {
background-color: #ff6a00;
}
.banner .btn {
width: 30px;
height: 50px;
background-color: #808080;
opacity: 0.5;
filter: alpha(opacity:0.5);
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
text-align: center;
line-height: 50px;
font-size: 40px;
color: #fff;
font-family: "宋体";
display: none;
}
.banner .btn_l {
left: 0px;
}
.banner .btn_r {
right: 0px;
}
.banner:hover .btn {
display: block;
}
</style>
html代码：
<div class="banner">
<ul class="img">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
jQuery代码：
1.首先引用jQuery文件
<script type="text/javascript" src="js/jquery.js"></script>
2.jQuery：
<script>
$(document).ready(function() {
var total = 0;//计数器
var clone = $(".banner .img li").first().clone(); //克隆第一张图片
$(".banner .img").append(clone); //复制到列表最后
var size = $(".banner .img li").size(); //返回匹配元素的数量
console.log(size);
/*
* 写法1：
* for(var j = 0; j < size-1; j++) {
$(".banner .num").append('<li>'+(j+1)+'</li>');
}
$(".banner .num li").first().addClass("on");*/
/*循环图片容器的数量，并且向点点按钮的大容器添加几个子节点作为点点按钮*/
//写法2：
for(var j = 1; j < size; j++) {
$(".banner .num").append('<li>'+j+'</li>');
}
$(".banner .num li").first().addClass("on");
/*自动轮播*/
var t = setInterval(function() {
total++;
move();
}, 2000);
/*鼠标悬停事件*/
$(".banner").hover(function() {
clearInterval(t); //鼠标悬停时清除定时器
}, function() {
t = setInterval(function() {
total++;
move();
}, 2000); //鼠标移出时开始定时器
});
/*鼠标滑入原点事件*/
$(".banner .num li").hover(function() {
var index = $(this).index(); //获取当前索引值
total= index;
$(".banner .img").stop().animate({
left: -index * 660
}, 500);
$(this).addClass("on").siblings().removeClass("on");
});
/*向左按钮*/
$(".banner .btn_l").click(function() {
total--;
move();
}) /*向右按钮*/
$(".banner .btn_r").click(function() {
total++;
move();
}) /*移动事件*/
function move() {
if(total == size) {
$(".banner .img").css({
left: 0
});
total = 1;
}
if(total == -1) {
$(".banner .img").css({
left: -(size - 1) * 660
});
total = size - 2;
}
$(".banner .img").stop().animate({
left: -total * 660
}, 660);
if(total == size - 1) {
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(total).addClass("on").siblings().removeClass("on");
}
}
});
</script>
