JQuery轮播图

代码:

  1 DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8" />
  6     <title>title>
  7 
  8     <style type="text/css">
  9         * {
 10             margin: 0;
 11             padding: 0;
 12         }
 13         
 14         ul li {
 15             list-style: none;
 16         }
 17         
 18         #main {
 19             width: 760px;
 20             height: 300px;
 21             position: relative;
 22             margin: 50px auto;
 23         }
 24         
 25         #main .pic {
 26             width: 760px;
 27             height: 300px;
 28             overflow: hidden;
 29         }
 30         
 31         #main .pic ul li {
 32             width: 760px;
 33             height: 300px;
 34             position: relative;
 35         }
 36         
 37         #main .pic ul li .img1 {
 38             position: absolute;
 39             top: 0;
 40             left: -760px;
 41         }
 42         
 43         #main .pic ul li .img2 {
 44             position: absolute;
 45             top: 0;
 46             left: -20px;
 47             display: none;
 48         }
 49         
 50         #main .nav {
 51             position: absolute;
 52             right: 20px;
 53             bottom: 20px;
 54         }
 55         
 56         #main .nav ul li {
 57             width: 10px;
 58             height: 10px;
 59             border: 1px solid #fff;
 60             float: left;
 61             margin-left: 5px;
 62         }
 63         
 64         #main .nav ul li.select {
 65             background: #fff;
 66         }
 67     style>
 68 head>
 69 
 70 <body>
 71     <div id="main">
 72         <div class="pic">
 73             <ul>
 74                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160050282-869469669.jpg);">
 75                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160350568-207116465.png" />
 76                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160511378-435102902.png" />
 77                 li>
 78                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160101771-90113100.jpg);">
 79                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160418898-1260530940.png" />
 80                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160526616-615957204.png" />
 81                 li>
 82                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160113610-141132604.jpg);">
 83                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160428651-975833118.png" />
 84                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160537171-1201294812.png" />
 85                 li>
 86                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160123518-906000678.jpg);">
 87                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160441432-1967832324.png" />
 88                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160547981-2056537771.png" />
 89                 li>
 90                 <li style="background: url(https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160222918-1630561788.jpg);">
 91                     <img class="img1" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160449193-173313957.png" />
 92                     <img class="img2" src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200613160558063-388291405.png" />
 93                 li>
 94             ul>
 95         div>
 96         <div class="nav">
 97             <ul>
 98                 <li class="select">li>
 99                 <li>li>
100                 <li>li>
101                 <li>li>
102                 <li>li>
103             ul>
104         div>
105     div>
106     <div style="width: 100px; height: 100px; background: red; display: none;">div>
107     <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8">script>
108 
109     <script type="text/javascript">
110         $(function() {
111             $(".pic li")
112                 .eq(0)
113                 .find(".img1")
114                 .stop()
115                 .animate({
116                     left: 0
117                 }, 800)
118                 .next()
119                 .stop()
120                 .show()
121                 .animate({
122                     left: 0
123                 }, 800);
124             var i = 0;  //先执行第一个li
125             setInterval(function() {    //从第二个li开始循环
126                 i++;
127                 if (i == $(".pic li").length) {
128                     i = 0;
129                 }
130                 $(".pic li")
131                     .eq(i)
132                     .fadeIn()
133                     .find(".img1")
134                     .stop()
135                     .animate({
136                         left: 0
137                     }, 800)
138                     .next()
139                     .stop()
140                     .show()
141                     .animate({
142                         left: 0
143                     }, 800)
144                     .end()
145                     .end()  //回到li
146                     .siblings()
147                     .fadeOut()
148                     .find(".img1")
149                     .css({
150                         left: "-760px"
151                     })
152                     .next()
153                     .hide()
154                     .css({
155                         left: "-20px"
156                     });
157                 $(".nav li")
158                     .eq(i)
159                     .addClass("select")
160                     .siblings()
161                     .removeClass("select");
162             }, 2000);
163         });
164     script>
165 body>
166 
167 html>

 

你可能感兴趣的:(JQuery轮播图)