基于jQuery制作企业家具网站首页banner响应式图片轮播,支持带左右按钮控制图片淡出淡现切换效果。手机自适应屏幕大小。修改:添加json动态数据轮播图片。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css" />
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
3、body引入HTML代码
<div class="c-banner">
<div class="banner">
<ul>
<li><img src="img/lunbo1.jpg"></li>
<li><img src="img/lunbo2.jpg"></li>
<li><img src="img/lunbo3.jpg"></li>
</ul>
</div>
<div class="nexImg">
<img src="img/nexImg.png" />
</div>
<div class="preImg">
<img src="img/preImg.png" />
</div>
<div class="jumpBtn">
<ul>
<li jumpImg="0"></li>
<li jumpImg="1"></li>
<li jumpImg="2"></li>
</ul>
</div>
</div>
<script type="text/javascript">
//点击停止轮播
$("#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<imgLength-1){
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);
});
});
</script>