QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > 响应式banner图片轮播布局代码

响应式banner图片轮播布局代码

基于jQuery制作企业家具网站首页banner响应式图片轮播,支持带左右按钮控制图片淡出淡现切换效果。手机自适应屏幕大小。修改:添加json动态数据轮播图片。
分享到微信朋友圈
X

使用方法:

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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
密歇根神奇彩票 www.84uk.com-彩票飞艇聊天室| www.3rx.cc-京彩手环app下载| www.1010.space-福利彩票快开游戏| www.752691.com-彩票直通车官网| www.08123.com-4lcc金彩网-| www.848232.com-抵制天价彩礼| www.228222.cc-河南人的彩礼| www.767644.com-福彩3d酒宝图| www.716278.com-冮苏快三计划软件| www.839968.com-男朋友玩pc彩票| www.925669.com-彩富网下载-| www.297006.com-彩票k线图-| www.323152.com-七乐彩票开奖| www.075286.com-千里马福彩推荐号| www.52559.cc-快3彩票取胜小秘籍| www.4747.gg-伪造彩票-| www.905241.com-江西体彩快3走势图| 明星彩票www.cp67.cc| www.441224.com-彩票728下载| www.829077.cc-梦到别人中彩票大奖| www.284089.com-快三彩票屠龙| www.398615.com-足彩12月份对阵表| 杏彩www.00840m.com| www.tk07.com-36o彩票开奖查询| www.18659.cc-彩票下载领彩金| www.008211.com-泰安体彩转让信息| www.127431.com-日彩网下载-| www.358258.com-黑彩杀号-| www.555883.com-飞彩网邀请码| www.173872.com-下载江苏快三新版本| www.096323.com-福彩与体彩的区别| www.768209.com-快三稳赚计划| www.409421.com-彩票今天结果| www.796229.com-足彩竞彩9场胜负彩| www.903223.com-彩票跟单员-| www.995778.com-cc彩球网平台登陆| www.kh22.com-江苏快三怎么赚| www.39ms.com-东莞市体彩征召| www.13sl.com-新浪手机彩票中心| www.267361.com-五百万彩票网网页版| www.362339.com-快三如何不碰长龙| www.167838.com-快三河北走势图| www.338924.com-甘肃快三技巧稳赚法| www.552623.com-江苏快三太坑人| www.722778.com-如何找到彩票网址| www.880821.com-十分彩网真的假的| www.218286.com-快三官方开奖公正吗| www.44278.cc-全民彩app下载| www.440130.com-uu快三怎么下载| www.652875.com-黄石彩票大奖| www.805401.com-七乐彩奖项金额表| www.929289.com-盈彩彩票app安卓| www.137690.com-客家妹子钟彩媚| www.086094.com-彩票高配网-| www.189541.com-福彩3d预测号| www.265679.com-陕西彩票网-| www.9306.cc-打开彩票论坛| www.367892.com-星空蓝鲸彩铅画| www.98qr.com-财政部彩票司| www.4070.org-彩虹六号加载太慢| www.29517.com-老时时彩搜狗| www.272320.com-快三外挂免费下载| www.513521.com-三彩丽雪没有官网吗| www.618202.com-久信彩票下载| www.705373.com-彩票平台哪个信誉好| www.787673.com-彩宝彩票提现难| www.862818.com-鲁豫有约彩票| www.928169.com-彩色复印机排行| www.981338.com-足彩倍投计划| www.xj3.com-福彩3的正版藏机图| www.026014.com-体彩五的开奖结果| www.131323.com-广西结婚彩礼多少| www.fb6.com-一分彩破解-| www.935006.com-4s彩票开奖-| www.562701.com-优乐彩可信吗| www.663674.com-博盈彩票手机版| www.113599.com-时时彩单双大小规律| www.216502.com-5分快三计划| www.8411.loan-下载头将彩票| www.912142.com-彩53app下载| www.984796.com-彩运8压大小怎么看| www.as76.com-快三彩票漏洞| www.322973.com-北京乐和彩-| www.g88.cn-彩宝cb8com-| www.985249.com-好彩堂跑狗图彩报| www.410059.com-乐透彩票下载安装| www.633600.cc-中国福利彩票几点开| www.026543.cc-哪个平台做电竞博彩| www.6475.xyz-天天彩票主页| www.872076.com-彩票达人app下载| www.cai2341.com湖北快三今天必出号| www.uw57.com-彩票走势图表| www.109393.com-杏彩平台-| www.796682.com-66彩票app-| www.06qm.com-qq易迅版彩票| www.15467.com-嘉兴体彩阳光征召| www.nh92.com-极速彩票黑彩平台| www.883.live-用彩铅画星空教程| www.99136.com-时时彩任选三玩法| www.182886.com-新快三网上投注平台| www.964249.com-310足球竞彩合买| www.16128.cc-颖彩双色球专家推荐| www.69053.com-c16com彩票-| www.249054.com-富贵彩票app| www.022931.com-3d天天彩-| www.099075.com-中国福利彩票宣传语| www.854547.com-安徽快三形态彩乐乐| www.920104.com-苏州枫彩骗局| www.978678.cc-旧版好彩客-| www.cp3908.com-赵公明3d彩票预测| www.70587.com-逸彩时尚购物网| www.517501.com-乐彩网bbs-| www.361097.com-福彩高管被抓| www.572338.com-今日足彩258| www.772264.com-荣鼎彩有谁黑过| www.922559.com-河南周口结婚彩礼| www.ln74.com-福彩3d买大小中奖| www.3py.cc-华宇京彩软件| www.31629.cc-中福彩票湖北| www.xr22.com-71彩票官网-| www.jn45.com-大发快三开奖结果| www.112196.com-98c彩票线路检测| www.82gz.com-上饶体彩销量| www.0188.xyz-3d大花猫彩吧图库| www.440310.com-彩乐乐杀号-| www.563879.com-淘彩票计划-| www.653854.com-江西福彩快3计划| www.733223.com-江苏体彩大乐透| www.814458.com-体彩排列五字谜汇总| www.884200.com-01彩票软件-| www.962681.com-彩乐乐任二遗漏| www.ww73.com-安装南方双彩| www.869671.com-鸿运彩票不让提现| www.451633.com-幸运时时彩正规吗| www.532309.com-临沂市体育彩票中心| www.600952.com-求彩票网站-| www.823661.com-体彩竞彩怎样兑奖| www.951145.com-九号彩票登录| www.9nb.com-幸运七星彩预测号码| www.4336.vip-什么时候彩票开奖| www.28942.com-手机网上购彩平台| www.287355.com-彩票api接口大全| www.430908.com-竞彩宣传口号和图片| www.554539.com-体彩谜语诗谜汇总| www.680045.com-两元彩票网双色球| www.888068.com-11选5爱彩乐广东| 幸运众彩www.108095.com| www.439711.com-体彩大乐透后一位| www.02496.com-巨龙彩票网址| www.27561.com-体彩去哪里兑奖北京| www.159601.com-中彩网网址登录| www.435120.com-双色球开机号彩网| www.57393.cc-彩神通软件苹果下载| www.47794.com-好彩妹什么电视剧| www.86616.com-好彩频道在哪看| www.037363.com-高手网彩票资料大全| www.cp7627.com-福彩北京快三一定牛| www.zh20.com-七乐彩预测专家推荐| www.962045.cc-手机体彩害死多少人| www.309726.com-延吉福利彩票中心| www.432432.com-红利系统彩票| www.eo06.com-高频彩官网-| www.d07.top-福彩3d字迷新彩网| www.818808.com-体彩竞彩查询结果|