原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下：
实现的代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现图片跑马灯特效</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: none;
}
body {
background: #eee;
}
.slide-module {
width: 120px;
height: 400px;
margin: 0 auto;
background: #fff;
border: 1px solid #ccc;
position: relative;
top: 50px;
}
.slide-module .up {
width: 27px;
height: 27px;
/* 向上的箭头 */
background: url(images/0.gif) no-repeat;
position: absolute;
top: 4px;
left: 50%;
margin-left: -16px;
cursor: pointer;
filter: alpha(opacity=60);
opacity: 0.6;
}
.slide-module .down {
width: 27px;
height: 27px;
/* 向下的箭头 */
background: url(images/5.gif) no-repeat;
position: absolute;
bottom: 4px;
left: 50%;
margin-left: -16px;
cursor: pointer;
filter: alpha(opacity=60);
opacity: 0.6;
}
.slide-module .wrap {
width: 120px;
height: 330px;
position: absolute;
top: 35px;
left: 0;
overflow: hidden;
}
.slide-module ul {
width: 120px;
position: absolute;
top: 0;
left: 0;
}
.slide-module li {
width: 120px;
height: 110px;
float: left;
}
.slide-module a {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
position: relative;
top: 4px;
}
.slide-module a:hover {
border: 1px solid #333;
}
.slide-module .active {
border: 10px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function () {
miaovSlide('miaovSlide');
};
function miaovSlide(o) {
//获取操作对象容器
var obj = document.getElementById(o);
if (!obj) return;
//获取对象下面所有的div
var aDiv = obj.getElementsByTagName('div');
//获取向上箭头
var oUp = getClass('up');
//获取向下箭头
var oDown = getClass('down');
//获取图片容器
var oWrap = getClass('wrap');
//获取图片列表
var oUl = oWrap.getElementsByTagName('ul')[0];
//获取图片列表项
var oLi = oUl.getElementsByTagName('li');
var oTime = null;
var iMs = 30;
var i = 0;
var iNum = 5;
var toggle = -1;
oUl.innerHTML += oUl.innerHTML;
// 点击向上时，向上走
oUp.onclick = function () {
toggle = -1;
autoPlay(toggle);
};
// 点击向下时，向走走
oDown.onclick = function () {
toggle = 1;
autoPlay(toggle);
};
// 向上与向下箭头鼠标移入时，修改其透明度为1
oUp.onmouseover = oDown.onmouseover = function () {
this.style.filter = 'alpha(opacity:100)';
this.style.opacity = 1;
};
// 向上与向下箭头鼠标移入时，修改其透明度为0.6
oUp.onmouseout = oDown.onmouseout = function () {
this.style.filter = 'alpha(opacity:60)';
this.style.opacity = 0.6;
};
// 图片运动方法,toggle代表向下或是向上的值
function autoPlay(toggle) {
// 清除原有定时器
if (oTime) {
clearInterval(oTime);
}
// 重新开启定时器
oTime = setInterval(function () {
// 第次增量
iNum += 2 * toggle;
// UL向下走,当top值大于0时
if (iNum > 0) {
// 设定top值为负的UL高度的一半(向上拉)
iNum = -oLi.length * oLi[0].offsetHeight / 2;
}
// UL向上走，当top值的绝对值大于UL自身宽度的一半时
if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) {
// 设定top的值为0(向下拉)
iNum = 0;
}
// 赋值给top值
oUl.style.top = iNum + 'px';
}, iMs);
};
autoPlay(toggle);
// 获取拥有当前样式的元素
function getClass(sName) {
for (i = 0; i < aDiv.length; i++) {
if (aDiv[i].className == sName) {
return aDiv[i];
}
}
}
}
</script>
</head>
<body>
<div class="slide-module" id="miaovSlide">
<!-- 向上箭头 -->
<div class="up"></div>
<div class="wrap">
<ul>
<li>
<a>
<img src="images/1.jpg" />
</a>
</li>
<li>
<a>
<img src="images/2.jpg" />
</a>
</li>
<li>
<a>
<img src="images/3.jpg" />
</a>
</li>
<li>
<a>
<img src="images/4.jpg" />
</a>
</li>
</ul>
</div>
<!-- 向下箭头 -->
<div class="down"></div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript跑马灯抽奖实例讲解
本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p
-
javascript 单行文字向上跑马灯滚动显示
代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
Javascript实现跑马灯效果的简单实例
页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel
-
原生JS实现跑马灯效果
效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } div{ position: relative
-
JS实现状态栏跑马灯文字效果代码
本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T
-
js跑马灯代码(自写)
复制代码 代码如下: function cls_marquee(id,id1,id2,sp){ this.obj_id=id; this.obj_id1=id1; this.obj_id2=id2; this.speed=sp; eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML"); function Marquee(){ if(eval(id2).offsetTop-eval(id).scrollTo
-
js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </
-
基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果.分享给大家供大家参考,具体如下: 1.Marquee.js文件 /**************************************************************** - Marquee.js - 参数: - ID:滚动对象(必须) - Direction:滚动方向("top": 0, "up": 0, "bottom": 1, "down"
-
js实现文字跑马灯效果
本示例将实现文字跑马灯效果:文字超过显示宽度每间隔1s自动向左滚动显示,话不多说,请看代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,in
-
javascript跑马灯悬停放大效果实现代码
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的. 先说下思路: 首先动态创建一个html结构 复制代码 代码如下: <div style="overflow-x:hidden;"> <table border="0" cellspacing="0" cellpaddi