首頁 > 開發者 > JavaScript
js手動播放圖片實現圖片輪播效果，js圖片輪播
本文執行個體為大家分享了js圖片輪播具體實現代碼，供大家參考，具體內容如下
一、html代碼部分（et.thtml）：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="css/styleet.css"> <script type="text/javascript" src="js/system.js"></script></head><body> <div id="main"> <div id="top"> <span id="imgL" class="span1"></span> <img src="images/1.jpg" id="img" data-index="1" alt=""/> <span id="imgR" class="span2"></span> </div> <div id="bottom"> <img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/> <img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/> <img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/> <img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/> <img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/> <img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/> <img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/> </div> </div> <script type="text/javascript" src="js/et.js"></script></body></html>
二、css代碼部分（styleet,css）:
#main span{ width: 22px; height: 38px; position: absolute; display: inline-block; cursor: pointer; background: url("../images/1.png") no-repeat 0 0;}.span1{ background-position: 0 0; left:20px; top: 90px;}.span2{ background-position: -22px 0; right: 20px; top: 90px;}#main{ width: 500px; margin: 20px auto; text-align: center; border: solid 2px red; position: relative;}.initClass{ width: 50px; border: solid 2px #fff; margin: 10px 5px;}.focusClass{ width: 50px; border: solid 2px red; margin: 10px 5px;}
三、js代碼部分（et.js）：
/** * Created by LuanReco on 2015/8/28. */var slide={ arrImg:new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'), initClass:'initClass', focusClass:'focusClass', index:1, arrMax:7, imgMain:'img'}slide.top={ //導航事件 navEvent:function(){ //上部分大圖片顯示累加後下標對應的圖片 $$(slide.imgMain).src=slide.arrImg[slide.index-1]; //根據焦點下標值組合成導航圖片名稱 var n='img'+slide.index; //執行對應導航圖片單擊事件 $$(n).click(); }, //處理頁面上一部分的邏輯 clickRight:function(){ //點擊向右按鈕處理事件 console.log(slide.index); //當下標小於或等於最大圖片數量時 if(slide.index<slide.arrMax){ //累加當前下標值 slide.index++; slide.top.navEvent(); } }, clickLeft:function(){ //點擊向右按鈕處理事件 console.log(slide.index); //當下標小於或等於最大圖片數量時 if(slide.index>1){ //累加當前下標值 slide.index--; slide.top.navEvent(); } }}slide.bottom={ initImgClass:function(){ //初始化全部對不圖片的樣式 for(var i=1;i<=slide.arrMax;i++){ var n='img'+i; $$(n).className=slide.initClass; } }, click:function(){ //處理頁面下一部分的邏輯 $$('imgL').onclick=function(){ slide.top.clickLeft(); } $$('imgR').onclick=function(){ slide.top.clickRight(); } //擷取所有底部的小圖片 for(var i=1;i<=slide.arrMax;i++){ //為每一張圖片綁定點擊事件 var n='img'+i; $$(n).onclick=function(){ //初始化全部樣式 slide.bottom.initImgClass(); //圖片元素本身擷取焦點樣式 this.className=slide.focusClass; //在上部圖片中顯示點擊小圖片對應的大圖片 $$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1]; //重新記錄焦點圖片在數組中的對應下標位置 slide.index=this.getAttribute('data-index'); } } }}slide.autoplay={ play:function(){ var m=1; //for(var i=1;i<=slide.arrMax;i++){ setInterval(function(){ var n='img'+m; m++; $$(n).click(); if(m>6) m=1; },1000) //} }}slide.autoplay.play();slide.bottom.click();
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
