效果图预览.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>使用纯生js实现图片轮换效果</title>> 5 <link href="Styles/style.css" rel="stylesheet" type="text/css" /> 6 </head> 7 <body> 8 <div id="slider"> 9 <div class="slide" style="border-left-style: none; left: 0px;"> 10 <a href="#"> 11 <img class="diapo" src="Images/642120642011110815551808.jpg" alt="" style="opacity: 0.8; 12 visibility: visible;"></a> 13 <div class="backgroundText" style="top: 233px;"> 14 </div> 15 <div class="text" style="top: 233px;"> 16 <span class="stitle">《千本哈》</span>金馆长进军音乐界</div> 17 </div> 18 <div class="slide" style="left: 90px;"> 19 <a href="#"> 20 <img class="diapo" src="Images/6421206420111014165330056.jpg" alt="" style="opacity: 0.8; 21 visibility: visible;"></a> 22 <div class="backgroundText" style="top: 231px;"> 23 </div> 24 <div class="text" style="top: 231px;"> 25 <span class="stitle">震惊</span>关于金馆长那些high爆了的表情</div> 26 </div> 27 <div class="slide" style="left: 190px;"> 28 <a href="#"> 29 <img class="diapo" src="Images/6421206420111009170039010.gif" alt="" style="opacity: 0.8; 30 visibility: visible;"></a> 31 <div class="backgroundText" style="top: 232px;"> 32 </div> 33 <div class="text" style="top: 232px;"> 34 <span class="stitle">逆袭</span>金馆长的卖萌</div> 35 </div> 36 <div class="slide" style="left: 290px;"> 37 <a href="#"> 38 <img class="diapo" src="Images/6421206420111008161252052.gif" alt="" style="opacity: 0.8; 39 visibility: visible;"></a> 40 <div class="backgroundText" style="top: 232px;"> 41 </div> 42 <div class="text" style="top: 232px;"> 43 <span class="stitle">电影</span>《浪漫刺客》一样给力</div> 44 </div> 45 <div class="slide" style="left: 390px;"> 46 <a href="#"> 47 <img class="diapo" src="Images/6421206420111108160036015.jpg" alt="" style="opacity: 0.8; 48 visibility: visible;"></a> 49 <div class="backgroundText" style="top: 231px;"> 50 </div> 51 <div class="text" style="top: 231px;"> 52 <span class="stitle">劲敌</span>金馆长的那些表情界对手们</div> 53 </div> 54 <div class="slide" style="left: 490px;"> 55 <a href="#"> 56 <img class="diapo" src="Images/6421206420111101161354091.jpg" alt="" style="opacity: 0.8; 57 visibility: visible;"></a> 58 <div class="backgroundText" style="top: 230px;"> 59 </div> 60 <div class="text" style="top: 230px;"> 61 <span class="stitle">国产</span>与金馆长喜羊羊say"HI"</div> 62 </div> 63 </div> 64 <script src="Scripts/slider.js" type="text/javascript"></script> 65 <script type="text/javascript"> 66 slider.init(); 67 </script> 68 </body> 69 </html>