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开始滚动下一张，具体内容请大家参考代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家总结了JavaScript去重的11种方式，各有优缺点，文中的示例代码讲解详细，具有一定的学习价值，需要的可以根据需求合理使用2023-06-06
基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）
这篇文章主要为大家详细介绍了touch.js手势库结合zepto.js插件开发图片查看器，图片可以实现滑动、缩放、双击缩放等效果，2016-11-11
在实际的项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。这篇文章主要介绍了JS封装的三级联动菜单(使用时只需要一行js代码)的相关资料,需要的朋友可以参考下2016-10-10
ffmpeg 是一个非常流行的开源软件套件,用于处理音频和视频数据,而要想对图片之类的进行压缩,我们可以选择 sharp 来进行操作,所以下面我们就来学习一下前端如何利用ffmpeg和sharp玩转音视频和图片吧2023-10-10
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Array没有indexOf方法，这样在一个数组中查找某个元素的索引时比较麻烦，于是通过prototype原型扩展了Array.prototype.indexOf(),在对数组进行遍历的时候却出现了问题2013-04-04
下面小编就为大家带来一篇禁用backspace网页回退功能的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了js控制多图左右滚动切换效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了js添加类名的两种方法,一种是通过className来添加、删除类名,另一种是通过classList来添加、删除类名,感兴趣的朋友跟随小编一起看看吧2023-11-11
在Electron开发过程中,每次代码修改后需手动重新启动应用,这一过程可以通过引入Nodemon工具自动化,Nodemon能够监测文件变化并自动重启服务器,本文给大家介绍Electron 使用 Nodemon 配置自动重启,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要教会大家如何利用Bootstrap3制作自己的导航栏，设计自己喜欢的元素、样式，感兴趣的小伙伴们可以参考一下2016-05-05
最新评论