嵊泗花鸟岛图片切换【走光效果】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片渐渐切换</title>
    <style>
    #left_screen{
        width:189px;
        height: 329px;
        overflow: hidden;
        top:86px;
        left:47px;
        z-index: 1;
        position: absolute;
    }
    #left_screen img{
        width:189px;
        height: 329px;
        top:0;
        left:0;
        z-index: 2;
        position: absolute;
        display:none;
    }
    </style>
</head>
<body>
    <div id="left_screen">
        <img src="images/slider1.png" />
        <img src="images/slider2.png" />
        <img src="images/slider3.png" />
        <img src="images/slider1.png" />
        <img src="images/slider1.png" />
        <img src="images/slider2.png" />
        <img src="images/slider3.png" />
        <img src="images/slider1.png" />
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        function wordsShow(ele){
            var i=-1;
            var len=ele.children("img").length;
                function wordsAnimate(){   //设置走光动画
                    i++;
                    if(i<len){    
                        setTimeout(function(){
                            ele.children("img").eq(i).show().siblings().hide();
                            wordsAnimate(); //内部回调
                        },200);
                    }
                
                }
                wordsAnimate();  //执行一次动画,否则其他动画不隐藏
        }
        wordsShow($("#left_screen"));//立刻执行一次
        setInterval(function(){wordsShow($("#left_screen"))},2000);/*循环执行*/
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片渐渐切换</title>
    <style>
    #left_screen{
        width:189px;
        height: 329px;
        overflow: hidden;
        top:86px;
        left:47px;
        z-index: 1;
        position: absolute;
    }
    #left_screen img{
        width:189px;
        height: 329px;
        top:0;
        left:0;
        z-index: 2;
        position: absolute;
        display:none;
    }
    </style>
</head>
<body>
    <div id="left_screen">
        <img src="images/slider1.png" />
        <img src="images/slider2.png" />
        <img src="images/slider3.png" />
        <img src="images/slider1.png" />
        <img src="images/slider1.png" />
        <img src="images/slider2.png" />
        <img src="images/slider3.png" />
        <img src="images/slider1.png" />
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        function imgShow(ele){
            var i=-1;
            var len=ele.children("img").length;
                function imgAnimate(){   //设置走光动画
                    i++;
                    if(i<len){    
                        setTimeout(function(){
                            ele.children("img").eq(i).show().siblings().hide();
                            imgAnimate(); //内部回调
                        },200);
                    }
                
                }
                imgAnimate();  //执行一次动画,否则其他动画不隐藏
        }
        imgShow($("#left_screen"));//立刻执行一次
        setInterval(function(){imgShow($("#left_screen"))},2000);/*循环执行*/
    </script>
</body>
</html>

 

posted @ 2015-07-01 09:46  Shimily  阅读(136)  评论(0)    收藏  举报