原生JS實現(xiàn)圖片跑馬燈特效
更新時間：2021年10月18日 10:42:52 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)圖片跑馬燈特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天給大家分享一個用原生JS實現(xiàn)的圖片跑馬燈特效，效果如下：
實現(xiàn)的代碼如下，歡迎大家復(fù)制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現(xiàn)圖片跑馬燈特效</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;
// 點(diǎn)擊向上時，向上走
oUp.onclick = function () {
toggle = -1;
autoPlay(toggle);
};
// 點(diǎn)擊向下時，向走走
oDown.onclick = function () {
toggle = 1;
autoPlay(toggle);
};
// 向上與向下箭頭鼠標(biāo)移入時，修改其透明度為1
oUp.onmouseover = oDown.onmouseover = function () {
this.style.filter = 'alpha(opacity:100)';
this.style.opacity = 1;
};
// 向上與向下箭頭鼠標(biāo)移入時，修改其透明度為0.6
oUp.onmouseout = oDown.onmouseout = function () {
this.style.filter = 'alpha(opacity:60)';
this.style.opacity = 0.6;
};
// 圖片運(yùn)動方法,toggle代表向下或是向上的值
function autoPlay(toggle) {
// 清除原有定時器
if (oTime) {
clearInterval(oTime);
}
// 重新開啟定時器
oTime = setInterval(function () {
// 第次增量
iNum += 2 * toggle;
// UL向下走,當(dāng)top值大于0時
if (iNum > 0) {
// 設(shè)定top值為負(fù)的UL高度的一半(向上拉)
iNum = -oLi.length * oLi[0].offsetHeight / 2;
}
// UL向上走，當(dāng)top值的絕對值大于UL自身寬度的一半時
if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) {
// 設(shè)定top的值為0(向下拉)
iNum = 0;
}
// 賦值給top值
oUl.style.top = iNum + 'px';
}, iMs);
};
autoPlay(toggle);
// 獲取擁有當(dāng)前樣式的元素
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)圖片放大效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
簡述JS中forEach()、map()、every()、some()和filter()的用法
JS中常常需要對數(shù)組進(jìn)行遍歷、迭代操作,而我們常用的就是for語句對數(shù)組進(jìn)行迭代,下面這篇文章主要給大家介紹了關(guān)于JS中forEach()、map()、every()、some()和filter()的用法,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了解決localstorage存儲boolean類型值的小坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
JavaScript實現(xiàn)簡單的二級導(dǎo)航菜單實例
這篇文章主要介紹了JavaScript實現(xiàn)簡單的二級導(dǎo)航菜單,設(shè)計javascript動態(tài)操作頁面元素的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之ALert警告框的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
之前看到一個Android的加載效果不錯，一直想自己動手做一個，正好這段時間重溫了一個Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實現(xiàn)加載效果的相關(guān)資料，需要的朋友可以參考下。2017-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)字母索引菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS常用的幾種數(shù)組遍歷方式以及性能分析對比實例詳解
這篇文章主要介紹了JS常用的幾種數(shù)組遍歷方式以及性能分析對比,結(jié)合實例形式詳細(xì)分析了javascript針對數(shù)組遍歷的幾種常見使用方法及執(zhí)行效率對比,具有一定參考借鑒價值,需要的朋友可以參考下2018-04-04
眾所周知echarts是一個純JavaScript的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于Echarts實例之樹形圖表的實現(xiàn)方法,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了簡單了解JavaScript arguement原理及作用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05