一、要點(diǎn)：
1.頁面加載時(shí)，圖片重合，疊在一起[絕對(duì)定位];
2.第一張顯示，其它隱藏;
3.設(shè)置下標(biāo),給下標(biāo)設(shè)置顏色讓它隨圖片移動(dòng);
4.鼠標(biāo)移動(dòng)到圖片上去，顯示左右移動(dòng)圖標(biāo)，鼠標(biāo)移走，繼續(xù)輪播;
二、實(shí)現(xiàn)代碼：
html代碼:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>輪播圖</title><link href="css/LunBimg.css" rel="stylesheet" /><script src="js/jquery-1.10.2.min.js"></script><script src="js/LunBimg.js"></script></head><body><div id="allswapImg"><div class="swapImg"><img src="image/1.jpg" /></div><div class="swapImg"><img src="image/2.jpg" /></div><div class="swapImg"><img src="image/3.jpg" /></div><div class="swapImg"><img src="image/4.jpg" /></div><div class="swapImg"><img src="image/5.jpg" /></div><div class="swapImg"><img src="image/6.jpg" /></div></div><div class="btn btnLeft"><</div><div class="btn btnRight">></div><div id="tabs"><div class="tab bg">1</div><div class="tab">2</div><div class="tab">3</div><div class="tab">4</div><div class="tab">5</div><div class="tab">6</div></div></body></html>
css代碼：
* {padding:0px;margin:0px;}.swapImg {position:absolute;}.btn {position:absolute;height:90px;width:60px;background:rgba(0,0,0,0.5);/*設(shè)置背景顏色為黑色，透明度為50%*/color:#ffffff;text-align:center;line-height:90px;font-size:40px;top:155px;/*圖片高度400/2-45*/cursor:pointer;/*display:none;*/}.btnRight {left:840px;/*圖片寬度900-導(dǎo)航寬度60*/}#tabs {position:absolute;top:370px;margin-left:350px;}.tab {height:20px;width:20px;background:#05e9e2;line-height:20px;text-align:center;font-size:10px;float:left;color:#ffffff;margin-right:10px;border-radius:100%;cursor:pointer;}.bg {background:#00ff21;}js代碼：
/// <reference path="_references.js" />var i = 0;//全局變量//定義一個(gè)變量用來獲取輪播的過程var time;$(function (){//1.頁面加載后,找到Class等于swapImg的第一個(gè)對(duì)象，讓它顯示，它的兄弟元素隱藏$(".swapImg").eq(0).show().siblings().hide();showTime();//當(dāng)鼠標(biāo)放到下標(biāo)上顯示該圖片，鼠標(biāo)移走繼續(xù)輪播$(".tab").hover(function (){//獲取到當(dāng)前鼠標(biāo)所在的下標(biāo)的索引i = $(this).index();show();//鼠標(biāo)放上去之后，怎么停止呢？獲取到變量的過程，清除輪播，把變量傳進(jìn)去clearInterval(time);}, function (){showTime();});//要求四，當(dāng)我點(diǎn)擊左右切換$(".btnLeft").click(function (){//1.點(diǎn)擊之前要停止輪播clearInterval(time);//點(diǎn)了之后，-1if (i == 0){i =6;}i--;show();showTime();});$(".btnRight").click(function () {//1.點(diǎn)擊之前要停止輪播clearInterval(time);//點(diǎn)了之后，-1if (i == 5) {i = -1;}i++;show();showTime();});});function show() {//$("#allswapImg").hover(function ()//{// $(".btn").show();//}, function ()//{// $(".btn").hide();//});//fadeIn(300)淡入，fadeout(300)淡出，過濾時(shí)間0.3s$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function showTime(){time = setInterval(function () {i++;if (i == 6) {//只有6張圖片，所以i不能超過6，如果i等于6時(shí)，我們就讓它等于第一張i = 0;}show();}, 3000);}以上所述是小編給大家介紹的基于JavaScript實(shí)現(xiàn)輪播圖代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
