banner輪播圖在大多數(shù)的網(wǎng)頁(yè)上都會(huì)有的，所以大多數(shù)情況下都會(huì)使用到這些就是代碼，有些人大多數(shù)是使用插件寫出來(lái)的，大多數(shù)使用的是swiper插件完成，這個(gè)插件有很多效果，可以訪問(wèn)一下官網(wǎng)：http://www.swiper.com.cn/里面有文檔，接下來(lái)說(shuō)一下這個(gè)原生寫的banner輪播圖
html：
<div id="dlunbo">
? ? ? ? ?<div id="igs">
? ? ? ? ? ? ? ? ? ? ? <div classs="ig"><img src="images/1.jpg" alt=""></div>
? ? ? ? ? ? ? ? ? ? ? ? <div classs="ig"><img src="images/2.jpg" alt=""></div>
? ? ? ? ? ? ? ? ? ? ? ? <div classs="ig"><img src="images/3.jpg" alt=""></div>
? ? ? ? ? ? ? ? ? ? ? ? ?<div classs="ig"><img src="images/4.jpg" alt=""></div>
? ? ? ? ? </div>
? ? ? ? ? <div id="tabs">
? ? ? ? ? ? ? ? ? ?<div class="tag bg"></div>
? ? ? ? ? ? ? ? ? ? <div class="tag"></div>
? ? ? ? ? ? ? ? ? ? <div class="tag"></div>
? ? ? ? ? ? ? ? ? ? ?<div class="tag"></div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="btn btn1><</div>
? ? ? ? ? ? <div class="btn btn2">></div>
</div>
js
var timer; //定時(shí)器的名字
var i = 0;
$(function(){
? ? ? ? ? ? ?// 第一個(gè)圖片顯示，其余的圖片隱藏,找兄弟元素.siblings().
? ? ? ? ? ?$(".ig").eq(0).show().siblings().hide();
? ? ? ? ? ?//定時(shí)器
? ? ? ? ? ?/* timer = setInterval(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?i++;
? ? ? ? ? ? ? ? ? ? ? ? ? ?if(i == 6 ){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i=0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ?// $(".ig").eq(i).show().siblings().hide();
? ? ? ? ? ? ? ? ? ? ? ? ? ?// 漸變效果fadeIn漸入，fadeOut漸出
? ? ? ? ? ? ? ? ? ? ? ? ? ?$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
? ? ? ? ? ? ? ? ? ?},3000);*/
? ? ? ? ? ? ? ? ? ?startLunbo();
? ? ? ? ? ? ? ? ? ? ?// 鼠標(biāo)經(jīng)過(guò)的時(shí)候
? ? ? ? ? ? ? ? ? ? $(".tag").hover(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(timer);//清除定時(shí)器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i = $(this).index(); //獲取到當(dāng)前鼠標(biāo)放在那個(gè)下標(biāo)的索引
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? /*$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?showPicTab();
? ? ? ? ? ? ? ? ? ? ?},function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? /*timer = setInterval(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i++;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(i == 6 ){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i=0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// $(".ig").eq(i).show().siblings().hide();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 漸變效果fadeIn漸入，fadeOut漸出
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},3000);*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? startLunbo();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ? ? ? ? // 左點(diǎn)擊
? ? ? ? ? ? ? ? ? ? ? ? ? ?$(".btn1").click(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i--;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var imgs = $(".ig").length;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(i == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i =imgs-1;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?showPicTab();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? startLunbo();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 右點(diǎn)擊
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".btn2").click(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(timer);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i++;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var imgs = $(".ig").length;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(i ==imgs){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i=0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?showPicTab();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? startLunbo();
? ? ? ? ? ? ? ? ? ? ? ? })
});
// 封裝
function showPicTab(){
? ? ? ? ? ?// stop() 方法停止當(dāng)前正在運(yùn)行的動(dòng)畫。
? ? ? ? ? ? $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);
? ? ? ? ? ?$(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
}
function startLunbo(){
? ? ?timer = setInterval(function(){
? ? ? ? ? ? i++;
? ? ? ? ? ?var imgs = $(".ig").length;
? ? ? ? ? ? if(i == imgs ){
? ? ? ? ? ? ? ? ? ? ? ?i=0;
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?showPicTab();
? ? ? },3000);
}
