javascript单张多张图无缝滚动实例代码

我们会看到很多的网站上会使用多张图片无缝滚动的效果。下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动

我们会看到很多的网站上会使用多张图片无缝滚动的效果。

下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。

1.效果展示:

12

<!DOCTYPE html>

<html>

<head>

<title>无缝滚动</title>

</head>

<style type=”text/css”>

*{margin: 0;padding: 0;}

#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}

#div1 ul{position: absolute;left: 0;}

#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}

#div1 ul li img{width:100%;}

</style>

<script type=”text/javascript”>

window.onload=function(){

var oDiv=document.getElementById(‘div1’);

var oUl=oDiv.getElementsByTagName(‘ul’)[0];

var aLi=oUl.getElementsByTagName(‘li’);

var aA=document.getElementsByTagName(‘a’);//获取向右向左的箭头

var timer=null;

var iSpeed=10;

oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放

oUl.style.width=aLi.length*aLi[0].offsetWidth+’px’;//定义外层ul的宽度,根据图片的个数和每个图片的宽度计算,保证总宽度是可调整的

function fnMove(){

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left=0;

}else if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+’px’;

}//定义到边界的时候,实现无缝衔接

oUl.style.left=oUl.offsetLeft+iSpeed+’px’;

//定义图片的右边距随着速度不断不断增加,或减小,实现运动的效果

}

timer=setInterval(fnMove,30);

aA[0].onclick=function(){

iSpeed=-10;

//按下左箭头,定义向左运动

}

aA[1].onclick=function(){

iSpeed=10;

//按下右箭头,定义向右运动

}

oDiv.onmouseover=function(){

clearInterval(timer);

//鼠标移动到图片上,清除定时器,停止运动

}

oDiv.onmouseout=function(){

timer=setInterval(fnMove,30);

//鼠标移出,重新开启定时器,重新运动

}

};

</script>

<body>

<a href=”” rel=”external nofollow” rel=”external nofollow” >←</a>

<a href=”” rel=”external nofollow” rel=”external nofollow” >→</a>

<div id=”div1″>

<ul>

<li><img src=”https://www.wpmee.com/miaoflash/images/1.jpg”></li>

<li><img src=”https://www.wpmee.com/miaoflash/images/2.jpg”></li>

<li><img src=”https://www.wpmee.com/miaoflash/images/3.jpg”></li>

<li><img src=”https://www.wpmee.com/miaoflash/images/4.jpg”></li>

<li><img src=”https://www.wpmee.com/miaoflash/images/5.jpg”></li>

<div style=”clear: none;”></div>

</ul>

</div>

</body>

</html>

内容补充:

背景:

想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。

原理:

图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1、必须是没有设置过渡动画的,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。

实现:

html主要包含三块:

1、最外层盒子,用来展示滚动图的区域,overflow:hidden;

2、滚动的盒子,主要改变该盒子的定位值,来实现滚动,里面包含所有要滚动的图片或文字

3、包含图片或文字的盒子。

代码:

class Roll {
constructor(opts) {
this.elem = opts.elem; // 图片包含滚动长度的元素的
this.elemBox = opts.elemBox; //图片展示区域元素,为了获取展示区域的高度
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滚或者向左滚动每次减1,向下滚或者向右滚动每次加1
if(this.direction === ‘top’ || this.direction === ‘left’){
this.speed = -1;
}else{
this.speed = 1;
}
}
roll(){
switch (this.direction) {
case “top”:
// 如果滚动的盒子的top值超出元素的高度,则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + this.speed + ‘px’;
}
break;
case “bottom”:
// 如果滚动的盒子的bottom值超出元素的高度,则置为0
if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.bottom = 0;
}else{
this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + ‘px’;
}
break;
case “left”:
// 如果滚动的盒子的left超出元素的高度,则置为0
if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.left = 0;
}else{
this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + ‘px’;
}
break;
case “right”:
// 如果滚动的盒子的right超出元素的高度,则置为0
if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.right = 0;
}else{
this.elemBox.style.right = this.elemBox.offsetRight + this.speed + ‘px’;
}
break;
default:
// 默认向上滚动,如果滚动的盒子的top超出元素的高度,则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + speed + ‘px’;
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}

以上就是javascript单张多张图无缝滚动实例代码的详细内容,更多关于javascript图片无缝滚动的资料请关注本站的其它相关文章!

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

 


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7004.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注