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天

知道了
彩01彩票 www.338456.com-预测七乐彩-| www.488288.com-彩琳95-| www.866091.com-网彩开售-| www.hx77.com-快三开对子的概率| www.372544.com-江苏省体彩排列三| www.644735.com-九千万彩票是真的吗| www.860383.com-2019彩票开奖| www.991480.com-彩民之家首页| www.2252.cn-大中华平台彩票| www.449176.com-投资彩票站怎么提成| www.561058.com-彩票双色球500期| www.661971.com-竞彩足球截止时间| www.762861.com-8k彩票平台代理| www.872423.com-贵阳福彩中心地址| www.949853.com-下载大彩网-| 500万彩票www.98528f.com| www.244861.com-万博竞彩app| www.332509.com-彩票注册即送礼金| www.446083.com-易语言彩票功能模块| www.554010.com-熊猫时时彩软件| www.628705.com-好彩又一鲜酒家| www.700522.com-玩彩输钱的人怎么办| www.777218.cc-吉林破获快三赌| www.864433.com-178彩票真假| www.938992.com-澳客网彩票pc| www.992540.com-158彩票网-| www.dj39.cc-美国彩票玩法| www.va13.com-贵州福彩快三和尾| www.16wz.com-虎扑篮彩神棍论坛| www.776877.com-福利彩票怎么福利的| www.443799.com-今天彩吧3d第二版| www.7497.pw-够力七彩长条奖表| www.3588.vip-特彩吧高手网旧版| www.158209.com-黑龙江体彩网站| www.249122.com-腾讯彩票下载| www.225572.com-探探上的帅哥彩票托| www.jg50.com-分分快三是真的吗| www.001766.com-彩票可以投注平台| www.254396.com-三分彩官网开奖结果| 网易彩票www.07163q.com| www.928158.com-彩票赌注那个违法吗| www.jb.com-大发彩票北京快3| www.12510.cc-105彩漂网-| www.61193.com-173彩票-| www.kt71.com-彩票快三群注册| www.6672.com-双色球彩票几位数字| www.27774.cc-福利彩票红区中两个| www.67638.com-公务员买彩票中奖| www.012684.com-海南七星彩开奖图纸| www.369801.com-旺角彩皇彩开奖结果| www.534409.cc-分分彩压大就输| www.660894.com-11位彩票-| www.782933.com-甘肃省快三开奖号| www.964409.com-官方福彩幸运快| www.74iz.com-环球彩票介绍| www.464708.com-基诺型彩票高频吗| www.009888.cc-快三骰子怎样稳赚| www.7595.loan-百胜pc彩票网| www.56745.com-唐龙说彩趋势分析| www.018192.com-漫画星彩无惨| www.576262.com-福彩大乐透中奖规则| www.389762.com-体育彩票的区别在哪| www.113415.com-500彩票网登录| www.665834.com-新加坡彩票开彩网址| www.827908.com-老彩民网站有信誉吗| www.47pv.com-刚力彩芽炫富| www.448378.com-彩票专业计划软件| www.01358.com-国彩2元网-| www.964264.com-竞彩足球网-| www.cc5.cc-立彩下载-| www.ux05.com-福彩今天独胆预测| www.1456.xyz-圣经中云彩的含义| www.45855.cc-大中华彩票集团| www.03448.com-彩票上瘾能戒掉吗| www.26tk.com-杨哥说彩双色球预测| www.549090.com-网络彩票售彩| www.607639.com-北京多乐彩怎么投| www.668658.com-彩票冷热怎么分析| www.741813.com-南京福彩中心在哪里| www.7577.top-快彩网址2632| www.984448.com-福彩3+d走试图| www.fd36.com-福彩十分钟开奖结果| www.wn20.com-鸿运彩票贴吧| www.25uq.com-时时彩压大小稳赢| www.94qr.com-体彩多少号码| www.2018.website即墨福彩中心电话| www.655988.com-彩票软件编写| www.632041.com-七彩虹网驰2060| www.76gw.com-福彩七乐彩历史开奖| www.352593.com-有实力的黑彩平台| www.456444.cc-蛋彩开奖-| www.36797.cc-28彩票走势怎么看| www.am09.com-在手机上购七星彩| www.99302.com-澳洲三分彩计划网站| www.126551.com-湖北体彩换球案| www.qk33.com-福彩3今天开奖| www.880575.com-大师彩票平台| www.598446.com-七星彩开奖站地址| www.999839.com-福彩排列五玩法| www.89639.com-广州彩妆厂家| www.945038.com-乐发彩票-| www.110107.com-七星彩随机选号5注| www.hs03.cc-彩之家app下载| www.78ui.com-新台湾5分彩| www.872546.com-云南体彩官方网站| www.cp317.com-福建快三中奖号码表| www.kb61.com-中国福利彩票分析| www.245651.com-精彩十分开奖查询| www.pu0.com-淘宝买彩票怎么买| www.161772.com-美国纽约快三查询| www.1233.red-旭辉研彩在哪下载| www.22356.com-湖北结婚彩礼多少钱| www.037472.com-信彩计划软件| www.932969.com-各省快三开奖查询| www.ca7.com-福彩快3软件下载| www.51336.cc-网络彩票3倍投法| www.00027.cc-福彩3d宝典图| www.65kp.com-彩票今日开奖号码| www.258738.com-彩票平台送38| www.417666.com-体彩店几点关门| www.527870.com-彩之家网站怎么样| www.58vo.com-500彩计划网站| www.2703.wang-百度乐彩走势图表| www.221072.com-体彩开奖开结果| www.293653.com-快三押大小规律| www.369966.cc-酷彩铸铁锅菜谱| www.579804.com-老彩票开奖官方网站| www.673098.com-因网赌高频彩输死了| www.744129.com-福利彩票有人中过吗| www.805647.com-1998年福利彩票| www.408283.com-怎么网上买七星彩| www.559210.com-手机牛彩采摘网| www.622978.cc-福利彩票开奖70| www.787754.com-彩客化学创始人| www.859633.com-福彩6十1开奖号码| www.967262.com-福彩cp蛋蛋-| 500彩票www.646377.com| www.025923.com-湖南刘雪龙黑彩| www.7415.pw-色彩三要素指的是指| www.714497.com-7728彩票app| www.932265.com-博荣彩票下载| www.203278.com-中彩票故事-| www.947891.com-网上正规购彩平台| www.cp166.cc-湖北快三害人| www.196982.com-app计划彩票| 大中华彩票www.dzh0.com| www.673257.com-乐彩双色球静态版| www.743907.com-629彩票-| www.804216.com-体育彩票几点上班| www.870804.com-好彩l-| www.96rr.com-铜雀台彩票app| www.838656.com-pc蛋蛋是彩票吗| 大赢家彩票平台www.760169.com| www.22254.com-时时彩彩票网址大全| www.640462.com-新浪爱彩是否合法| www.757882.com-佰翔彩票怎么样| www.6604.vip-彩票视频直播| www.595568.com-鑫彩网有漏洞| www.960846.com-933c1彩票下载| www.pq9.com-韩国快三开奖| www.uk87.com-008论坛彩票| www.28vm.com-彩票智能分析系统| www.816848.com-时时彩最高冷号记录| www.902668.com-黑彩怎么代理|