快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果

更新時(shí)間：2020年12月13日 09:18:41 作者：i大男孩

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 .box {
 width: 100%;
 height: 500px;
 border: 1px solid;
 }
 </style>
 <script src="./js/new_file.js"></script>
</head>

<body>
 <div class="box_1">
 <div class="c-banner">
 <div class="banner">
 <ul id="banner">
  <li><img src="img/su_ning1.png"></li>
  <li><img src="img/su_ning2.png"></li>
  <li><img src="img/su_ning3.png"></li>
  <li><img src="img/su_ning4.png"></li>
  <li><img src="img/su_ning5.png"></li>
  <li><img src="img/su_ning6.png"></li>
  <li><img src="img/su_ning7.png"></li>
  <li><img src="img/su_ning8.png"></li>
 </ul>
 </div>
 <div class="nexImg" id="nexImg">
 <img src="img/nexImg.png" />
 </div>
 <div class="preImg" id="preImg">
 <img src="img/preImg.png" />
 </div>
 <div class="jumpBtn">
 <ul id="jumpBtn">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 </div>
 </div>
</body>

</html>

js:

window.onload = function() {
 //banner 自動(dòng)播放
 var oBanner = document.getElementById('banner');
 var aLi = oBanner.getElementsByTagName('li');
 var oJumpBtn = document.getElementById('jumpBtn');
 var aBtn = oJumpBtn.getElementsByTagName('li');
 var oPreImg = document.getElementById('preImg');
 var oNexImg = document.getElementById('nexImg');
 var iNow = 0;
 var timer = null;
 for (var i = 0; i < aBtn.length; i++) {
 aBtn[i].index = i;
 aBtn[i].onclick = function() {
 iNow = this.index;
 tab();
 };
 }

 function tab() {
 for (var i = 0; i < aBtn.length; i++) {
 aBtn[i].style.background = '#ccc';
 aLi[i].style.opacity = 0;
 }
 aBtn[iNow].style.background = '#CF0F32';
 aLi[iNow].style.opacity = 1;
 }

 function tick() {
 iNow++;
 if (iNow == aBtn.length) {
 iNow = 0;
 }
 tab();
 }

 timer = setInterval(tick, 2000);

 oPreImg.onclick = function() {
 iNow--;
 if (iNow < 0) {
 iNow = aBtn.length - 1;
 }
 tab();
 };
 oNexImg.onclick = tick;

 oBanner.onmouseover = function() {
 clearInterval(timer);
 };
 oBanner.onmouseout = function() {
 timer = setInterval(tick, 2000);
 };
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
輪播圖

相關(guān)文章

JS事件處理機(jī)制及事件代理（事件委托）實(shí)例詳解
這篇文章主要介紹了JS事件處理機(jī)制及事件代理,結(jié)合實(shí)例形式詳細(xì)分析了JS時(shí)間處理機(jī)制與事件代理功能、用法及相關(guān)使用技巧,需要的朋友可以參考下
2023-06-06
js控制表單奇偶行樣式的簡(jiǎn)單方法
這篇文章介紹了js控制表單奇偶行樣式的簡(jiǎn)單方法，有需呀偶的朋友可以參考一下
2013-07-07
JavaScript獲取客戶端IP的方法(新方法)
這篇文章主要介紹了JavaScript獲取客戶端IP的方法(新方法)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
彈出窗口并且此窗口帶有半透明的遮罩層效果
這篇文章主要介紹了如何點(diǎn)擊一個(gè)按鈕實(shí)現(xiàn)彈出一個(gè)居中窗口，并且此窗口帶有半透明的遮罩層效果,需要的朋友可以參考下
2014-03-03
JS實(shí)現(xiàn)輸入框提示文字點(diǎn)擊時(shí)消失效果
這篇文章主要介紹了JS實(shí)現(xiàn)輸入框提示文字點(diǎn)擊時(shí)消失效果,涉及javascript針對(duì)鼠標(biāo)的響應(yīng)及事件監(jiān)聽(tīng)機(jī)制相關(guān)技巧,需要的朋友可以參考下
2016-07-07
js判斷一個(gè)字符串是以某個(gè)字符串開(kāi)頭的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js判斷一個(gè)字符串是以某個(gè)字符串開(kāi)頭的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
JavaScript設(shè)計(jì)模式之構(gòu)造器模式(生成器模式)定義與用法實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之構(gòu)造器模式(生成器模式)定義與用法,結(jié)合實(shí)例形式分析了javascript構(gòu)造器模式的概念、原理、與工廠模式的區(qū)別以及相關(guān)使用方法,需要的朋友可以參考下
2018-07-07
js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
Js base64 加密解密介紹
想必大家對(duì)base64并不陌生吧，在本文將為大家介紹下Js中的base64加密解密過(guò)程，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
本文主要介紹了JavaScript如何用面向?qū)ο蟮姆绞椒庋b拖拽對(duì)象，通過(guò)3種方式來(lái)實(shí)現(xiàn)，幫助讀者更好的理解其原理
2021-06-06