1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 ul{padding: 0;margin: 0;border: 0;}
8
9 .slider{width: 400px;height: 400px;position: relative;margin: 0 auto;
10 }
11 .slider ul{width: 400px;height: 400px;margin-left: 50px;}
12 .slider li{width: 400px;height: 400px;position: absolute;top: 0; left: 0;list-style: none;}
13 .slider li img{width: 400px;height: 400px;position: relative;
14 }
15 .left{width:50px; height:50px; position: absolute;top:175px;left: -50px;background: black;display: none;}
16 .right{width:50px; height:50px; position: absolute;top:175px;right: -50px;background: black;display: none;}
17 .num{width: 160px; margin: 0 auto;}
18 .num li{float: left; width: 20px;height: 20px;border-radius: 10px; background: gray;list-style: none;margin: 10px;}
19 .active{background:red !important;}
20
21 </style>
22 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
23
24
25 </head>
26 <body>
27 <div class="flexslider">
28 <div class="slider">
29 <ul >
30 <li><img src="图片" /></li>
31 <li><img src="图片" /></li>
32 <li><img src="图片" /></li>
33 <li><img src="图片" /></li>
34 </ul>
35 <div class="left"></div>
36 <div class="right"></div>
37 </div>
38
39 <ul class="num">
40 <li class="active"></li>
41 <li></li>
42 <li></li>
43 <li></li>
44 </ul>
45 </div>
46
47
48 <script>
49 $(function() {
50 var count=$('.slider li').length;
51 var index=0;
52 var timer;
53
54 //全部轮播定时器
55 function setTimer(){
56 timer=setInterval(function(){
57 index++;
58 $(".slider li").eq(index%count).show().siblings('li').hide();
59 $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active');
60
61 },1000)
62 };
63 //定时器运行
64 setTimer();
65
66 //移入移除轮播开关定时器
67 $(".slider").mouseover(function(event) {
68 clearInterval(timer);
69
70 }).mouseout(function(event) {
71
72 setTimer();
73 });
74 //移入顶部圆点显示对应图片
75 $(".num li").mouseover(function(event) {
76 clearInterval(timer);
77 index = $(this).index('.num li');
78 $(this).addClass('active').siblings('li').removeClass('active');
79 $(".slider li").eq(index).show().siblings('li').hide();
80 }).mouseout(function(event) {
81 setTimer();
82 });
83
84 //左右按钮进入进出隐藏显示
85 $(".slider").mouseover(function(event) {
86 clearInterval(timer);
87 $(".left").show();
88 $(".right").show();
89 }).mouseout(function(event) {
90 $(".left").hide();
91 $(".right").hide();
92
93 });
94
95
96
97 //左右按钮轮播
98 $(".left").click(function(event) {
99 index--;
100 $(".slider li").eq(index%count).show().siblings('li').hide();
101 $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active');
102 });
103
104 $(".right").click(function(event) {
105 index++;
106 $(".slider li").eq(index%count).show().siblings('li').hide();
107 $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active');
108 });
109 })简易轮播写法
110
111 </script>
112
113
114 </script>
115
116 </body>
117 </html>
