1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
5 <title></title>
6 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
7 <meta content="always" name="referrer">
8 <meta name="theme-color" content="#2932e1">
9 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
10 <link href="base.css" rel="stylesheet" type="text/css" />
11 <style type="text/css" media="screen">
12 .al{height: 600px;width: 1000px;position: relative;margin: 30px auto 0;}
13 .wrap,.imgbox,.num{height: 600px;width: 1000px;position: absolute;overflow: hidden;}
14 .imgbox li{height: 600px;width: 1000px;float: left;}
15 .imgbox li img{height: 600px;width: 1000px;display: inline-block;}
16 .numbox{height: 30px;width:300px;position: absolute;bottom: 30px;right: 280px;}
17 .numbox li{width: 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: blue;}
18 .numbox .select{width: 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: red;}
19 .left,.right{width: 41px;height: 69px;position: absolute;display: inline-block;z-index: 9999;}
20 .left{top:280px;left:0;background:url(images/icon.png)-84px 0 no-repeat;}
21 .right{top:280px;right:0;background:url(images/icon.png)-125px 0 no-repeat;}
22 .left:hover{background: url(images/icon.png)0 0 no-repeat;}
23 .right:hover{background: url(images/icon.png)-43px 0 no-repeat;}
24 </style>
25 </head>
26 <body>
27 <div class="al">
28 <a href="#" class="left"></a>
29 <a href="#" class="right"></a>
30 <div class="wrap">
31 <ul class="imgbox">
32 <li><img src="images/bg1.jpg" alt="" /></li>
33 <li><img src="images/bg2.jpg" alt="" /></li>
34 <li><img src="images/bg3.jpg" alt="" /></li>
35 <li><img src="images/bg4.jpg" alt="" /></li>
36 <li><img src="images/bg5.jpg" alt="" /></li>
37 </ul>
38 </div>
39 <div class="num">
40 <ul class="numbox">
41 <li class="select"></li>
42 <li></li>
43 <li></li>
44 <li></li>
45 <li></li>
46 </ul>
47 </div>
48
49 </div>
50 <script>
51 /* var time = "";
52 var index = 1;
53 $(function () {
54 showimg(index);
55 //鼠标移入移出
56 $(".numbox li").hover(function () {
57 clearTimeout(time);
58 var ind=$(this).index();
59 $(this).addClass('select').siblings().removeClass('select');
60 $(".imgbox li").hide().stop(true,true).eq(ind).fadeIn("slow");
61 }, function () {
62 index=$(this).index()+2> 5 ? 1 :$(this).index()+2;
63 time = setTimeout("showimg(" + index+ ")", 3000);
64 });
65 });
66
67 function showimg(num) {
68 index = num;
69 $(".numbox li").removeClass("select").eq(index-1).addClass("select");
70 $(".imgbox li").hide().stop(true,true).eq(index-1).fadeIn("slow");
71 index = index + 1 > 5 ? 1 : index + 1;
72 time = setTimeout("showimg(" + index + ")", 3000);
73 }*/
74
75 var index=1;
76 var timer="";
77 autopl(index);
78 $('.numbox li').mouseover(function(){
79 clearTimeout(timer);
80 var num=$(this).index();
81 $(this).addClass('select').siblings().removeClass('select');
82 $('.imgbox li').eq(num).fadeIn('slow').siblings().hide();
83 });
84 $('.numbox li').mouseout(function(){
85 index=$(this).index()+2> 5 ? 1 :$(this).index()+2;
86 timer = setTimeout("autopl(" + index+ ")", 3000);
87 });
88
89 function autopl(numb){
90 index =numb;
91 $('.numbox li').eq(index-1).addClass('select').siblings().removeClass('select');
92 $('.imgbox li').eq(index-1).fadeIn('slow').siblings().hide();
93 index=index+1 > 5 ? 1 : index + 1;
94 timer = setTimeout('autopl(' +index+ ')',3000);
95 }
96 $('.left').click(function(){
97 clearTimeout(timer);
98 var ind=$('.numbox li').index($('.select'));
99 var inde=ind+1>1?ind-1:4;
100 $('.numbox li').eq(inde).addClass('select').siblings().removeClass('select');
101 $('.imgbox li').eq(inde).fadeIn('slow').siblings().hide();
102 index=inde+1<5?inde+1:0;
103 timer=setTimeout('autopl('+index+')',3000);
104 })
105 $('.right').click(function(){
106 clearTimeout(timer);
107 var ind=$('.select').index();
108 var inde=ind+1<5?ind+1:0;
109 $('.numbox li').eq(inde).addClass('select').siblings().removeClass('select');
110 $('.imgbox li').eq(inde).fadeIn('slow').siblings().hide();
111 index=inde+1<5?inde+1:0;
112 timer=setTimeout('autopl('+index+')',3000);
113 })
114
115 </script>
116
117 </body>
118 </html>
//改进版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
*{ margin: 0; padding: 0; text-decoration: none;}
#container { width: 600px; overflow: hidden; position: relative;height: 400px;border:1px solid red;margin:50px auto;}
#list { position: relative; z-index: 1;width: 600px;height: 400px;}
#list img {position: absolute;width: 600px;height:400px;top:0;left:0; }
#buttons { position: absolute; width: 200px; z-index: 2; bottom: 20px; left: 50%;text-align: center;margin-left: -100px;font-size: 0}
#buttons span {font-size: 16px;color: #fff;font-weight: bold;display: inline-block;width: 20px; height: 20px;border-radius: 50%;background:gray;text-align: center;cursor:pointer;margin-left: 5px;}
.arrow { cursor: pointer;width: 40px; height: 40px; position: absolute; z-index: 2; top: 50%;margin-top: -20px;}
#prev { left: 20px;background: url(img/prev.png)0 0 no-repeat;background-size: 100% 100%;}
#next { right: 20px;background: url(img/next.png)0 0 no-repeat;background-size: 100% 100%;}
#buttons .select{background: #fff;color: red;}
</style>
<script type="text/javascript" src="js/jquery.1.10.2.js"></script>
<script type="text/javascript">
$(function(){
if($('#list img').size()!=$('#buttons span').size()){
return false;
}
var len=$('#list img').size();
var index=$('.select').index('.num');
var timer=null;
$('#next').click(function(){
index += 1;
if(index==len){
index=0;
$('#list img').eq(index).show().siblings().hide();
$('#buttons span').eq(index).addClass('select').siblings().removeClass('select');
}else{
$('#list img').eq(index).show().siblings().hide();
$('#buttons span').eq(index).addClass('select').siblings().removeClass('select');
}
})
$('#prev').click(function(){
index -= 1;
if(index==-1){
index=len-1;
$('#list img').eq(index).show().siblings().hide();
$('#buttons span').eq(index).addClass('select').siblings().removeClass('select');
}else{
$('#list img').eq(index).show().siblings().hide();
$('#buttons span').eq(index).addClass('select').siblings().removeClass('select');
}
})
$('.num').click(function(){
index=$(this).index('.num');
$('#list img').eq(index).show().siblings().hide();
$('#buttons span').eq(index).addClass('select').siblings().removeClass('select');
})
function play(){
timer=setTimeout(function(){
$("#next").trigger('click');
play();
}, 3000);
}
function stop(){
clearTimeout(timer);
}
$("#container").hover(stop,play);
play();
})
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:0px;">
<img src="img/1.jpg" alt="1" style="z-index:5;" />
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
</div>
<div id="buttons">
<span class="num select">1</span>
<span class="num">2</span>
<span class="num">3</span>
<span class="num">4</span>
<span class="num">5</span>
</div>
<a href="javascript:;" id="prev" class="arrow"></a>
<a href="javascript:;" id="next" class="arrow"></a>
</div>
</body>
</html>
