使用方法：
1、head引入css文件
2、head引入js文件
3、body引入HTML代码
//点击停止轮播
$("#stop").click(function(){
clearInterval(time);
console.log("dsda");
})
//用于判断导航栏的状态
var toggle = true;
var time=null;
var nexImg = 0;
var bannerHeight = $(".c-banner ul li img").eq(0).css("height");
var imgLength = $(".c-banner .banner ul li").length;
$(".c-banner").css("height",bannerHeight);
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
//导航栏最后一个li的边框去除
$(".c-nav ul li:last").css("border","none");
//导航栏按钮
$('.btnImg').click(function() {
if (toggle) {
$('.btnImg').css("border", "1px solid #b0ccf3");
toggle = false
} else {
$('.btnImg').css("border", "1px solid transparent");
toggle = true;
}
$(".show").slideToggle(300);
})
//窗口大小发生改变
$(window).resize(function() {
//获取窗口宽度
var windSize = $(window).width();
if (windSize > 576) {
$(".show").slideDown(0);
} else {
$(".show").slideUp(0);
}
var bannerHeight = $(".c-banner ul li[style*='block'] img").css("height");
$(".c-banner").css("height",bannerHeight);
});
$(document).ready(function(){
//定时器
time =setInterval(intervalImg,3000);
});
//点击上一张
$(".preImg").click(function(){
clearInterval(time);
nexImg = nexImg-1;
if(nexImg<0){
nexImg=imgLength-1;
}
$(".c-banner .jumpBtn ul li").css("background-color","white");
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
$(".c-banner .banner ul li").eq(nexImg).css("display","block");
$(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
$(".c-banner .banner ul li").eq(nexImg+1).stop().animate({"opacity":0},1000,function(){
$(".c-banner ul li").eq(nexImg+1).css("display","none");
});
time =setInterval(intervalImg,3000);
})
//点击下一张
$(".nexImg").click(function(){
clearInterval(time);
intervalImg();
time =setInterval(intervalImg,3000);
})
//轮播图
function intervalImg(){
if(nexImg
nexImg++;
}else{
nexImg=0;
}
$(".c-banner .banner ul li").eq(nexImg).css("display","block");
$(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
$(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
$(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
});
$(".c-banner .jumpBtn ul li").css("background-color","white");
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
}
//轮播图底下按钮
$(".c-banner .jumpBtn ul li").each(function(){
$(this).click(function(){
clearInterval(time);
$(".c-banner .jumpBtn ul li").css("background-color","white");
jumpImg = $(this).attr("jumpImg");
if(jumpImg!=nexImg){
var after =$(".c-banner .banner ul li").eq(jumpImg);
var befor =$(".c-banner .banner ul li").eq(nexImg);
nexImg=jumpImg;
after.css("display","block");
after.stop().animate({"opacity":1},1000);
befor.stop().animate({"opacity":0},1000,function(){
befor.css("display","none");
});
}
$(this).css("background-color","black");
time =setInterval(intervalImg,3000);
});
});
如果觉得《html写一个轮播图响应式布局 响应式banner图片轮播布局代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
