banner轮播图在大多数的网页上都会有的，所以大多数情况下都会使用到这些就是代码，有些人大多数是使用插件写出来的，大多数使用的是swiper插件完成，这个插件有很多效果，可以访问一下官网：http://www.swiper.com.cn/里面有文档，接下来说一下这个原生写的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; //定时器的名字
var i = 0;
$(function(){
// 第一个图片显示，其余的图片隐藏,找兄弟元素.siblings().
$(".ig").eq(0).show().siblings().hide();
//定时器
/* 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();
// 鼠标经过的时候
$(".tag").hover(function(){
clearInterval(timer);//清除定时器
i = $(this).index(); //获取到当前鼠标放在那个下标的索引
/*$(".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();
});
// 左点击
$(".btn1").click(function(){
clearInterval(timer);
i--;
var imgs = $(".ig").length;
if(i == -1){
i =imgs-1;
}
showPicTab();
startLunbo();
})
// 右点击
$(".btn2").click(function(){
clearInterval(timer);
i++;
var imgs = $(".ig").length;
if(i ==imgs){
i=0;
}
showPicTab();
startLunbo();
})
});
// 封装
function showPicTab(){
// stop() 方法停止当前正在运行的动画。
$(".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);
}
网友评论