本文实例讲述了 javascript 实现的左右无缝滚动效果。分享给大家供大家参考,具体如下:
前面介绍过,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果。
- <!DOCTYPE html>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>
- 无缝滚动——左右
- </title>
- <link rel="stylesheet" type="text/CSS" media="all" />
- <style type="text/css">
- #scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}
- .btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg)
- no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;} .btn_left:hover{background:url(images/btn.jpg)
- no-repeat -70px 0;} .btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg)
- no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;} .btn_right:hover{background:url(images/btn.jpg)
- no-repeat 1px 0;} #scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0
- auto;} #scroll ul{position:absolute;} #scroll li{float:left;width:182px;height:108px;text-align:center;}
- #scroll li a:hover{position:relative;top:2px;}
- </style>
- </head>
- <body>
- <div id="scroll">
- <a href="javascript:;" class="btn_left">
- </a>
- <a href="javascript:;" class="btn_right">
- </a>
- <div class="content">
- <ul>
- <li>
- <a href="#">
- <img src="images/1.jpg" width="178" height="108" alt="" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/2.jpg" width="178" height="108" alt="" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/3.jpg" width="178" height="108" alt="" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/4.jpg" width="178" height="108" alt="" />
- </a>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- window.onload = function() {
- var oDiv = document.getElementById('scroll');
- var oUl = oDiv.getElementsByTagName('ul')[0];
- var aLi = oDiv.getElementsByTagName('li');
- var aBtn = oDiv.getElementsByTagName('a');
- var speed = -1;
- var timer = null;
- oUl.innerHTML += oUl.innerHTML;
- oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
- timer = setInterval(function() {
- oUl.style.left = oUl.offsetLeft + speed + 'px';
- if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
- oUl.style.left = '0';
- } else if (oUl.offsetLeft > 0) {
- oUl.style.left = -oUl.offsetWidth / 2 + 'px';
- }
- },
- 30);
- aBtn[0].onclick = function() {
- speed = -1;
- };
- aBtn[1].onclick = function() {
- speed = 1;
- };
- oUl.onmouseover = function() {
- clearInterval(timer);
- };
- oUl.onmouseout = function() {
- timer = setInterval(function() {
- oUl.style.left = oUl.offsetLeft + speed + 'px';
- if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
- oUl.style.left = '0';
- } else if (oUl.offsetLeft > 0) {
- oUl.style.left = -oUl.offsetWidth / 2 + 'px';
- }
- },
- 30);
- };
- };
- </script>
PS:如果想要改变移动速度,只需要改变 speed 的值。
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.jb51.net/article/92968.htm