图片文字轮播代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <title></title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   
  7. <style type="text/css">  
  8. /*文字循环轮播测css*/  
  9. .ulList{  
  10.     position:relative;  
  11.     height:145px;  
  12.     width:200px;  
  13.     overflow:hidden;  
  14.     margin:10px auto;  
  15.     border:1px #ccc solid;  
  16. }  
  17. .ulList ul{  
  18.     position:absolute;  
  19.     top:0;  
  20.     left:0;  
  21.     height:auto;  
  22.     margin:0;  
  23.     padding:0;  
  24.     list-style:none;  
  25.     width:200px;  
  26. }  
  27. .ulList ul li{text-align:center;}  
  28. .ulList ul li a{text-decoration:none;}  
  29.   
  30. /*图片循环轮播css*/  
  31. .switch{  
  32.     width:538px;  
  33.     height:198px;  
  34.     overflow:hidden;  
  35.     position:relative;  
  36.     margin:50px auto;  
  37. }  
  38. .switch ul{  
  39.     width:2152px;  
  40.     height:198px;  
  41.     position:absolute;  
  42.     top:0;  
  43.     left:0;  
  44.     margin:0;  
  45.     padding:0;  
  46. }  
  47. .switch ul li{  
  48.     float:left;  
  49.     width:538px;  
  50. }  
  51. #focusNum{  
  52.     width:160px;  
  53.     height:30px;  
  54.     overflow:hidden;  
  55.     position:absolute;  
  56.     bottom:0;  
  57.     right:0;  
  58. }  
  59. #focusNum a{  
  60.     display:inline-block;  
  61.     padding:5px 10px;  
  62.     float:left;  
  63.     border:1px solid #ccc;  
  64.     background-color:#fff;  
  65.     color:#000;  
  66.     text-align:center;  
  67.     font-size:12px;  
  68.     line-height:16px;  
  69.     margin-right:5px;  
  70. }  
  71. #focusNum a:hover{  
  72.     text-decoration:none;  
  73.     background-color:red;  
  74.     border:1px solid #000;  
  75. }  
  76. #focusNum a.hoverCl{  
  77.     text-decoration:none;  
  78.     background-color:red;  
  79.     border:1px solid #000;  
  80. }  
  81. </style>  
  82. </head>  
  83. <body>  
  84.     <div class="ulList">  
  85.         <ul>  
  86.             <li><a href="#">11111111111</a></li>  
  87.             <li><a href="#">22222222222</a></li>  
  88.             <li><a href="#">33333333333</a></li>  
  89.             <li><a href="#">44444444444</a></li>  
  90.             <li><a href="#">55555555555</a></li>  
  91.             <li><a href="#">66666666666</a></li>  
  92.             <li><a href="#">77777777777</a></li>  
  93.             <li><a href="#">88888888888</a></li>  
  94.             <li><a href="#">99999999999</a></li>  
  95.         </ul>  
  96.     </div>  
  97.   
  98.     <div class="switch">  
  99.         <ul class="clearfix">  
  100.             <li><img src="banner1.jpg" width="538" height="198" /></li>  
  101.             <li><img src="banner2.jpg" width="538" height="198" /></li>  
  102.             <li><img src="banner1.jpg" width="538" height="198" /></li>  
  103.             <li><img src="banner2.jpg" width="538" height="198" /></li>     
  104.         </ul>  
  105.         <div id="focusNum">  
  106.             <a href="javascript:;" class="hoverCl">1</a>  
  107.             <a href="javascript:;">2</a>  
  108.             <a href="javascript:;">3</a>  
  109.             <a href="javascript:;">4</a>  
  110.         </div>  
  111.     </div>  
  112.   
  113. <script src="jquery.js" type="text/javascript"></script>  
  114. <script type="text/javascript">  
  115.   
  116. //文字循环轮播js  
  117. var divObj = $('.ulList');  
  118. var ulObj = $('.ulList').children('ul');  
  119. var ulObjH = ulObj.outerHeight(true);  
  120. var liObjH = ulObj.children('li').outerHeight(true);  
  121.   
  122. setInterval(function(){  
  123.     ulObj.animate({top:'-'+liObjH+'px'},1000,function(){  
  124.         ulObj.css({top:0}).children('li').last().after(ulObj.children('li').first());  
  125.     });  
  126. },2000);  
  127.   
  128. //图片循环轮播js  
  129. var sUlObj = $('.switch').children('ul');  
  130. var sUlLiObj = sUlObj.children('li');  
  131. var imgObjW = sUlLiObj.children('img').width();  
  132. var index =1;  
  133.   
  134. setInterval(function(){  
  135.     sUlObj.animate({left:'-'+imgObjW+'px'},'slow',function(){  
  136.         sUlObj.css({left:0}).children('li').last().after(sUlObj.children('li').first());  
  137.         $('#focusNum a').eq(index).addClass('hoverCl').siblings().removeClass('hoverCl');  
  138.         index++;  
  139.         if(index === 4) index = 0;  
  140.     });  
  141. },2000);  
  142.   
  143. </script>  
  144. </body>  
  145. </html>  
posted @ 2014-03-19 18:29  photoshop爱好者  阅读(681)  评论(1)  编辑  收藏  举报