zoukankan      html  css  js  c++  java
  • jQuery图片切换

    效果如http://河池手机网.com 的banner的效果。

    jQuery代码如下:

    View Code
    <script type="text/javascript">
        $(function(){
             $("#bannerwenzi").each(function(){
                          $("#bannerdv a:eq(0)").show();
                                $("#bannerwenzi div").click(function(){
                                      $(this).addClass("bwenzishow").siblings("div").removeClass("bwenzishow");
                                       $("#bannerpic a:eq("+$(this).index()+")").show().siblings("a").hide();
                                });
                                
                            });
             xx=0;    
             function setTab() {
                $("#bannerwenzi div:eq("+xx+")").addClass("bwenzishow").siblings("div").removeClass("bwenzishow");
                  $("#bannerpic a:eq("+xx+")").show().siblings("a").hide();
                        xx+=1;
                       if(xx>3) xx=0;
                    
              }
            var  jiange=6000;
               timerID=setInterval(setTab,jiange);
             $("#bannerpic").mousemove(function(){
                 clearInterval(timerID);
               
             }).mouseout(function(){
                 timerID=setInterval(setTab,jiange);
             });    
             
              $("#bannerwenzi").mousemove(function(){
                 clearInterval(timerID);
               
             }).mouseout(function(){
                 timerID=setInterval(setTab,jiange);
             });    
                 
        });
        </script>

    html的部分代码:

    View Code
    <div id="bannerdv">
         <div id="bannerpic">
         
     <a href='affiche.php?ad_id=10&amp;uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D866'
    
                    target='_blank'><img src='data/afficheimg/1338458404799049505.jpg' width='990' height='288'
    
                    border='0' /></a> 
    
    
              
     <a href='affiche.php?ad_id=11&amp;uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D878'
    
                    target='_blank'><img src='data/afficheimg/1338694945885976412.jpg' width='990' height='288'
    
                    border='0' /></a> 
    
    
              
     <a href='affiche.php?ad_id=12&amp;uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D880'
    
                    target='_blank'><img src='data/afficheimg/1338694745278666369.jpg' width='990' height='288'
    
                    border='0' /></a> 
    
    
              
     <a href='affiche.php?ad_id=13&amp;uri=http%3A%2F%2F2119889.user.d-jet.com%2Fgoods.php%3Fid%3D867'
    
                    target='_blank'><img src='data/afficheimg/1338283442660191408.jpg' width='990' height='288'
    
                    border='0' /></a> 
    
    
     
        </div>
            <div id="bannerwenzi">
                       <div class="bwenzishow">三星“Galaxy SIII”盖世出击</div>
     <div>诺基亚808 4100万像素</div>  
     <div>TCL 臻智S900 将世界藏至我心</div>
     <div style="248px;">诺基亚610“不炫耀,只炫彩”</div>          </div>
        </div>
  • 相关阅读:
    css优先级及匹配原理
    [BZOJ1208]宠物收养所
    [BZOJ1588]营业额统计
    [AtCoder2558]Many Moves
    [POJ3416]Crossing
    [POJ3378]Crazy Thairs
    高精度大整数模板
    py3实现维吉尼亚加解密
    Codeforces 617E: XOR and Favorite Number(莫队算法)
    hdu 1695: GCD 【莫比乌斯反演】
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2545416.html
Copyright © 2011-2022 走看看