Javascript 学习笔记 无缝滚动
2024-09-21 18:48:01
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动
可以调整向左或右方向滚动
<style type="text/css">
* {
margin:;
padding:;
}
#div1 {
overflow: hidden;
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left:;
top:;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li>
<img src="img/无缝滚动/1.jpg" />
</li>
<li>
<img src="img/无缝滚动/2.jpg" />
</li>
<li>
<img src="img/无缝滚动/3.jpg" />
</li>
<li>
<img src="img/无缝滚动/4.jpg" />
</li>
</ul>
</div> </body>
以上是一个简单的布局,下面是主要的Javascript 代码
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = 2;
oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; function move() { if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
} if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
} oUl.style.left = oUl.offsetLeft + speed + 'px'; } var timer = setInterval(move, 30); oDiv.onmouseover = function() {
clearInterval(timer);
}; oDiv.onmouseout = function() {
timer = setInterval(move, 30);
}; document.getElementsByTagName('a')[0].onclick = function() {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function() {
speed = 2;
};
}
</script>
简单讲下思路:
首先设置ul 里面的图片一共有8张 oUl.innerHTML += oUl.innerHTML;
在 计算ul的宽度为 li的实际宽度*8
之后将 多余的内容隐藏
注意 : oUl.offsetLeft 肯定是负值
所以判断的时候不要把负号漏掉
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
这段表示 图片滚动到一半了,迅速把图片拉回来,因为程序执行的太快,所以几乎看不出来 实现无缝滚动
最后使用 变量 speed 来控制左右方向的滚动。
最新文章
- [转]大数据时代,python竟是最好的语言?
- AngularJs 简单实现全选,多选操作
- sql server 2008 提示评估期已过的解决方法(升级无效)
- 从0开始学Java——JSP&;Servlet——如何部署web应用程序
- 2013年全球ERP市场格局(Gartner)
- TP-Link WR842N VPN错误619 不能建立到远程计算机的连接
- oracle时间范围查询
- zTree实现地市县三级级联封装类
- 大数据基础知识问答----spark篇,大数据生态圈
- 你不知道的JS之作用域和闭包(五)作用域闭包
- 大话前端解析Json对象
- 机器学习中的算法(2)-支持向量机(SVM)基础
- 理解WebSocket心跳及重连机制(五)
- 01:MFC应用程序编程
- Spring(AbstractRoutingDataSource)实现动态数据源切换
- swift 官方文档
- 词法分析用c++实现的
- Gradle及eclipse插件安装
- 1.java内存区域与内存溢出异常
- 黑色的企业网站后台管理模板html源码