效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="../static/js/jquery.min.1.8.1.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.banner{
width: 700px;
height: 340px;
background-color: #fed93a;
margin-top: 20px;
margin-left: 20px;
margin: 0px auto;
overflow: hidden;
position: relative;
}
.banner .pic ul li{
list-style: none;
}
.left{
width: 30px;
height: 50px;
position: absolute;
top: 130px;
left: 20px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
line-height: 50px;
}
.right{
width: 30px;
height: 50px;
position: absolute;
top: 130px;
right: 20px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
line-height: 50px;
}
.dot{
/*position: absolute;
width: 200px;
height: 30px;
bottom: 30px;
left: 315px;
background-color: rgba(0,0,0,0.3);
border-radius: 15px;*/
position: absolute;
width: 200px;
height: 30px;
bottom: 30px;
left: 315px;
background-color: rgba(0,0,0,0.3);
border-radius: 15px;
}
.dot ul li{
list-style: none;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #fff;
float: left;
margin: 7px 5px;
padding-left: 2px;
}
.dot ul li:hover{
background-color: #cd0b2d;
}
</style>
</head>
<body>
<div class="banner">
<div class="pic">
<div class="left"><</div>
<ul>
<li>
<a>
<img src="adver01.jpg" >
</a>
</li>
<li>
<a>
<img src="adver02.jpg">
</a>
</li>
<li>
<a>
<img src="adver03.jpg">
</a>
</li>
<li>
<a>
<img src="adver04.jpg">
</a>
</li>
<li>
<a>
<img src="adver05.jpg">
</a>
</li>
<li>
<a>
<img src="adver06.jpg">
</a>
</li>
</ul>
<div class="right">></div>
</div>
<div class="dot">
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var num=1;
var timer;
var hasStarted = false;
$(".banner .left").click(function(){
stop();
--num;
num = num%$(".pic li").size();
showpic(num);
});
$(".banner .right").click(function(){
stop();
++num;
num = num%$(".pic li").size();
showpic(num);
});
function showpic(index){
$(".pic li").eq(index).show().siblings().hide();
$(".dot li").eq(index).css("background","red").siblings().css("background","#fff");
}
$(".dot li").hover(function () {
stop();
num = $(this).index();
$(".pic li").eq(num).show().siblings().hide();
$(this).css("background","red").siblings().css("background","#fff");
},start);
$(".pic li").each(function(index){
$(this).hover(function(){
stop();
show(index);
num = index+1;
},start)
});
function start() {
if(!hasStarted) {
hasStarted = true;
timer = setInterval(function(){
showpic(num);
num++;
if(num== $(".pic li").size()){
num =0;
}
},2000);
}
}
function stop() {
clearInterval(timer);
hasStarted = false;
}
start();
});
</script>
</html>
