淡入淡出轮播效果 

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="UTF-8">
        <meta name="author" content="Sup_"/>
        <meta name="Generator" content="Sublime Text">    
        <title>淡入淡出动画</title>
        <style>
            ul,li{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .pic{
                position: relative;
                width: 419px;
                height: 419px;
                margin: auto;
            }
            .pic li{
                position: absolute;
                z-index: -1;
            }
            .pic li:first-child{
                z-index: 1;
            }
            .pic .spot{
                position: absolute;
                z-index: 2;
                width: 100%;
                bottom: 20px;
                text-align: center;
            }
            .pic .spot span{
                display: inline-block;
                width: 20px;
                height: 20px;
                margin: 10px;
                border-radius: 50%;
                background-color: #ccc;
            }
            .pic .spot .active{
                background-color: #ea4c29;
            }
        </style>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                (function(){

                    focusFade(pic,3000);

                    //淡入淡出焦点图函数
                    function focusFade(id,time){
                        var oPic = $(id).find('li');
                        var oSpot = $(id).find('div').find('span');
                        var iNow = 0;
                        var timer=null;

                        //clearInterval(timer);
                        
                        autoPlay();

                        oSpot.hover(function() {
                            clearInterval(timer);
                            iNow=$(this).index();
                            fnFade();
                        }, function() {
                            autoPlay();
                        });

                        function autoPlay() {
                            timer = setInterval(function(){
                            fnFade();
                            },time) 
                        }

                        function fnFade(){
                            oPic.stop().fadeOut(1000).css('z-index', '1');
                            oPic.eq(iNow).stop().fadeIn(1000).css('z-index', '2');
                            oSpot.removeClass('active');
                            oSpot.eq(iNow).addClass('active');
                            (iNow == oPic.length-1)? iNow=0 : iNow++;
                        }
                    }
                        
                })();
            });
            
        </script> 
    </head>
    <body>
        <div class="content">
            <ul id="pic" class="pic">
                <li><img src="img/kt1_85.jpg"></li>
                <li><img src="img/kt3_85.jpg"></li>
                <li><img src="img/kt4_85.jpg"></li>
                <li><img src="img/kt5_85.jpg"></li>
                <li><img src="img/kt6_85.jpg"></li>
                <div class="spot"><span class="active"></span><span></span><span></span><span></span><span></span></div>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2017-04-09 12:48  似  阅读(177)  评论(0)    收藏  举报