js实现按钮控制带有停顿效果的图片滚动
更新时间：2016年08月30日 08:49:41 作者：骑猪敲代码
这篇文章主要介绍了js实现按钮控制带有停顿效果的图片滚动，，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例使用js实现带有停顿效果的图片滚动，受按钮控制，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动2</title>
<style>
#warp{
width: 1250px;
height: 300px;
overflow: hidden;
margin:100px auto 0;
overflow-x: auto;
}
#warp #con{
width: 4000px;
height: 300px;
overflow: hidden;
}
#warp #con #box1{
float: left;
overflow: hidden;
}
#warp #con #box2{
float: left;
overflow: hidden;
}
#warp img{
float: left;
margin-right: 10px;
width: 200px;
height: 300px;
}
.btn{
text-align: center;
margin-top: 10px;
}
.btn button{
font-size: 16px;
}
</style>
</head>
<body>
<div id="warp">
<div id="con">
<div id="box1">
<img src="images/meinv1.jpg" alt="">
<img src="images/meinv2.jpg" alt="">
<img src="images/meinv3.jpg" alt="">
<img src="images/meinv4.jpg" alt="">
<img src="images/meinv5.jpg" alt="">
<img src="images/meinv6.jpg" alt="">
</div>
<div id="box2"></div>
</div>
</div>
<div class="btn">
<button id="scrollL"><<左滚</button>
<button id="scrollR">右滚>></button>
</div>
<script>
var warp=document.getElementById('warp');
var con=document.getElementById('con');
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var img=box1.getElementsByTagName('img')[0];
var scrollL=document.getElementById('scrollL');
var scrollR=document.getElementById('scrollR');
var timer1=null,timer2=null,flage=1;
box2.innerHTML=box1.innerHTML;
max=box1.clientWidth;
imgmax=img.clientWidth+10;
function scrollLeft(){
flage=1;
clearInterval(timer1);
timer1=setInterval(function(){
warp.scrollLeft++;
if (warp.scrollLeft>=max) {
warp.scrollLeft=0;
}
if(warp.scrollLeft%imgmax==0){
clearInterval(timer1);
clearTimeout(timer2);
timer2=setTimeout(function(){
timer1=setInterval(scrollLeft,5)
},2000)
}
},5)
}
function scrollRight(){
flage=0;
clearInterval(timer1);
timer1=setInterval(function(){
warp.scrollLeft--;
if (warp.scrollLeft<=0) {
warp.scrollLeft=max;
}
if(warp.scrollLeft%imgmax==0){
clearInterval(timer1);
clearTimeout(timer2);
timer2=setTimeout(function(){
timer1=setInterval(scrollRight,5)
},2000)
}
},5)
}
scrollLeft();
scrollL.onclick=function(){
// clearInterval(timer1);
// clearTimeout(timer2);
scrollLeft();
}
scrollR.onclick=function(){
// clearInterval(timer1);
// clearTimeout(timer2);
scrollRight();
}
warp.onmouseenter=function(){
clearInterval(timer1);
clearTimeout(timer2);
}
warp.onmouseleave=function(){
clearInterval(timer1);
clearTimeout(timer2);
console.log(flage);
if (flage) {scrollLeft();}
else{scrollRight();}
}
</script>
</body>
</html>
这种效果的具体效果是鼠标移上去滚动停止，移出滚动，滚动时是一张一张图片的滚动，即滚动一张之后停2s开始滚动下一张，具体内容请大家参考代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在web应用中，应用了大量的Javascript，因此代码的执行效率变得尤为重要，也就是性能！为了提高JS的性能，我们应该掌握一些基本的性能优化方式，并让它成为我们书写代码的习惯。下面介绍几种优化性能的方式，很多初学者甚至有经验的开发者也会忽略，希望对你有帮助2015-04-04
如果一个函数访问了此函数的父级及父级以上的作用域变量,那么这个函数就是一个闭包,本文将给大家分享js闭包的6种应用场景,文中有详细的代码示例,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了javascript元素动态创建实现方法,涉及javascript操作元素的相关技巧,需要的朋友可以参考下2015-05-05
javascript的alert box在java中如何显示多行
这篇文章主要介绍了javascript的alert box在java中如何显示多行,需要的朋友可以参考下2014-05-05
在uni-app官网上发现uni-app不支持H5扫码功能,但是下面的提示说明可以通过微信的JS-SDK实现扫码功能,下面这篇文章主要给大家介绍了关于uniapp实现微信H5扫码功能的完整步骤,需要的朋友可以参考下2022-11-11
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发，CSS（Cascading Style Sheet）层叠样式表单，今天给大家分享css与javascript重难点，感兴趣的朋友一起看看吧2020-06-06
下面小编就为大家带来一篇设置cookie指定时间失效(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这个可以增加用户验证，不用js alert来作提示，而是在右边提示，现在很多网站都这样做，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家介绍了js性能优化之数组模式实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要为大家详细介绍了JavaScript表单验证，重点介绍了E-mail验证，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
最新评论