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天

知道了
58福彩 www.pj25.cc-幸运五星彩开奖结果| www.59bo.com-沈阳彩钢板机械胶辊| www.1419.pw-中一千万彩票| www.9342.cc-中国福利彩票冯学志| www.51123.cc-淘宝送的彩票在哪| www.455900.com-4d马来西亚彩票| www.558087.com-好彩客是黑网吗| www.729667.com-彩票幸运飞艇怎么买| www.809514.com-好彩客彩票下载| www.500099.cc-中国体育彩票销售额| www.872143.com-贵卅福彩-| www.uy10.com-青海福彩下载安装| www.170037.com-吉林省福彩快三| www.4837.cc-好友彩票登录网址| www.210402.com-哪里可以买吉林快三| www.335584.com-福友网购彩是真的吗| www.607516.com-人人彩票开奖| www.ds99.com-彩票软件ios| www.4552.cc-竞彩足球合买代购| www.840025.com-竞彩篮球500网| www.033655.com-快三数字组合图| www.342.in-西蔓色彩搭配| www.bw80.com-甘肃快三讨论群| www.36na.com-体彩七星彩走势| www.ro99.com-国家该不该取消彩票| www.88lt.cc-选号软件体彩大乐透| www.852401.com-七乐彩走势图带线连| 500彩票www.50074g.com| www.ak08.com-七星彩最快开奖直播| www.919282.com-时时彩做庄有风险吗| www.737735.com-幸运28送28彩金| www.537066.com-3开头的彩票网| www.293428.com-49彩票会员登录| www.953400.com-乐彩客被骗了| www.br33.com-内蒙快三专测豹子| www.va67.com-河南福彩网官方网站| www.121432.com-刚力彩芽-| www.60086.cc-亚博彩票平台合法吗| www.822717.com-七星体彩软件下载| www.p92.xyz-易发彩-| www.525908.com-彩票中一亿收多少税| www.53851.cc-如何举报非法彩票| www.110898.com-免费下载福彩开奖| www.162116.com-时时彩压大小规律| www.44741.com-福建体彩兑奖在哪里| www.01822.com-中彩票的都是哪些人| www.760671.com-三分时时彩分析软件| www.541133.com-兼职让你下凤凰彩票| www.668437.com-88彩票专家-| www.743875.com-8888彩票cc-| www.827212.com-买彩票哪个平台好| www.893391.com-彩票中奖计算| www.976398.com-唯彩会彩票开奖下载| www.pe53.com-快三一分钟一期| www.933914.com-探探彩票托是转职吗| www.nn88.com-体彩选号app下载| www.4202.cm-湖南七彩集团| www.384120.com-体彩标语-| www.020012.com-彩彩票导航-| www.74kn.com-彩生活物业工资待遇| www.4764.cn-玩黑彩钱提现不出来| www.223853.com-竞彩比分500| www.56wa.com-彩票怎么加盟| www.258359.com-华厦彩票-| www.963384.com-手机彩票代购| www.po16.com-辽宁体育彩票| www.107448.com-凤凰彩票是人控制吗| www.243299.com-福利彩票3-| www.735567.com-彩票分析师考证| www.973517.com-火焰彩虹-| www.cai4545.com快三单双大小技巧| www.fj2.cc-时时彩正规平台注册| www.415600.cc-网上彩票赌大小单双| www.zg01.com-彩票推荐最好的办法| www.14441.cc-福彩三d彩吧图库| www.97471.com-庆阳天价彩礼| www.936505.com-彩客竞彩彩app| www.kx2.com-吉林省快三福利彩票| www.239332.com-体彩游泳夺金玩法| www.351661.com-彩票店利润怎么结算| www.602121.com-游戏厅哪个出彩票快| www.602478.com-易中彩票下载安装| www.731746.com-彩钢瓦围挡材质图片| www.869575.com-十分钟一次的彩票| www.968571.com-时时彩计划qq交流| www.av75.com-怎么样看彩票走势图| www.949602.com-佰盈彩票网站可靠吗| www.cai9996.com买贵州快三-| www.ky89.com-苹果彩票网线路入口| www.zt91.com-多乐快3是啥彩票| www.15xe.com-结婚彩礼全国排行榜| www.90mi.cc-博彩公司利记返还率| www.735973.com-玩彩票下载哪个软件| www.810814.com-玄学买彩票-| www.881436.com-伟德体彩app| www.950730.com-乐彩论坛3d交流区| www.994080.com-微彩是不是骗局| www.op8.com-s快三甘肃快三| www.mu57.com-天天中彩彩票下载| www.51873.cc-安徽福彩3中奖新闻| www.135946.com-012彩票-| www.898975.com-美团彩票机-| www.380311.com-福利七乐彩-| www.51983.cc-广西快乐双彩奇偶| www.537256.com-彩票黑点排列| www.833920.com-无嘴好彩网上哪里买| www.947939.com-体育彩票是几个号码| www.cp295.com-贵州福彩双色球| www.58936.com-8828彩票官网| www.463631.com-哪个行买彩票| www.kn88.com-佬牛足彩今日推荐| www.388.red-七星彩五行旺数| www.288559.com-竞彩真正的国内高手| www.25328.cc-美术作品绘画彩铅| www.jh68.cc-发彩网快三-| www.82ia.com-竟彩足球比分直| www.7361.shop-11选5爱彩乐山东| www.9000.xyz-乐彩网站怎么样| www.44287.cc-娱乐彩票app大全| www.05902.com-足彩网app下载| www.i35.mobi-福彩3d家彩网论坛| www.144928.com-自贡市福利彩票点| www.844887.com-体彩排三杀跨度| www.2968.in-甘肃体彩中奖新闻| www.759643.com-彩票快餐怎么玩| www.898095.com-足彩网上在哪里买药| www.963183.com-体彩顶呱刮新票| www.cai97.cc-吉林省快三走势图和| www.900972.com-皇都彩票的违规规则| www.972292.com-韩国彩票怎么查询| 通盈彩票www.848366.com| www.iq80.com-比分竞彩-| www.xz07.com-彩播直播软件| www.7209.org-彩虹六号墨冰的标志| www.60244.com-中国彩网-| www.076378.com-哪种彩票-| www.25595.cc-私彩平台排行榜| www.693046.com-上海福彩短信投注| www.29045.com-彩名堂彩票软件下载| www.72633.com-网上买福彩票可靠吗| www.609638.com-腾讯分分彩四星秘密| www.709362.com-星海彩票口碑咋样| www.vs69.com-e球彩app-| www.716815.com-蔷薇彩铅画-| www.26359.cc-中国彩是什么app| www.84698.com-彩票中大奖去哪领奖| www.19492.com-时时彩计算器在线| www.753477.com-彩票不好吗-| www.984175.com-太湖字谜3b鳳彩网| www.uv94.com-吉林快三在哪里开奖| www.194707.com-广东体彩十一选五| www.606261.com-福彩杀码计巧| www.928403.com-鸿彩网直播种子| 网易彩票www.36788w.com| www.739065.com-时时彩平刷经验| www.075038.com-福彩下一-| www.71312.com-3的彩吧助手| www.035286.com-福彩3d组三单式| www.114902.com-彩票平台银河| www.271315.com-无嘴好彩价格| www.905004.com-赢彩网江苏快三| www.332412.com-668彩票下载| www.tu54.com-q彩网购票大厅| www.82pj.cc-体育彩票余额|