zoukankan      html  css  js  c++  java
  • 淡入淡出轮播图效果

    第一版本有很多限制,特以此做记录以待日后优化。模仿支付宝首页轮播图https://www.alipay.com/

    <script>
    $(function(){
        var i=1;
        var time;
         $("#J-slide").hover(function(){
            time=window.clearInterval(time);//清除自动播放
        },function(){
            time=setInterval(function (){    
                $("#J-slide li").fadeOut(500);
                $("#J-slide li[name='"+i+"']").fadeIn(500);    
                $("#J-slide-number a").removeClass("slide_number_active");
                $("#J-slide-number a[name='a_"+i+"']").addClass("slide_number_active");
                i++;
                if(i==4)i=1;
                
            },5000);
        }).trigger("mouseleave"); 
        
         $("#J-slide-number a").click(function(){
             $("#J-slide-number a").removeClass("slide_number_active");
             $(this).addClass("slide_number_active");
             
             var n=$(this).attr("name");
             n=n.substr(2,1);
             $("#J-slide li").fadeOut(500);
             $("#J-slide li[name='"+n+"']").fadeIn(500);    
         })
    
    })
    </script>
    <!--切换图片-->
        <ul class="J_slide" id="J-slide">
               
            <li style="z-index:100" name="1">
                <div class="bg bg1">123123</div>
            </li>
            <li name="2">
                <div class="bg bg1">34534534</div>
            </li>
            <li name="3">
                <div class="bg bg1">56786</div>
            </li>
            
            
        </ul><!--J_slide-->
        <!--切换图片-->
        
        <!--焦点按钮-->
        <div class="slide_number_box">
            <div class="slide_number" id="J-slide-number">
                 <a class="slide_number_active" name="a_1" href="javascript:void(0)" >1</a>
                <a name="a_2" href="javascript:void(0)" >2</a>
                <a name="a_3" href="javascript:void(0)" >3</a>             
            </div><!--slide_number-->
        </div><!--slide_number_box-->
        <!--焦点按钮-->
  • 相关阅读:
    阿里云服务器常见问题记录
    npm 常见错误记录
    C程序设计(第四版)课后习题完整版 谭浩强编著
    博客如何快速让百度谷歌等各大引擎收录
    python itertools 用法
    python中dict的fromkeys用法
    python解析XML
    flask+uwsgi+nginx+docker-compose部署
    python的构建工具setup.py
    python判断字符串类型
  • 原文地址:https://www.cnblogs.com/nidakun/p/2883418.html
Copyright © 2011-2022 走看看