js实现文字无限滚动轮播

html代码

<div><ul id="ul1"><li>1111111111</li><li>2222222222</li><li>3333333333</li><li>4444444444</li><li>5555555555</li><li>6666666666</li><li>7777777777</li><li>8888888888</li><li>9999999999</li></ul><ul id="ul2"></ul>
</div>

css代码

*{padding:0;margin:0
}
div{height: 100px;width: 200px;border: 1px solid greenyellow;overflow: hidden;
}

js代码

var bigBox = document.querySelector('div')
var primary = document.querySelector('#ul1')
var copy = document.querySelector('#ul2')
var num = 0
copy.innerHTML = primary.innerHTML;
bigBox.scrollTop = 0;
var timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}
},30);

添加鼠标移入移出事件

 bigBox.onmouseover = function(){clearInterval(timer);}bigBox.onmouseout = function(){timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}},30);}

封装

// bigBox:外层的父级 primary:需要滚动的文字 copy:复制的容器 time:滚动速度
function scroll(bigBox,primary,copy,time) {var num = 0copy.innerHTML = primary.innerHTML;bigBox.scrollTop = 0;var timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}},time);bigBox.onmouseover = function(){clearInterval(timer);}bigBox.onmouseout = function(){timer = setInterval(function () {if(bigBox.scrollTop >= primary.scrollHeight){bigBox.scrollTop = 0;num = 0}else{num++bigBox.scrollTop = num;}},time);}
}

调用

scroll(bigBox ,primary ,copy ,30)

js实现文字无限滚动轮播相关推荐

java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
画廊效果的ViewPager实现（附带无限自动轮播）
废话不多说,先上效果图根据效果所示,第一步实现适配器,完成无限循环首先做数据上的处理 public static class LoopViewPagerAdapter extends PagerA ...
文字从上到下无缝轮播，一直循环滚动轮播
思路:无缝循环轮播,是一个轮播框(父节点)包含两个子节点,其中一个子节点是文字主体,另一个是这个子节点的复制品,即:在父类节点一定的高度下,这两个子节点实现由下而上的滚动. 贴代码前说下大家一般遇到的 ...
原生 js 实现无缝滚动轮播
上一次我们看了如何实现简单的轮播图,以及各种常用的效果实现: 这一次,我们看看无缝滚动轮播图的实现(利用左边的margin 来实现): 原理: 我们创建一个div,下图共红色部分:然后再div中创建 ...
html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】
本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好 ...
swiper横向轮播——阶梯式滚动轮播
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏 ...
原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
html异形轮播,javascript实现异形滚动轮播
本文实例为大家分享了js异形滚动轮播的具体代码,供大家参考,具体内容如下运动过程研究让每个元素走到前一个标签的位置. 3走到2 2走到1 1走到0 0走到6 利用js动态获取每个类名对应的css样 ...
JavaScript异形滚动轮播
运动过程研究让每个元素走到前一个标签的位置. 3走到2 2走到1 1走到0 0走到6 利用js动态获取每个类名对应的css样式对象,组成一个新数组. // 定义一个新数组,接收每个位置的css样式对 ...

js实现文字无限滚动轮播

js实现文字无限滚动轮播相关推荐

最新文章

热门文章