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.236835.com-中国体育彩票软件| www.112871.com-贵州快三定牛| www.113929.com-福彩3d15和值| www.86rm.com-全民k歌彩评| www.25rg.com-安装华彩人生一点通| www.46169.com-555c彩票-| www.63535.com-乐彩网友论坛| www.191369.com-精彩十分-| www.4708.vip-以买彩票为生| www.63828.cc-足彩app有哪些| www.031845.com-手机彩票五选一| www.132477.com-河南的彩礼多少| www.718961.com-彩虹羽泉歌曲| www.869161.com-寒若冰七星彩| www.yk07.com-福彩3d绝对布衣6| www.570718.com-福彩什么时候可以买| www.672285.com-七星彩牛彩网预测| www.806044.com-怎么买彩票会发财| www.886686.com-永乐国际彩票| www.967325.com-彩票qq群拉手| www.cp7991.com-福彩快三真的很坑人| www.wb96.com-福彩快3星号代表几| www.23dp.com-南充福利彩票官网| www.668.space-搜索58彩-| www.131087.com-河南郸城彩礼| www.887539.com-下彩网合法吗| www.963436.com-天福彩票-| 众彩www.006150.com| 计划稳定版-彩世界开奖下载| www.165605.com-安徽福彩兑奖流程| www.886129.com-欢迎登录神州时时彩| 幸运彩票www.921399.com| www.q54.xyz-双阳区黑彩-| www.74yd.com-体彩怎么看中奖结果| www.9067.loan-头彩app下载| www.13172.cc-彩票大乐透资讯| www.629963.com-3d是福彩还是体彩| www.72283.com-申请福利彩票打印机| www.94132.com-体育彩票社会责任| www.82330.cc-怎么去兑彩票大奖| www.725640.com-福利彩票中奖规则| www.805118.com-竞彩软件哪个好| www.30af.com-万家彩票是什么意思| www.103666.cc-最新九州彩票新版本| www.52162.cc-新淘彩网-| www.557083.com-vr彩票太假-| www.0108.vip-中彩票的下场| www.99496.com-足彩310报纸官网| www.968804.com-全民快三合法吗| www.us6.com-博彩app下载| www.229808.com-六福彩-| www.881547.com-辉煌彩是正规彩店吗| www.956916.com-开彩开奖结果| 大赢家彩票网www.54400g.com| www.022181.com-时时彩牛牛-| www.89248.com-分分彩怎么玩能赢| www.22319.com-有彩礼没陪嫁| www.093426.com-一分彩是国家开的吗| www.233931.com-快三游戏是啥意思| www.712692.com-时时彩如何破解| www.4768.wang-凤凰彩票是不是送钱| www.063286.com-购彩网骗局揭秘| www.185376.com-一定牛彩票app| www.ab97.com-江苏体彩网首页| www.85tf.com-足彩大小球分析教程| www.90585.com-彩友多店铺号| www.511173.com-彩虹的歌词-| www.cai74.cc-快三河北-| www.110237.com-和乐彩票怎么样| www.316893.com-七乐彩开奖号中彩网| www.kt85.com-玩快三哪个软件好用| www.684289.com-彩c02网站-| www.757032.com-彩色沥青混凝土价格| www.828673.com-福彩3d胆拖速查表| www.903632.com-3d福彩试机号今天| www.536894.com-春秋彩票不给钱| www.627147.com-728彩票是真的吗| www.708989.cc-竞彩足球害死我了| www.792522.com-七位数彩票开奖图片| www.561801.com-鴻彩直播-| www.623753.com-可以买足彩app| www.682115.com-微彩国际骗局| www.749040.com-连盈彩票-| www.812225.com-合肥竞彩店行业赚钱| www.885910.com-体彩分析软件哪个好| www.950705.com-甘肃快三一天多少期| 金凤凰彩票www.406577.com| www.kx74.com-快三36期开奖号码| www.9229.top-乐彩网正规不| www.53682.cc-快三湖北规则| www.bp08.com-易彩网彩票| www.058758.com-彩神pk10手机版| www.028011.com-鸿彩快三不能提现| www.818048.com-九星彩票可以玩吗| www.898080.com-彩票代理拉人| www.963949.com-大发快三稳赢方法| 159彩票www.159888a.com| www.mk87.com-加微信送38彩金| www.129810.com-最近彩民故事| www.203529.com-快三大小怎么玩稳赚| www.343748.com-赚彩票-| www.975440.com-有人玩江苏快三吗| www.4763.org-百乐彩合法吗| www.339564.com-新彩吧3d-| www.32991.cc-百乐彩娱乐官网| www.991535.com-彩票输了怎么办| www.90fb.com-北京快三今天开奖号| www.3272.org-体彩p3今晚试机号| www.416248.com-彩图诗句白小姐祺袍| www.iq47.com-彩乐乐十一选五遗漏| www.611573.com-彩票oe网-| www.112091.com-泰安市彩票站点| www.237156.com-皇都彩票app入口| www.275007.com-众博时时彩-| www.354009.com-加拿大彩票大奖领取| www.yn47.com-吉林省时时彩| www.cf52.com-怎么购买吉林快三盘| www.tl21.com-福彩三d解太湖汇总| www.1az.com-什么彩票有收藏价格| www.sq09.com-2019快三微信群| www.007149.com-彩票助手软件| www.025471.com-快乐分分彩计划| www.720922.com-新二彩安全吗| www.56391.cc-彩富網-| www.654417.com-盈彩国际是骗人的吗| www.712937.com-cp彩票网站-| www.781738.com-彩票纳税多少| www.111829.com-彩摘牛摘网-| www.365715.cc-彩神幸运飞艇下载| www.34029.com-玩彩彩票安卓叫什么| www.026492.com-58彩票官网-| www.490342.com-微彩票合法吗| www.568532.com-彩票微店铺怎么申请| www.220954.com-体彩开奖结杲| www.0057.cm-3d立体动画彩铅| www.863688.com-刷彩票赚钱违法吗| 600彩票www.336766.com| www.017605.com-2元彩票3d-| www.098626.com-福彩在线手机版| www.86vq.com-哪个软件买彩票| www.03131.cc-35彩票平台合法吗| www.0723.wang-彩票安徽15选5| www.70et.com-安微快三和值表| www.502838.com-爱投彩票和口袋彩店| www.83pj.com-支付宝扫码兑彩票| www.49vv.cc-体彩排3藏机图| www.387.cc-苹果x炫彩边框壁纸| www.4562.com-3d福彩35期字谜| www.5123.com-网上彩票加盟条件| www.10444.com-云南福彩快乐十分遗| www.92818.com-标准施工彩钢围挡| www.020000.com-701彩票-| www.251797.com-彩票2元专业版| www.48150.com-nba竞彩258-| www.0668.tv-福彩攀枝花电话| www.10425.com-网易足彩预测| www.375017.com-搜索七星彩-| www.513930.com-彩票什么时候上班| www.589678.com-足彩胜负19050| www.804440.com-cp701彩票官网| www.927471.com-福利彩票什么玩| www.ec92.com-阿里彩票害人| www.167009.com-做快三是什么意思| www.620468.com-购买国外彩票|