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天

知道了
亚洲28 www.mp28.com-吉林快三剖析数值定| www.689946.com-腾讯5分彩免费计划| www.918577.com-苹果手机上彩票软件| www.603353.com-韩国德国2比0彩票| www.740036.com-福彩历届主任| www.840621.com-利民彩票网交流区| www.932522.com-众信彩票靠谱吗| www.cp1230.com-湖北快三单期计划| www.ww50.cc-微彩吧电脑版| www.227342.com-彩八彩票168| www.819918.com-福彩福彩3d-| www.9106.shop-七乐彩今晚开奖金额| www.7219.com-请今晚七乐彩开奖| www.427687.com-邢台体育彩票大奖| www.4772.top-福利彩有没有规律| www.5533.top-附近卖体彩-| www.bn83.com-11选五购彩-| www.h85.com-福彩3d攻略书籍| www.8am.cc-彩神通免费版下载| www.355782.com-开彩票店要纳税吗| www.454308.com-十大博彩公司的网址| www.564922.com-吉林快三怎么开群| www.649827.com-彩虹跑玩法-| www.732038.com-百福彩-| www.819199.com-广西福彩投诉电话| www.895429.com-中体华彩彩票合法吗| www.979827.com-恒大彩票app下载| www.dt6.com-十分快三计划| www.508885.com-福利彩票的形式| www.uf.com-河北快三开走势图| www.956757.com-彩票助赢软件好用吗| www.cp096.com-喜乐彩走势图| www.mv98.com-分分彩万能公式| www.8vh.com-江苏体彩助手app| www.80ja.com-北京北控体彩| www.1972.hk-河南蒂彩快三| www.7457.xyz-体彩审批手续| www.323409.com-南国七星彩头尾论坛| www.40439.com-彩票今晚开奖号| www.139303.com-笑口常开好彩自然来| www.533557.com-福彩七乐彩出球顺序| www.162439.com-搜索福彩图迷总汇| www.888889.com-三十五选七福利彩票| www.977004.com-河南结婚彩礼新规定| www.cv52.com-拼搏在线彩票开奖| www.405798.com-50707巨峰彩票| www.545080.com-人人爱彩票软件下载| www.663748.com-体彩篮球预测| www.788611.com-五分时时彩计划版| www.3353.in-彩色的中国教案| www.9379.loan-tt彩稳定版app| www.11276.com-烟台福彩中奖信息| www.948742.com-手机万彩吧-| www.890354.com-彩票正规平台在哪找| www.cp1200.com-江苏快三计划手机版| www.189694.com-甘肃快三号码遗漏表| www.287513.com-优彩区44oo44| www.604161.com-竞彩5258官网| www.802937.com-中国彩票奖金排名| www.897246.com-澳洲彩票怎么买| 3668彩票www.3668t.com| www.xg93.com-荣誉彩票app| www.22926.cc-河南彩票大奖| www.0180.biz-深国彩-| www.83868.com-镇上可以开彩票站吗| www.183860.com-北京快三遗漏走势图| www.341654.com-东北快三微信群| www.477171.com-2019年福彩时间| www.625327.com-大乐透新浪爱彩| www.798635.com-c彩16安卓版| www.951157.com-河北快3走势图彩| www.416397.com-东贝彩虹冰淇淋机| www.878456.com-网彩网站哪个好| www.984720.com-福利彩8软件| www.sz13.com-体彩7星彩几点开奖| www.1968.top-时时彩代打骗局贴吧| www.267267.com-盛兴彩票网-| www.359364.com-体彩超级大乐透微博| www.458559.com-e球彩中奖秘诀| www.033996.com-新快三遗漏数据| www.222554.com-能买彩票的正规网站| www.890.cm-利用时时彩诈骗案例| www.52662.cc-好彩门户网站| www.027084.com-5分彩个位怎样选号| www.878953.com-极速赛车彩票小技巧| www.999999.com-彩民村大乐透走势图| www.sj86.com-时时彩网app| www.5761.biz-福彩12生肖走势图| www.082291.com-重庆时时彩官方玩法| www.188283.com-东北人玩彩-| www.231920.com-多彩网三地太湖| www.v30.org-三地牛彩网摘采网| www.59gs.com-七星彩梦册解梦书| www.1455.net-彩票北京pk10| www.584755.com-18k彩金会掉色吗| www.90bh.com-dota2电竞博彩| www.457430.com-中彩票的诗-| www.538453.com-大众彩票网骗局揭秘| www.794654.com-体育彩票微信号| www.484797.com-正好彩票网打不开| www.99173.com-七乐彩中奖计算| www.873753.com-竞彩310什么意思| www.272221.com-投诉博牛彩票| www.361813.com-彩票快乐十分音乐| www.470250.com-国家对境外网络彩票| www.570850.com-上海福彩15选5| www.656337.com-融彩网彩票-| www.778803.com-爱彩通有手机版吗| www.867611.com-廉江七星彩高手论坛| www.954163.com-福彩实票-| 幸运彩票www.553938.com| www.878993.com-澳门福彩快三| www.990829.com-彩票挂机软件免费| www.10vz.com-彩票苹果版500| www.91756.com-福彩23选5开奖| www.218073.com-旧版彩神争争霸| www.304822.com-98彩票app-| www.385230.com-充值话费上分的博彩| www.450017.com-华彩二级-| www.516792.com-彩票软件破解器| www.417735.com-彩53app官网| www.199394.com-七彩奖今晚开奖结果| www.788612.com-乐彩网友论坛| www.870972.com-南宁福彩兑奖中心| www.940451.com-3d中彩网字谜| www.983804.com-七星彩彩版下载专区| www.cp8258.com-江苏福彩双色球开奖| www.85709.com-怎么查找微信彩票| www.22661.com-网络购彩恢复了吗| www.969133.com-网易彩票资讯首互| www.019502.com-福彩助手app开发| www.jh68.cc-发彩网快三-| www.56572.cc-彩票53网-| www.985004.com-728彩票网站| www.wu42.com-彩票开奖七星彩查询| www.871603.com-中彩娱乐下载手机版| www.61ra.com-最棒的彩票软件开发| www.879508.com-花生彩票是骗局吗| www.885634.com-排列5走势图彩宝网| www.477602.com-彩神通免费版双色球| www.3903.com-福彩3d和尾技巧| www.918.tv-玩彩票怎么总是输| www.30138.cc-体彩网点编号| www.407338.com-彩慧堂美白片| www.256505.com-978彩票app-| www.22173.com-天天福彩山东经济| www.5ml.com-啥是玩彩-| www.325281.com-彩票太湖字谜41| www.582325.com-冠彩彩票-| www.644325.com-彩票之王送彩金下载| www.qg77.cc-快三打和值中奖| www.976854.com-济南彩礼-| www.ml1.com-如何查福利彩票开奖| www.957426.com-王牌彩票网-| 鑫亿彩www.038079.com| www.493423.com-彩票有效期是多久| www.554255.cc-宣传体彩标语| www.967055.com-彩票人工计划微信群| 500彩票www.51515h.com| www.986706.com-彩客足球胜平负| www.a24.com-广西快三网易彩票| www.160739.com-三d福利彩票走势| 500彩票www.52072m.com| www.607198.com-彩票3d试机号|