大家喜歡的js輪播圖片效果，分享給大家。
一、要點(diǎn)：
1.頁面加載時，圖片重合，疊在一起[絕對定位];
2.第一張顯示，其它隱藏;
3.設(shè)置下標(biāo),給下標(biāo)設(shè)置顏色讓它隨圖片移動;
4.鼠標(biāo)移動到圖片上去，顯示左右移動圖標(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;//全局變量//定義一個變量用來獲取輪播的過程var time;$(function (){ //1.頁面加載后,找到Class等于swapImg的第一個對象，讓它顯示，它的兄弟元素隱藏 $(".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)了之后，-1 if (i == 0) { i =6; } i--; show(); showTime(); }); $(".btnRight").click(function () { //1.點(diǎn)擊之前要停止輪播 clearInterval(time); //點(diǎn)了之后，-1 if (i == 5) { i = -1; } i++; show(); showTime(); }); });function show() { //$("#allswapImg").hover(function () //{ // $(".btn").show(); //}, function () //{ // $(".btn").hide(); //}); //fadeIn(300)淡入，fadeout(300)淡出，過濾時間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時，我們就讓它等于第一張 i = 0; } show(); }, 3000);}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
