zoukankan      html  css  js  c++  java

  • 图片文字轮播代码

    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.     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.     200px;  
    26. }  
    27. .ulList ul li{text-align:center;}  
    28. .ulList ul li a{text-decoration:none;}  
    29.   
    30. /*图片循环轮播css*/  
    31. .switch{  
    32.     538px;  
    33.     height:198px;  
    34.     overflow:hidden;  
    35.     position:relative;  
    36.     margin:50px auto;  
    37. }  
    38. .switch ul{  
    39.     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.     538px;  
    50. }  
    51. #focusNum{  
    52.     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>  
  • 相关阅读:
    Anoconda管理Python版本 | Python
    VSCode用以Python开发的配置 | VSCode
    不联网的情况下安装python环境 | Python(转)
    批量按要求修改文件名
    [OpenLayers] 控件系列之SelectFeature同时支持hover与click
    python使用suds调用webservice接口
    【转载】eMBMS知识点汇总(概念/应用场景/工作原理/标准进程/发展现状)
    处理器分类
    3GPP Release 4G-5G 演进
    浅谈css中一个元素如何在其父元素居中显示
  • 原文地址：https://www.cnblogs.com/hsp09/p/3612092.html
Copyright © 2011-2022 走看看