<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
display: block;
}
.banner{
600px;
height: 350px;
margin: 50px auto;
position: relative;
border: 1px solid #000;
overflow: hidden;
}
.list{
5000px;
}
.list li{
float: left;
}
.btn{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
.btn li{
float: left;
30px;
font: 14px/30px "微软雅黑";
text-align: center;
border-radius: 50%;
background: deeppink;
color: #fff;
cursor: pointer;
margin: 0 5px;
}
.banner>a{
position: absolute;
30px;
font: 24px/60px "新宋体";
text-align: center;
text-decoration: none;
background: rgba(0,0,0,0.3);
top: 50%;
transform: translateY(-50%);
color: #fff;
}
.banner>a:last-child{
right: 0;
}
/**
* of-type限制类型
* li:first-child 如果第一个子元素不是li是选择不到的
*
*
*/
.banner>a:nth-of-type(1){
left: 0;
}
.banner>a:hover{
background: rgba(0,0,0,0.5);
}
.btn .active{
background: springgreen;
}
</style>
<body>
<div class="banner">
<!-- ul.list>li*6>a>img[src=images/banner/$.jpg]
-->
<ul class="list">
<li class="on"><a href=""><img src="images/banner/1.jpg" alt="" /></a></li>
<li><a href=""><img src="images/banner/2.jpg" alt="" /></a></li>
<li><a href=""><img src="images/banner/3.jpg" alt="" /></a></li>
<li><a href=""><img src="images/banner/4.jpg" alt="" /></a></li>
<li><a href=""><img src="images/banner/5.jpg" alt="" /></a></li>
<li><a href=""><img src="images/banner/6.jpg" alt="" /></a></li>
</ul>
<ul class="btn">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<a href="javascript:;"><</a>
<a href="javascript:;">></a>
</div>
</body>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1. 初始化 获取元素
var list = $('.list');
var first = list.children(':first').clone(true);
var index = 0;
var length = list.children().length;
var width = list.children(':first').width();
var btns = $('.btn li');
//2. 克隆第一个扔到尾部
list.append(first);
//3.定义核心函数
function core(num){
//4.根据索引值 找到对应的按钮添加类名其它小伙伴 要删除类名
// 如果索引值大于等于按钮长度 找不到这个按钮 强制使用索引值0
btns.eq(num>=btns.length ? 0 : num).addClass('active').siblings().removeClass('active');
//5.根据索引值计算left值
var left = -num * width;
//6. 执行动画方法
list.stop().animate({'margin-left':left});
}
//4. 定义一个函数用于定时器与 右箭头
var play = function(){
//1.索引值+1
index++;
//2. 如果索引值大于6 瞬间将显示的位置调整到0
if(index>length){
//3.瞬间将位置调整到第一图也就是0
list.css('margin-left',0);
//4. 调整到0的位置显示的还是第一张 下一张索引应该是1 也就是第二张图
index = 1;
}
core(index)
}
//5.开启定时器
var sid = setInterval(play,1000);
//6.右箭头
$('.banner>a:last').click(play);
//7.左箭头
$('.banner>a:first').click(function(){
//8.索引值--
index--;
if(index<0){
//9.如果索引值于0 瞬间调整到最后一张图的位置，最后一张和第一张是相同的
list.css('margin-left',-length*width);
//10.索引值应该为 5
index = length-1;
}
core(index)
});
//11.移入移出事件
$('.banner').hover(function(){
clearInterval(sid)
},function(){
sid = setInterval(play,1000);
})
//12.按钮切换
btns.click(function(){
//13.获取当前元素值
core(index = $(this).index())
})
</script>
</html>