这篇文章主要介绍了 js 实现按钮控制带有停顿效果的图片滚动,,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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 开始滚动下一张,具体内容请大家参考代码。
来源: http://www.phperz.com/article/17/0523/332241.html