快捷導(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運(yùn)行耗時(shí)操作的延時(shí)顯示方法
今天用JS允許一個(gè)ActiveX，挺耗時(shí)的，想在允許時(shí)提示用戶正在允許，而不至于漏斗在那里
2010-11-11
基于JavaScript獲取鼠標(biāo)位置的各種方法
這篇文章主要介紹了基于JavaScript獲取鼠標(biāo)位置的各種方法 ,需要的朋友可以參考下
2015-12-12
圖片懶加載imgLazyLoading.js使用詳解
這篇文章主要為大家詳細(xì)介紹了圖片懶加載imgLazyLoading.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
Javascript定義類（class）的三種方法詳解
這篇文章主要介紹了Javascript定義類（class）的三種方法詳解,本文講解了構(gòu)造函數(shù)法、Object.create()法、極簡(jiǎn)主義法三種方法,需要的朋友可以參考下
2015-03-03
js獲取圖片base64的正確實(shí)現(xiàn)方式
這篇文章主要給大家介紹了關(guān)于js獲取圖片base64的正確實(shí)現(xiàn)方式,BLOB是二進(jìn)制大對(duì)象,是一個(gè)可以存儲(chǔ)二進(jìn)制文件的容器,?在計(jì)算機(jī)中BLOB常常是數(shù)據(jù)庫(kù)中用來(lái)存儲(chǔ)二進(jìn)制文件的字段類型,需要的朋友可以參考下
2024-01-01
純js代碼生成可搜索選擇下拉列表的實(shí)例
下面小編就為大家分享一篇純js代碼生成可搜索選擇下拉列表的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-01-01
基于openlayers實(shí)現(xiàn)角度測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了基于openlayers實(shí)現(xiàn)角度測(cè)量功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
現(xiàn)在大多數(shù)網(wǎng)站都會(huì)添加這種功能：當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面的下方時(shí)，頁(yè)面的右下角會(huì)顯示出來(lái)一個(gè)“回到頂部”的按鈕或連接;那么，如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實(shí)現(xiàn)方法，感興趣的你可不要走開哦
2013-01-01
JavaScript實(shí)現(xiàn)的select點(diǎn)菜功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的select點(diǎn)菜功能,涉及javascript動(dòng)態(tài)操作頁(yè)面元素及元素遍歷相關(guān)技巧,需要的朋友可以參考下
2017-01-01
JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能
本文主要介紹了JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04