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>
