• 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>
  • 相关阅读:
    smtplib.py
    淘宝链接中的spm参数
    with 上下文管理
    python RecursionError: maximum recursion depth exceeded while calling
    GraphQL两年实战
    Exception 异常处理
    Simple decorator that intercepts connection errors and ignores these if settings specify this.
    namedtuple
    服务治理在猫眼娱乐的演进之路
    路由、限流、熔断 微服务治理
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2545416.html
Copyright © 2020-2023  润新知