1、1.5s自動切換版面

2、數字標簽的點擊切換

3、上一頁、下一頁的點擊切換

全部源碼奉上

  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 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>imganimate
  6 </title>
  7 <style type="text/css">
  8 *{ margin:0; padding:0;}
  9 a{ text-decoration:none; cursor:pointer;}
 10 ul,li{ list-style:none;}
 11 .imgwrapper{ width:728px; height:240px;border: 1px solid #E0E0E0; position:relative;}
 12 .imgtitle{ background: #EEEEEE;
 13      height:30px; line-height:35px; border-bottom:1px solid #E0E0E0;}
 14      .btnarea span img{ border:none; height:35px; width:35px;}
 15      .titlearea{ float:left; margin-right:25px;}
 16 .digitallabel{ float:left; margin-right:25px;}
 17 .digitallabel span{ border:solid 1px #CB8144;  margin-right:4px; height:14px; width:14px;  cursor:pointer; display:block; float:left; line-height:14px; margin-top:8px; text-align:center;}
 18 .dlselected{ background-color:#FF6F05;} 
 19 .btnarea{ float:left; margin-right:25px;}
 20 .more{ float:right;}
 21 .imgcontent{  position:absolute;overflow:hidden; height:190px; width:}
 22 .imgcontent ul{ float:left; padding:14px; padding-top:0px; }
 23 .imgcontent ul li{ display:inline; float:left;}
 24 .imgcontent ul li a{ display:block; width:120px; height:160px; overflow:hidden; margin-right:20px; }
 25 .imgcontent ul li a img{ border:none;}
 26 .imgcontent ul li a p{ line-height:20px;}
 27 
 28 </style>
 29 <script type="text/javascript" src="js/jquery-1.8.1.js"></script>
 30 <script type="text/javascript">
 31 
 32  $(function(){
 33  
 34      var pageindex=1;//頁碼
 35      var i=5;//版面圖片數量
 36      var imgwrapper=$(".imgwrapper");
 37      var imgcontent=$(".imgcontent");//顯示圖片$對象
 38      var contentwidth=imgcontent.width();
 39      var pagecount = Math.ceil(imgcontent.find("li").length / i) ;//天花板算法得到版面數
 40      var st=    setInterval(function abc()
 41     {$(".btnnext").click();
 42         
 43     },2000);
 44      
 45     $(".btnnext").click(function(){//下一頁按鈕
 46     
 47         if( !imgcontent.is(":animated") ){//判斷是否處於動畫隊列中
 48            if(pageindex>pagecount){//到最後一個版面繼續點擊的話跳轉到第一版面
 49              showimg(1);
 50              pageindex=1;
 51            }else
 52            {
 53             showimg(pageindex);
 54             pageindex++;
 55            }
 56         };
 57     
 58     });
 59     
 60     $(".btnprev").click(function(){
 61     clearInterval(st);
 62          if( !imgcontent.is(":animated") ){//判斷是否處於動畫隊列中
 63         
 64          if(pageindex==1)
 65          {
 66            showimg(pagecount);
 67            pageindex--
 68          }else
 69          {
 70            showimg(pageindex-1);
 71            pageindex--;
 72          }
 73          
 74         };
 75     });
 76     $(".digitallabel span").click(function(){
 77     clearInterval(st);
 78       
 79          pageindex=$(this).text();
 80         
 81         showimg(pageindex);
 82     });
 83     //根據版面的頁數顯示
 84     var showimg=function(pageindex)
 85     {
 86         $(".digitallabel").find("span").eq(pageindex-1).addClass("dlselected").siblings().removeClass("dlselected");//數字標簽的高亮顯示
 87        var left=(pageindex-1)*(contentwidth-25);
 88        imgcontent.animate({ left :"-"+left}, "slow");
 89      
 90     };
 91     
 92     
 93  });
 94 </script>
 95 </head>
 96 
 97 <body>
 98 <div class="imgwrapper">
 99 
100 <div class="imgtitle">
101 <div class="titlearea">經典推薦</div>
102 <div class="digitallabel"><span class="dlselected">1</span><span >2</span><span >3</span><span >4</span></div>
103 <div class="btnarea">
104 <span><img src="images/prev.png" alt="上一頁" class="btnprev" /></span>
105 <span><img src="images/next.png" alt="下一頁"  class="btnnext"/></span>
106 </div>
107 <span class="more">更多</span>
108 </div>
109 <div style="clear:both"></div>
110 <div class="imgcontent">
111 <ul>
112 <li><a href="#"><img src="images/8996733.jpg"  style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
113 <li><a href="#"><img src="images/8996733.jpg"  style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
114 <li><a href="#"><img src="images/8996733.jpg"  style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
115 <li><a href="#"><img src="images/8996733.jpg"  style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
116 <li><a href="#"><img src="images/8996733.jpg"  style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
117 
118 <li><a href="#"><img src="images/9011122.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
119 <li><a href="#"><img src="images/9011122.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
120 <li><a href="#"><img src="images/9011122.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
121 <li><a href="#"><img src="images/9011122.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
122 <li><a href="#"><img src="images/9011122.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
123 
124 <li><a href="#"><img src="images/9157098.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
125 <li><a href="#"><img src="images/9157098.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
126 <li><a href="#"><img src="images/9157098.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
127 <li><a href="#"><img src="images/9157098.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
128 <li><a href="#"><img src="images/9157098.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
129 
130 
131 <li><a href="#"><img src="images/9171366.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
132 <li><a href="#"><img src="images/9171366.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
133 <li><a href="#"><img src="images/9171366.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
134 <li><a href="#"><img src="images/9171366.jpg"   style="width:120px; height:160px;"/></a><p><a href="#">2012-333</a></p></li>
135 
136 
137 </ul>
138 </div>
139 </div>
140 </body>
141 </html>

 

 

 

 


From:CNBLOGS        
 




創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()