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天

知道了
9彩注册 www.74tl.com-97彩票是骗局吗| www.114027.com-香港快三计划合法吗| www.418632.com-ig传统彩官网| www.0088.tm-手机下载福利彩票网| www.637776.com-懂球帝彩票推荐| www.940062.com-最新彩票33安卓版| www.xd15.com-快三开奖下载安装| www.337002.com-广西快三淘宝| www.510202.com-彩霸王三肖主六码| www.601401.com-98彩票网-| www.250528.com-中彩彩票手机app| www.64zq.com-全天彩票计划网址| www.cai949.com-爱彩乐北京快三| www.794840.com-新彩吧图库大全| www.sq85.com-福彩林竹决杀一码| www.180278.com-哪种彩票一分钟一开| www.617408.com-彩票开机号下载| 500彩票www.566677.com| www.797058.com-双色球彩票多久过期| www.472323.com-重生之彩票大亨| www.678955.com-自学制作彩票app| www.254084.com-快3福彩好中号码| www.233348.com-买彩票app哪个好| www.463633.com-万豪彩票是合法的吗| www.zd14.com-7乐彩推荐号码| www.111618.com-397彩票-| www.106189.com-90年代彩票-| www.560054.com-河南休彩彩481| www.303299.com-7彩国际是干嘛的| www.631950.com-七彩云南标志| www.872620.com-湖南体彩网官网| www.sc9.com-有人拉你玩快三| www.091228.com-百胜彩票是什么网址| www.228186.com-广西快三彩经网| www.73dk.com-金口诀3d彩票预测| www.051068.com-中国体育彩票网开奖| www.362389.com-彩虹的人生励志句子| www.629892.com-彩65彩票-| www.735747.com-五分快三违法吗| www.822877.com-体育彩大乐透| www.897388.com-快三什么是红号| www.977903.com-开彩票店选址技巧| www.cp2787.com-福彩五分快三兼职| www.166369.com-内蒙古快三开奖结果| www.33595.cc-足彩19020期| www.890726.com-合买彩票广告语| www.990768.com-如何做手机彩票代理| www.mp46.com-吉林快三有多少注| www.14vv.com-3d福彩怪字-| www.86kt.com-alcp阿狸彩票| www.3357.in-彩乐园2官网| www.9730.in-彩票诈骗举报电话是| www.2mc.cc-身边真有中彩票的人| www.66vv.cc-杏耀彩票挂机软件| www.0400.win-好运来彩票下载安装| www.801691.com-上海福彩双网| www.880524.com-7乐彩走势图| www.024940.com-福体彩开奖公告| www.77cy.com-有极速赛车的彩票| www.768321.com-爱乐彩十一选五云南| www.22600.cc-大学生玩彩票输钱| www.85633.cc-3d家彩网开机号是| www.8358.in-14个号码的彩票| www.254729.com-安徽快三开始时间| www.tg33.com-河北快三人工计划| www.936702.com-自助彩票机厂家| www.759532.com-福利彩票票样| www.835666.com-顺丰丰彩怎么样| www.909951.com-彩界-| www.979402.com-广西福彩票开奖| www.ib31.com-安徽彩票领奖地址| www.20bt.com-彩从哪个网站买| www.976.red-七星彩兑奖方式地点| www.03vj.com-起点彩票app| www.120726.com-彩投注站app| www.220973.com-彩票助赢软件计划| www.288512.com-时时彩刷流水怎么刷| www.391044.com-湖北有哪些彩票网站| www.504167.com-彩排和踩台的区别| www.576447.com-一分快三彩票倍数表| www.654585.com-星期二体彩开什么| www.571285.com-湖北彩票榜-| www.661657.com-竞彩足球中奖率高吗| www.741368.com-28彩pc软件-| www.602602.cc-四季一分彩登录j| www.700832.com-e赢彩平台-| www.814854.com-邯郸彩票案-| www.974744.com-彩234彩票-| www.45qt.com-红神体彩关闭| www.0663.ren-齐鲁彩票三十选七| www.833969.com-好彩绿多少钱一条| www.905331.com-yy彩票正规吗| www.973025.com-彩宝贝网免费预测| www.ec12.com-福彩平台刷流水兼职| www.xk00.com-提前预测吉林快三| www.19ua.com-老公经常借钱买彩票| www.9081.vip-彩之家是骗人的吗| www.53538.com-体育彩票刮刮乐秘诀| www.026401.com-私彩拉会员-| www.125915.com-彩客彩票客户端苹果| www.300365.cc-乐和彩开奖号码| www.678564.com-彩之网开奖结果| www.696830.com-乐优炫彩天天红单| www.829677.com-时彩彩app-| www.941787.com-湖北快三开结果| 大赢家彩票平台www.711895.com| www.57895.com-乐艺彩票-| www.050407.com-天天买彩票下载| www.036.in-唐龙彩图版-| www.600956.com-为什么富人不买彩票| www.621653.com-500彩票开奖公告| www.718281.com-福彩快三害了多少人| www.784878.com-彩6彩票手机客户端| www.848850.com-福彩即开型彩票中奖| www.914199.com-数据分析快三计划| www.980012.com-2018彩票app| www.kd1.com-快三开奖结果一定| www.906133.com-足球竞彩比分结果| www.962453.com-湖南体彩app| 彩乐乐www.3005w.com| www.681531.com-辽宁省福彩官方网站| www.802231.com-彩票站低价出兑| www.872416.com-3d彩吧专业助手| www.981438.com-足彩任选九开奖结果| www.dp20.com-快彩王软件下载| www.s50.org-福彩开奖查讯| www.845.tv-七星彩特区-| www.08727.com-大信彩票8-| www.68377.cc-福彩3d很难中| www.069076.com-七彩彩票-| www.144210.com-北京足彩返还率多少| www.ml86.com-时时彩app哪个好| www.815797.com-即时开彩官方下载| www.941028.com-天津体育彩票怎么玩| www.623342.com-sk国际彩票下载| www.41726.com-福彩快三能赢钱吗| www.019270.com-我的彩票中奖查询| www.112461.com-体彩排列三字谜总汇| www.551567.com-联众彩票怎么注销| www.94733.com-竞彩足球平均优化| www.598100.com-彩票中奖怎么收税| www.995868.com-足彩310报手机版| www.19iu.com-泰安体彩网-| www.655043.com-溢彩的意思-| www.758520.com-彩薇花美容霜| www.974911.com-安微快三开奖果| www.093365.com-彩色混凝土的颜色| www.716289.com-彩票模拟选号器软件| www.867711.com-廉江好彩哥规律长居| www.971074.com-幸运彩app安卓版| 500彩票www.526121.com| www.888842.cc-鹤壁彩票中奖| www.302083.com-三分快三网-| www.979803.com-二元彩票软件下载| www.fz39.com-天天中彩票真的吗| www.534460.cc-幸运七星彩开奖| www.51ri.com-买彩票最好买什么| www.7415.vip-色彩三要素是什么| www.255787.com-福利彩票20选5图| www.732623.com-彩票驿站首页| www.64599.cc-彩票推荐-| www.913229.com-有没有彩客彩票的托| www.827597.com-排三杀码定胆彩经| www.895452.com-福彩3d历史-|