篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery轮播图鼠标移入停止，移出播放，点击小横条切换图片相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>banner</title>
7 </head>
8 <style>
9 .banner {
10 min-width: 1200px;
11 min-height: 350px;
12 position: relative;
13 }
14
15 .banner-img {
16 position: relative;
17 }
18
19 .banner img {
20 width: 100%;
21 height: auto;
22 position: absolute;
23 }
24
25 .banner-ul {
26 list-style: none;
27 display: flex;
28 z-index: 5;
29 position: absolute;
30 bottom: 21px;
31 left: 50%;
32 transform: translateX(-50%);
33 }
34
35 .banner-ul li {
36 width: 80px;
37 height: 11px;
38 background-color: #fff;
39 margin-right: 15px;
40 }
41 .banner .banner-active{
42 background-color: red;
43 }
44
45 .banner1,.banner2{
46 display:none;
47 }
48 </style>
49 <body>
50 <div class="banner">
51 <div class="banner-img">
52 <img src="img/banner0.png" alt="轮播图">
53 <img class="banner1" src="img/banner1.png" alt="轮播图">
54 <img class="banner2" src="img/banner2.png" alt="轮播图">
55 </div>
56 <ul class="banner-ul">
57 <li class="banner-active"></li>
58 <li></li>
59 <li></li>
60 </ul>
61 </div>
62 </body>
63 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
64 <script>
65 $(function(){
66 // 轮播图
67 var i = 0;
68 function autoPlay() { //自动播放暂停
69
70 function play() {//play函数-begin
71 i++;
72 if (i > 2) {
73 i = 0;
74 }
75 $(‘.banner-img img‘).eq(i).fadeIn(1000).siblings().fadeOut(1000);
76 //改变下面三条横杠状态
77 $(".banner-ul li").eq(i).css(
78 "background", "red"
79 ).siblings().css(
80 "background", "#fff"
81 )
82 } //play函数-end
83 setplay = setInterval(play, 3000);
84 }
85 autoPlay();
86
87 //鼠标移进移出轮播暂停和启动
88 $(".banner").hover(function() {
89 clearInterval(setplay);
90 }, autoPlay);
91
92
93 //点击小长条方框 图片切换
94 $(".banner-ul li").click(function() {
95 $(this).css(
96 "background", "red"
97 ).siblings().css(
98 "background", "#fff"
99 )
100 var index = $(this).index();
101 $(".banner-img img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
102 });
103 })
104
105 // 监听浏览器窗口大小发生变化时，改变banner的高度
106 //用来处理banner下的ul定位用
107 window.onresize = function() {
108 var bannerImgHeight = $(‘.banner-img img‘).css(‘height‘);
109 var y = $(‘.banner‘).css("height", bannerImgHeight);
110 }
111 //f5刷新页面后定位
112 var bannerImgHeight = $(‘.banner-img img‘).css(‘height‘);
113 var y = $(‘.banner‘).css("height", bannerImgHeight);
114 </script>
115 </html>