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.639622.com-中国竞彩网怎样注册| www.8606.top-百宝彩电子图下载| www.lv35.com-大发时时彩作弊| www.9349.vip-中彩票几率高吗| www.018422.com-彩73官方-| www.091106.com-易赢彩票app| www.088163.com-华夏彩票4950| www.934581.com-天天赢彩票平台代理| www.33mw.com-体彩排列五卖到几点| www.5295.xyz-永盛国际手机彩票网| www.54297.com-中华娱乐彩票app| www.816539.com-周六开奖的彩票| www.762250.com-重庆时时彩v| www.366319.com-可水溶性彩铅牌子图| www.04533.cc-体彩微信-| www.048879.com-中国福利彩票排列五| www.84oa.com-北京新彩华章| www.32214.com-彩票最佳网投平台| www.360528.com-500购彩是真的吗| www.382308.com-福利彩票预测下载| www.285532.com-发彩网app平台| www.339677.com-彩票中奖可靠吗| www.43xs.com-你太出彩了什么意思| www.9609.biz-彩色耳环-| www.280430.com-时时彩必出组三规律| www.689528.com-七乐彩中奖几率| www.131652.com-河南中奖彩票| www.375353.com-中彩网真的赚钱吗| www.579713.com-博乐彩票平台| www.670273.com-杏彩黑销钱骗人| www.745452.com-腾讯五分彩下载安卓| www.206367.com-易彩票合法吗| www.981137.com-彩票合买代购软件| www.89552.cc-快乐彩网站-| www.018069.com-71彩是正规的么| www.559468.com-体彩大乐透7位数| www.611821.com-9b彩票官网-| www.699609.com-瑞彩祥云幸运快3群| www.98181.cc-体彩6?1-| www.84917.com-七星彩图表-| www.186664.com-快三多少注限号| www.400307.com-沈阳体彩11选5| www.62170.com-世界杯彩票怎么买法| www.385829.com-福利彩票会过期吗| www.560189.com-体育彩票三d试机号| www.623912.com-乐彩购下载-| www.693785.com-体育彩票买几个号码| www.771764.com-重庆时时彩所有网站| www.984189.com-福彩3d凤彩网| www.508318.com-奥运场馆彩票收藏| www.91838.cc-好彩一八的生肖| www.555963.com-彩票快乐三-| www.cai5288.com甘肃快三最新走势图| www.717065.com-彩铅和线描哪个先学| www.007345.com-开体彩店装修谁来装| www.815671.com-体育彩票排列7| www.995875.com-80彩票合法吗| www.x24.org-5分彩定位胆| www.54481.com-彩票群名称-| www.77nz.com-福彩3d视频-| www.5834.biz-吉林体彩网爱彩乐| www.44461.cc-创富彩票可靠| www.166919.com-江苏快三中奖规则| www.471518.com-不思议迷宫彩蛋整理| www.954989.com-黑客找彩票漏洞| 梦想彩票www.33112q.com| www.725605.com-金达彩票是合法的吗| www.948230.com-手机版二四六好彩网| 凤凰彩票www.www.fh1188.com| www.101913.com-彩票不输本金| www.563549.com-q彩害人-| www.771738.com-体彩店转让合同| www.77jc.cc-r8国际彩票如何玩| www.664374.com-兴博彩票qq群| www.85um.com-中国福利彩票站盈利| www.1374.vip-福利彩票系统案| www.897915.com-足彩网上哪里可以买| www.966275.com-双数开彩是什么数字| www.cai2122.com怎样玩快三-| www.974085.com-一分时时彩是哪里的| www.886390.com-登陆好运来彩票| www.612378.com-南京雪中彩影和米兰| www.513962.com-2019体彩新玩法| www.319225.com-海南七星彩开奖直播| www.455424.com-资料大全4s彩票| www.242345.com-中国福彩网官方网| www.000921.com-5分快三开挂软件| www.099710.com-大彩鲸时时彩助手| www.195785.com-江西福彩中心电话| www.269922.com-彩票送58-| www.785527.com-彩票注册金-| www.312289.com-怎么拉客户玩彩票| www.bm86.com-刷彩金的骗局| www.427267.com-足彩在哪个app买| www.071177.com-国家级足彩培训师| www.695068.com-唯彩买量分布| www.518051.com-帝皇彩票网站| www.586324.com-彩票机设备多少钱| www.oc99.com-中国体彩网走势图| www.626128.com-体彩浙江风采| www.729229.com-中国福利彩票新3d| www.811095.com-91竞彩之家-| www.901546.com-k8彩票下载-| www.977406.com-安徽灵璧彩礼价格表| www.fz68.cc-河北省福彩排列7| www.681.cm-百事彩票网-| www.882419.com-易彩票网站-| www.675761.com-中国体育彩票报纸| www.914956.com-优信彩票登录邀请码| www.cai111.cc-福彩5d-| www.057115.com-淘彩网app下载| www.485824.com-1288彩网合法吗| www.722923.com-xy1688彩票-| www.792701.com-西安福彩店转让| www.869021.com-七星彩选号超准方法| www.957503.com-乐透啦彩票官网| www.cp197.cc-大发快三登录平台| www.kr57.com-乐飞彩票app| www.1946.cm-梦见彩票中大奖预兆| www.698040.com-浙江体彩中心电话| www.776766.com-彩宝宝官方-| www.023513.com-彩民乐彩报-| www.128813.com-排三体彩双双字谜| www.630628.com-乐彩网三地开奖结果| www.696377.com-刮刮彩票怎样破解| www.766189.com-风发彩票qq-| www.xz2.com-上海快三一定牛今天| www.of67.com-福州体彩11选五| www.v30.top-贵州体彩中心多少喽| www.607083.com-福彩利润是多少| www.995294.com-五四北福彩-| www.041485.com-足球竞彩兑奖规则| www.029917.com-福彩快三苹果版| www.187821.com-澳门六星彩网站| www.7337.in-彩虹六号真实事件| www.35134.com-数字型彩票的玩法| www.59590.cc-快三专家88彩吧| www.356287.com-彩票促销活动| www.753211.com-9d彩票外挂-| www.77785.com-新浪足彩网足彩网| www.66978.cc-菏泽福彩咨询电话| www.289362.com-七乐彩现场开奖结果| www.62qw.com-福利彩快乐十分奖金| www.1198.cc-七星彩组合排列工具| www.95017.com-刷福彩流水单是什么| www.069112.com-彩神大发最高邀请码| www.091781.com-大联盟彩票取款失败| www.176561.com-福彩快三技巧规律| www.255036.com-2019送彩金网站| www.428675.com-最近的福彩销售点| www.en64.com-中彩快三-| www.07xg.com-体彩p5出号走势图| www.098404.com-中彩股票-| www.lt85.com-微彩是骗局吗| www.164629.com-彩票坊平台违法吗| www.163063.com-福彩排列三试机号码| www.qy96.com-玩脑者分分彩| www.536321.com-美国彩票领取方式| www.614860.com-3a彩票下载-| www.893714.com-安徽快三和值推荐号| www.998759.com-明发彩票主页| www.jq07.com-快三是不是有人控制| www.v76.cc-江苏快三微信计划群| www.019.loan-彩授三天计划|