jQuery实现无缝图片滚动效果

简介: jQuery实现无缝图片滚动效果
<div class="bd">
   <ul class="picList">
       <li><img src="images/rh_1.jpg"></li>
       <li><img src="images/rh_2.jpg"></li>
       <li><img src="images/rh_3.jpg"></li>
    </ul>
</div>
<style>
.bd {
   
    position: relative;
    overflow: hidden;
    height: 320px;
}

.bd ul {
   
    position: absolute;
    top: 0;
    left: 0;
    zoom: 1;
}

.bd ul li {
   
    display: inline-flex;
}

.bd ul li img {
   
    padding-bottom: 10px;
}
</style>
<script type="text/javascript">
//如果要使一个元素运动起来,一般情况下这个元素需要具
//有position属性值可以是absolute/relative
       $(function() {
   
            let oul = $('.bd ul'),
            oulHtml = oul.html(),
            timeId = null,
            speed = 2;
            oul.html(oulHtml + oulHtml)
            let ali = $('.bd ul li'),
            aliHeight = ali.eq(0).height(),
            aliSize = ali.size(),
            ulHeight = aliHeight * aliSize;
            oul.height(ulHeight); //960px            

            function slider() {
   
                if (speed < 0) {
   
                    if (oul.css('top') == -ulHeight / 2 + 'px') {
   
                        oul.css('top', 0);
                    }
                    oul.css('top', '-=1px');
                }else if (speed > 0) {
   
                    if (oul.css('top') == '0px') {
   
                        oul.css('top', -ulHeight / 2 + 'px');
                    }
                    oul.css('top', '+=' + speed + 'px');
                }
            }

            // setInterval()函数的作用是:每隔一段时间,执行该函数里的代码
            timeId = setInterval(slider, 60);

            $('.bd').mouseover(function() {
   
                // clearInterval()函数的作用是用来清除定时器
                clearInterval(timeId);
            });

            $('.bd').mouseout(function() {
   
                timeId = setInterval(slider, 30);
            });

            $('.goLeft').click(function() {
   
                speed = -2;
            });

            $('.goRight').click(function() {
   
                speed = 2;
            });

        });
    </script>
目录
相关文章
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
59 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
6月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
110 1
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
6月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
6月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
99 0
jQuery点击图片来回切换功能
|
JavaScript 前端开发 数据处理
jQuery数据结构渲染(1):图片数组的渲染
jQuery数据结构渲染(1):图片数组的渲染
66 1
|
JavaScript
jQuery动态拼接多张图片并且获取每张图片名称
jQuery动态拼接多张图片并且获取每张图片名称
56 1
|
JavaScript
jquery鼠标悬停的时候图片改变
jquery鼠标悬停的时候图片改变
39 1