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.9161.cn-杭州彩票店转让| www.779545.com-六台彩迷宫全部| www.5666.win-吉林市时时彩| www.42204.com-hk白彩网兔费大全| www.93155.cc-成都彩钢围挡价格| www.168293.com-江苏快三形态走势图| www.329387.com-彩18-| www.897036.com-八八彩票注册| www.635269.com-时彩买必出号的技术| www.810826.com-买福彩3d技巧吧| www.95001.cc-彩票中奖了怎么领钱| www.517654.com-万豪福彩苹果版| www.81108.cc-排列五福彩还是体彩| www.324242.com-和乐彩票犯法吗| www.584104.com-48彩票是什么| www.880029.com-一分快三的走势图| www.te20.com-瑞彩祥云彩票app| www.0300.org-昆山体育彩票店转让| www.837961.com-105彩票平台下载| www.9378.onlinek彩票登录-| www.586356.com-福彩3d校长独胆图| www.756522.com-彩吧图库小军第四版| www.887231.com-福彩快三图标| 乐发彩票www.223559.com| www.318182.com-新版彩计划-| www.199099.com-皇都彩票注册登录| www.089945.com-亚博体育彩票怎么样| www.261728.com-福彩内蒙快3吧| www.397154.com-我下个福利彩票| www.95262.cc-彩票内部人员微信| www.9270.org-乐彩是真的吗| www.83378.cc-买了彩票紧张不敢看| www.185124.com-福利彩票有几个彩种| www.sp93.com-直播彩票-| www.39363.cc-犀牛彩票网址| www.188604.com-彩票中什么叫屠龙| www.603583.com-山西省体彩-| www.899582.com-彩c81平台app| www.nq25.com-广西福彩大小走势图| www.095142.com-福彩3d怎样注册| www.194755.com-有人拉你玩快三| www.279028.com-体彩e球彩怎么玩| www.356633.com-酷彩吧客服-| www.428689.com-彩宝都有哪些| www.514555.com-七星彩三字定位全倒| www.587019.com-利鑫彩票平台代理| www.6438.cm-福彩网什么意思| www.060044.com-排三杀号定胆家彩网| www.hs73.com-大乐透机选新浪彩票| www.167134.com-福彩快3官网| www.260362.com-福彩快3手机下载| www.298729.com-肓蛙彩票开奖直播| www.877062.com-5d彩超机的售价| www.012636.com-南国彩票论坛海口| www.03rw.com-购彩iv安全不| www.865.in-简单彩铅画入门画| www.881480.com-一注体育彩票价格| www.58228.cc-海南七星彩规律| www.087109.com-篮球彩票分析软件| www.43566.com-苹果7彩膜-| www.028934.com-彩票官方版下载| www.971617.com-泰安体彩3亿| www.947196.com-二分彩开奖-| www.hk90.com-彩之网-| www.924545.com-彩票最高中奖纪录| 500万彩票www.98528g.com| www.595566.com-尼彩手机图片| www.cai7771.com北京快三结果走势图| www.0435.com-香港时时开彩| www.87ur.cc-彩票开奖财神网| www.8195.loan-49cc彩票集团| www.015648.com-众信彩票app| www.2351.org-今天的体彩开奖号码| www.159857.com-彩票2元网首页首页| www.69746.com-吉林快三全能下载| www.50749.com-500彩票走势图表| www.0988.xyz-彩乐网香港骞马会| www.507005.com-体彩哪台开奖直播| www.d53.club-一1福体彩开奖号码| www.727470.com-大爆奖彩票下载| www.585705.com-体彩大乐彩开奖公告| www.966839.com-福建福彩新快三玩法| www.984812.com-天天好彩下载| www.93sm.com-各种彩色背景图片| www.6703.cc-买快三怎样买和值| www.34731.com-北京快三群骗局揭秘| www.96115.cc-足彩深盘什么意思| www.128749.com-福彩快三有几种玩法| www.220113.com-500万彩票网| www.857849.com-深圳福利彩票兑奖| www.lh67.com-中彩彩票aqq| www.91.com-彩虹的图片-| www.99hd.cc-福彩3b天牛图库| www.5614.win-时时彩返奖率| www.17251.cc-彩票通网页版| www.383088.com-县城体彩刮奖| www.vr27.com-江苏快三如人工计划| www.710036.com-银行卡打彩金犯法吗| www.824080.com-新彩可以画在坯上吗| www.922595.com-足彩分析师哪个最好| www.984593.com-人人购彩票-| www.cp8687.com-购彩-| www.985080.com-快乐彩太假-| www.kb35.com-四亿彩票网址| www.25aw.com-宽甸华彩集团| www.356.pw-怎么购买外国的彩票| www.4306.org-足彩神棍区-| www.95001.cc-彩票中奖了怎么领钱| www.112572.com-返点彩票-| www.215952.com-劬力七星彩奖表| www.323560.com-福彩走势图表| www.385592.com-会员登陆9b彩票| www.957555.com-海南七星彩大师预测| 惠民彩票www.hm3988.com| www.rl3.com-正德财神彩票| www.062422.com-谁有瑞彩祥云邀请码| www.360586.com-快三半顺中奖有多高| www.zq5.cc-三分快三跨度走势图| www.6407.vip-亿盈彩票登陆| www.702125.com-如何注册爱彩乐| www.788858.com-必发足彩交易量| www.867933.com-南国体彩精彩论坛| www.926845.com-达人彩票被审核| www.986672.com-海南亿彩快3| www.c95.com-利彩-| www.62tv.com-莆田市彩票店招工| www.1465.com-包头体彩中心在哪里| www.rr76.com-河南民权彩礼价目表| www.935680.com-时时彩个位定胆推算| www.91535.cc-好彩1871蓝-| www.099083.com-网赚彩票是真的吗| www.202248.com-贵州彩票中心电话| www.zp64.com-足彩佬牛最新解盘| www.29027.com-双色球彩宝贝汇总| www.261350.com-时时彩稳赚不赔绝招| www.508307.com-彩票收藏最新动态| www.954890.com-三分跑马彩票计划| www.ov60.com-3d彩票技术博客| www.71ei.com-3d独福彩预测| www.453905.com-号百彩票上的充值| www.7855.in-买足彩顺口溜| www.110406.com-中国体彩改革| www.190120.com-安徽快三下载免费| www.225002.com-希腊10分彩-| www.196569.com-百宝彩票下载| www.346310.com-九州彩神8-| www.483692.com-福彩3d牛牛网字迷| www.545419.com-时时彩胆码技巧| www.699622.com-中国彩票的走势图| www.336549.com-9万彩票安卓版斗牛| www.438421.com-二元彩票充值帐号| www.526305.com-帮人代买彩票| www.812813.com-彩票中一万块钱兑奖| www.949076.com-福彩3d两码和差表| www.989406.com-宝马彩票是什么平台| www.9924.pw-福利彩票33-| www.078841.com-七星彩从几选到几| www.159372.com-海南福彩快三投注站| www.224255.com-中国福彩网一分快3| www.291899.com-合法体彩外围网站| www.354688.com-富彩家彩票平台好吗| www.415036.com-福彩3d胆码组合| www.347889.com-七乐彩票结果| www.525553.com-福彩3d五行技巧|