JS實現(xiàn)簡易圖片自動輪播
本文實例為大家分享了JS實現(xiàn)簡易圖片自動輪播的具體代碼,供大家參考,具體內(nèi)容如下
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>自動播放選項卡</title> <style> *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1px solid red; margin:100px auto; position:relative; } a{ font-size:40px; position:absolute; text-decoration:none; top:-10px; } #prev{ left:0; } #next{ right:0; } #pos{ margin-left:30px; } input{ width:90px; height:40px; float:left; outline:none; border:0; } .box div{ width:600px; height:400px; background:skyblue; text-align:center; line-height:300px; font-size:100px; font-weight:bold; text-shadow:5px 5px 5px #f90; display:none; } .box .show{ display:block; } .box .active{ width:88px; color:#fff; font-size:18px; font-weight:bold; background:#f90; } </style> <script> window.onload = function() { var oBox = document.getElementById('box'); var oPrev = document.getElementById('prev'); var oNext = document.getElementById('next'); var aBtn = document.getElementsByTagName('input'); var aDiv = oBox.getElementsByTagName('div'); var oNow = 0; for (var i=0;i<aBtn.length;i++) { aBtn[i].dataIndex = i; aBtn[i].onclick = function(){ oNow = this.dataIndex; for (var i=0;i<aBtn.length;i++) { aBtn[i].className = ''; aDiv[i].className = ''; } this.className = 'active'; aDiv[this.dataIndex].className = 'show'; } } oPrev.onclick = prev; oNext.onclick = next; //實現(xiàn)自動播放 var timer = setInterval(next , 1000); oBox.onmouseover = function() { clearInterval(timer); } oBox.onmouseout = function() { timer = setInterval(next , 1000); } function prev() { oNow--; if (oNow < 0) { oNow = aBtn.length-1; } tab(); } function next() { oNow++; if (oNow > aBtn.length-1) { oNow = 0; } tab(); } function tab() { for (var i=0;i<aBtn.length;i++) { aBtn[i].className = ''; aDiv[i].className = ''; } aBtn[oNow].className = 'active'; aDiv[oNow].className = 'show'; } } </script> </head> <body> <div class="box" id="box"> <a href="javascript:;" id="prev">☜</a> <a href="javascript:;" id="next">☞</a> <input type="button" name="" value="亞洲" class="active" id="pos"/> <input type="button" name="" value="歐洲" /> <input type="button" name="" value="非洲" /> <input type="button" name="" value="北美洲" /> <input type="button" name="" value="南美洲" /> <input type="button" name="" value="大洋洲" /> <div class="show">亞洲</div> <div>歐洲</div> <div>非洲</div> <div>北美洲</div> <div>南美洲</div> <div>大洋洲</div> </div> </body> </html>
展示效果:
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解
在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設(shè)計至關(guān)重要,它直接影響到程序的性能和可維護(hù)性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口(Interfaces)來優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2024-09-09JS跳出循環(huán)的方法區(qū)別對比分析(break,continue,return)
面向?qū)ο缶幊陶Z法中我們會碰到break ,continue, return這三個常用的關(guān)鍵字,那么關(guān)于這三個關(guān)鍵字的使用具體的操作是什么呢?接下來通過本文給大家講解JS跳出循環(huán)的方法區(qū)別對比分析(break,continue,return),感興趣的朋友一起看看吧2023-02-02深入淺出webpack教程系列_安裝與基本打包用法和命令參數(shù)詳解
下面小編就為大家?guī)硪黄钊霚\出webpack教程系列_安裝與基本打包用法和命令參數(shù)詳解。小編覺得挺不錯的,現(xiàn)在就想給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09javascript和jquery分別實現(xiàn)的九九乘法表代碼
javascript 九九乘法表 附j(luò)query 實現(xiàn)的九九乘法表代碼2010-03-03

Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)