使用 JS 实现图片左右跑马灯
Ø 前言
之前写了一篇使用 JS 实现文字上下跑马灯,现在乘热打铁在把图片左右跑马灯一起贴出来,不多说直接看代码。
1. 首先定义 css 样式
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#div1{
width: 500px;
height: 125px;
margin: 60px auto 0px auto;
border: 2px solid lightgreen;
position: relative;
overflow: hidden;
}
#ul_img{
position: absolute;
top: 0;
left: 0;
}
#ul_img li{
float: left;
width: 125px;
height: 125px;
/*border: 1px solid red;*/
}
#ul_img li img{
width: 100%;
height: 100%;
}
</style>
2. HTML 代码
<div id="div1">
<ul id="ul_img">
<li><img src="../../../../Images/301.jpg" alt=""/></li>
<li><img src="../../../../Images/201.jpg" alt=""/></li>
<li><img src="../../../../Images/302.gif" alt=""/></li>
<li><img src="../../../../Images/202.jpg" alt=""/></li>
<li><img src="../../../../Images/203.jpg" alt=""/></li>
</ul>
</div>
3. JS 代码
var millisec = 10; //滚动间隔时间(毫秒)
var intervalId;
var left = 0;
var ul;
window.onload = function(){
ul = document.getElementById("ul_img");
ul.innerHTML += ul.innerHTML; //复制一份相同的li
var lis = ul.getElementsByTagName("li");
ul.style.width = (lis[0].offsetWidth * lis.length) + "px"; //重新设置宽度
intervalId = setInterval("scroll()", millisec);
var div1 = document.getElementById("div1");
div1.onmouseover = function(){
clearInterval(intervalId);
}
div1.onmouseout = function(){
intervalId = setInterval("scroll()", millisec);
}
}
function scroll(){
left -= 1;
//定位小于等于总宽度的二分之一时,则left设置为0
if(left <= -ul.offsetWidth / 2)
left = 0;
ul.style.left = left + "px";
}
4. 运行效果
Ø 分析
1. 总体来说还是比较简单,首先定义了一个 div,并在内部定义了 ul li 标签,用于存放图片。
2. 再将 ul 标签绝对定位,li 标签左浮动,img 宽度与高度设置100%。
3. js 运行时,首先复制一份所有的 li 标签,加入 ul 中(用于滚动时的下一份图片集合)。
4. 在 js 中可以看到,当ul 的 left 值小于 ul.offsetWidth 的二分之一时,就重新定位 ul 标签,这样就实现了循环滚动。
- 使用JS实现图片无限循环左右滚动
- 使用 JS 实现文字左右跑马灯
- Js实现类似图片相册左右切换效果
- 使用js实现图片切换
- JS实现可左右滚动产品图片展示
- JS限制上传图片大小不使用控件在本地实现
- 图片的左右移动,js动画效果实现代码
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- ie6下png图片背景不透明的解决办法使用js实现
- 使用jQuery简单实现产品展示的图片左右滚动功能
- 使用js实现有光源扫描图片效果
- Js实现图片缩放上下左右移动效果
- Iframe的简单应用,js实现图片左右移动
- WPF使用Storyboard实现图片跑马灯效果
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- 一个图片轮换显示的实现,使用DIV+JS,支持Firefox,IE,Safiri
- 使用jQuery简单实现产品展示的图片左右滚动功能
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- Js实现类似图片相册左右切换效果
- 使用X-Slide.js实现图片轮换