头像

图片自动切换效果精简版

2019-12-30 15:18:53 收藏 来源:it素材网   浏览(255)   评论 ( 0 )   

图片自动切换效果精简版
图片自动切换效果精简版该图片切换效果js部分非常简洁,用户甚至可以根据自己需求做简单的修改就能用在手机端,在手机端只要把ul li的高度通过js来设置就行;<script type="text/javascript
查看演示 下载资源:5 下载资源 下载积分:0

图片自动切换效果精简版

该图片切换效果js部分非常简洁,用户甚至可以根据自己需求做简单的修改就能用在手机端,在手机端只要把ul li的高度通过js来设置就行;

<script type="text/javascript">
    var $bannerUl=$('#banner ul'),$bannerLi=$('#banner ul li');
    //动态获取ul的宽度
    $bannerUl.css('width',$bannerLi.width()*$bannerLi.length);
    setInterval(function(){
        $bannerUl.animate({
            'marginLeft':-$bannerLi.width()
        },500,function(){
            $(this).animate({'marginLeft':0},0)
                    .find('li').eq(0).appendTo($(this));
            //把每次移动后的第一个li放到ul的最后面
            /*
             * 由于把第一个li放到ul的最后面,就会把第二个li挤到第一个li的位置,但是我们又需要显示第二个li,
             * 所以需要移动回原点,但是这个移动过程不能被看到,所以执行时间是0
             */
        });
    },3000);
</script>


标签: 图片自动切换
声明:转载请注明来源(it素材网)并保留原文链接:https://www.itsucai.com/js/243.html
评论0

后面还有条评论,点击查看>>

系统已开启自动识别垃圾评论机制,识别到的自动封号!!!