1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ._div 8 { 9 width: 730px; 10 height: 454px; 11 position: relative; 12 } 13 ._div_ul 14 { 15 width: 730px; 16 height: 454px; 17 list-style: none; 18 } 19 ._div_ul li 20 { 21 position: absolute; 22 left: 0px; 23 top: 0px; 24 width: 730px; 25 height: 454px; 26 position: absolute; 27 display: none; 28 29 } 30 ._div_ul li img 31 { 32 width: 730px; 33 height: 454px; 34 float: left; 35 opacity: 1; 36 filter: alpha(opacity=100); 37 38 } 39 ._div_ol 40 { 41 position: absolute; 42 bottom: 5px; 43 left: 280px; 44 list-style: none; 45 z-index: 5; 46 } 47 ._div_ol:after 48 { 49 content: ""; 50 clear: both; 51 display: block; 52 } 53 ._div_ol li 54 { 55 width: 18px; 56 height: 18px; 57 border-radius: 50%; 58 float: left; 59 background: #3e3e3e; 60 text-align: center; 61 line-height: 18px; 62 color: #fff; 63 margin-left: 2px; 64 margin-right: 2px; 65 cursor: pointer; 66 } 67 ._div_ol ._div_ol_l1 68 { 69 background: #b61b1f; 70 } 71 ._div_p1 72 { 73 left: 0px; 74 } 75 ._div p 76 { 77 width: 28px; 78 height: 62px; 79 position: absolute; 80 top: 196px; 81 line-height: 62px; 82 text-align: center; 83 background: rgba(0,0,0,.2); 84 color: #fff; 85 cursor: pointer; 86 font-size: 25px; 87 z-index: 12; 88 } 89 ._div_p2 90 { 91 right: 0px; 92 } 93 ._div_ul .aa 94 { 95 display: block; 96 } 97 </style> 98 </head> 99 <body> 100 <div class="_div"> 101 <ul class="_div_ul"> 102 <li class="aa"><img src="images/da1.jpg" alt=""></li> 103 <li><img src="images/da2.jpg" alt=""></li> 104 <li><img src="images/da3.jpg" alt=""></li> 105 <li><img src="images/da4.jpg" alt=""></li> 106 <li><img src="images/da5.jpg" alt=""></li> 107 <li><img src="images/da6.jpg" alt=""></li> 108 </ul> 109 <ol class="_div_ol"> 110 <li class="_div_ol_l1">1</li> 111 <li>2</li> 112 <li>3</li> 113 <li>4</li> 114 <li>5</li> 115 <li>6</li> 116 </ol> 117 <p class="_div_p1"><</p> 118 <p class="_div_p2">></p> 119 </div> 120 121 <script src="jquery-1.8.3.min.js"></script> 122 <script src="jquery.easing.min.js"></script> 123 <script> 124 $(function() { 125 var x=0; 126 var time1=null,time2=null; 127 function move() {//淡入淡出函数 128 $('._div_ul li').eq(x).css('zIndex','1').fadeIn(500,'swing',function() { 129 $('._div_ul li').eq(x).siblings().fadeOut(500,'swing'); 130 }).siblings().css('zIndex','0'); 131 $('._div_ol li').eq(x).addClass('_div_ol_l1').siblings().removeClass('_div_ol_l1'); 132 }; 133 function autogo() {//自动走函数 134 clearInterval(time1); 135 time1=setInterval(function(){ 136 x++; 137 if (x>=$('._div_ul img').length) { 138 x=0; 139 }; 140 move(); 141 },1000) 142 }; 143 //进入页面自动走 144 autogo(); 145 //点击右键 146 $('._div_p2').click(function() { 147 clearInterval(time1); 148 x++; 149 if (x>=$('._div_ul li').length) { 150 x=0; 151 }; 152 move(); 153 autogo(); 154 }) 155 //点击左键 156 $('._div_p1').click(function() { 157 clearInterval(time1); 158 x--; 159 if (x<0) { 160 x=$('._div_ul li').length-1; 161 }; 162 move(); 163 autogo(); 164 }) 165 //点击下标 166 $('._div_ol li').click(function() { 167 clearInterval(time1); 168 x=$(this).index('._div_ol li'); 169 move(); 170 autogo(); 171 }) 172 }) 173 </script> 174 </body> 175 </html>
