Javascript图片无缝滚动_妙味课堂
来源:互联网 发布:淘宝店最高等级是什么 编辑:程序博客网 时间:2024/04/30 09:14
目标:使用实现Javascript实现多图的横向无缝滚动,左右各有箭头可控制滚动方向,鼠标滑过事滚动停止,鼠标离开滚动继续。拓展则垂直滚动。
思路:
1.图片运动,设定图片为绝对定位,然后使用定时器使图片的left值不断增加或减少
2.无缝循环,使用两组图片,当图片运动过半时,拉回即left归零滚动继续,保证视觉效果无间断
3.控制左右方向,控制left值增加量的征服值即可实现
4.鼠标悬停,设置onmouseover事件关闭定时器,鼠标移开则重启定时器
知识点:
1.属性offsetLeft offsetTop offsetWidth offsetHeight 分别表示对象的左边距、上边距、宽和高,均为数值,设置时注意尾部 +‘px’
2.oUl.innerHTML+=oUl.innerHTML; 将对象的内容复制一倍
3.定时器setInterval(函数,时间间隔) 每隔一定时间间隔运行一次函数
setTimeout(函数,时间) 加载后时间间隔后只运行一次函数,可起到延时效果
clearInterval( 定时器对象) 关闭定时器
HTML框架:
<div class="roll" id="roll"> <a href="javascript:void(0);" class="btn_left"></a> <a href="javascript:void(0);" class="btn_right"></a> <div class="wrap"> <ul> <li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li> <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li> </ul> </div></div>
CSS布局设置:
注意外部盒子要设为相对定位,且overflow:hidden;,ul为绝对定位
.roll { width: 698px; height: 108px; margin: 50px auto 0; position: relative; }.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; }.roll .wrap { width: 546px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }.roll ul { position: absolute; top: 0; left: 0; }.roll li { float: left; width: 182px; height: 108px; text-align: center; }.roll li a:hover { position: relative; top: 2px; }
Javascript:
window.onload=function(){var oDiv=document.getElementById('roll');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var speed=-4;var oBtn1=oDiv.getElementsByTagName('a')[0];var oBtn2=oDiv.getElementsByTagName('a')[1]; var roll_timer=null;oUl.innerHTML+=oUl.innerHTML;oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';roll_timer=setInterval(function(){oUl.style.left=oUl.offsetLeft+speed+'px';if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0+'px';}else if(oUl.offsetLeft>(0)){oUl.style.left=-oUl.offsetWidth/2+'px';}},30);oBtn1.onmouseover=function(){speed=-4;}oBtn2.onmouseover=function(){speed=4;}oUl.onmouseover=function(){clearInterval(roll_timer);}oUl.onmouseout=function(){roll_timer=setInterval(function(){oUl.style.left=oUl.offsetLeft+speed+'px';if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0+'px';}else if(oUl.offsetLeft>(0)){oUl.style.left=-oUl.offsetWidth/2+'px';} },30);}};
效果图:
0 0
- Javascript图片无缝滚动_妙味课堂
- Javascript图片无缝滚动_妙味课堂
- javascript图片无缝滚动
- JavaScript 图片无缝滚动
- javascript实现图片无缝滚动
- javascript设置无缝滚动图片
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- javascript实现图片无缝滚动-------Day 27
- javascript无缝滚动javascript
- marquee图片无缝滚动
- marquee图片无缝滚动
- Marquee图片无缝滚动
- flash无缝滚动图片
- 图片无缝滚动
- 图片无缝滚动(横向)
- 无缝图片滚动效果...
- 图片无缝滚动代码
- 黑马程序员-面向对象的三大特性1-封装-set,get方法,弱语法
- fd_set 类型用法
- UIView的几个问题
- 从零开始写PHP(二)
- linux和window下线程同步类
- Javascript图片无缝滚动_妙味课堂
- 行程长度压缩算法
- js中使用正则表达式
- [Linux] shell read 命令参数 -p用法
- s:checkboxlist s:checkbox 初始值设置
- 【Java TCP/IP Socket】UDP Socket
- TextView键盘输入 弹出指定高度 点击return收回虚拟键盘
- SSL证书SOCKET登陆JAVA
- python 加载libpython2.6.so.1.0 报错