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.318917.com-体彩福彩图标下载| www.n36.shop-手机新浪彩票首页| www.mj02.com-查看时时彩开奖号码| www.076298.com-今日快三号码| www.225277.com-手机彩票投注站官网| www.332337.com-京彩集团能赚钱吗| www.89565.cc-深圳福彩中心网站| www.111894.com-酷彩吧合法吗| www.563588.cc-彩球提现靠谱吗| www.918182.com-体育彩票福建官网| www.988014.com-彩票51中彩怎么样| www.ak80.com-甘肃快三开奖果| www.586075.com-18彩彩票软件| www.679014.com-最新送彩金的网站| www.771550.com-时时彩后一万能3码| www.887631.com-买彩票11选五心理| www.q19.club-福彩双色球兑奖地点| www.237.in-彩票是谁控制的| www.219949.com-福彩好运快三| www.928799.com-qq福彩发号真的吗| 致富彩票www.zfcp6.com| 大赢家彩票网www.178739.com| www.sm20.com-福彩3d心得经验| www.62qk.com-天天中彩票实名不了| www.522947.com-亚投福彩网-| www.341859.com-3d和值走势图大彩| www.444105.com-福彩中心判刑| www.559321.com-尼彩手机在哪买好| www.636164.com-彩虹六号枪原型| www.dp00.com-快三平台是-| www.k36.org-彩票追号计算软件| www.51vh.com-足彩凯利指数分析| www.0260.xyz-关于彩票店转让官司| www.066721.com-重庆市福彩官网| www.200730.com-福彩昨天开奖的号码| www.511255.com-用彩虹起一个网名| www.963129.com-彩色混凝土压花路面| www.473666.com-精英网彩票与你同行| www.927438.com-韩国快三助手下载| www.996639.com-福利彩票最新走势图| www.by22.com-内蒙古福彩开奖| www.203456.com-福彩5d怎么选| www.681560.com-豪彩怎么下载| www.791372.com-电竞彩票下注app| www.39mo.com-18147期足彩| www.5618.biz-彩虹六号怎么到国服| www.811197.com-广西快三高手计划群| www.907638.com-彩票诈骗报警| www.972437.com-彩铅画图片简单| www.xa5.com-快三助手软件| www.251777.com-2元彩票软件| www.382313.com-华阳创美彩票合法吗| www.517794.com-七乐彩开机号码查询| www.219849.com-福建快三75推荐| www.302982.com-977彩票ios-| www.228778.com-贵烟好彩-| www.311221.com-澳客彩票客户端苹果| www.381351.com-7乐彩开奖今天今天| www.857058.com-五分钟快三开奖查询| www.918911.com-哪个时时彩平台靠谱| www.ta24.com-上海11选5爱彩乐| www.87pn.com-现招聘彩票代玩人员| www.89834.com-高频彩票销量| www.253551.com-彩之家app-| www.345082.com-酷玩手游彩票合法| www.728001.com-名人彩票登录| www.838696.com-盘球网竞彩篮球推荐| www.61193.com-173彩票-| www.102215.com-快彩11选5开奖| www.20vm.com-爬虫彩票-| www.38iq.com-华夏彩票网站多少| www.1488.net-彩博888国际| www.8856.in-彩狮-| www.55093.com-彩票app分析工具| www.431541.com-彩无敌手机版官网| www.535395.com-上海买彩票一夜暴富| www.590161.com-关于七星彩的软件| www.673176.com-福彩投注站号查询| www.750436.com-豪彩vip跑路| www.812655.com-西赵口彩吧晚报另版| www.882928.com-网上买彩票亏了| www.969362.com-德国彩虹计划| www.9926.cn-解福彩3b太湖字迷| www.230406.com-快三湖北-| www.318754.com-福彩助手下载安装| www.5554.vip-福彩3d技术论坛| www.29902.com-奥客彩网手机版| www.81184.com-外围彩票源码| www.054776.com-彩色无遮挡漫画全集| www.234533.com-福彩中国龙888| www.371708.com-中国足彩馆露露女主| www.550608.com-彩民彩票和中奖彩票| www.700490.com-如何破解云发购快三| www.800162.com-福利彩票开奖结果l| www.918746.com-五分快三必出码技巧| www.996709.com-黑龙江彩票网| www.4702.vip-彩漂怎么用方法| www.48299.cc-竞彩应用-| www.009062.com-178彩票网可靠吗| www.707805.com-3d多彩网字谜总汇| www.858729.com-今日福彩开奖号| www.cp3727.com-福利彩8江苏快三| www.437070.com-彩票谜-| www.554838.com-七星彩组合排列工具| www.632820.com-极速3d彩票有假吗| www.689701.com-腾讯分分彩必赢技巧| www.761712.com-彩站之家-| www.819900.com-苹果买彩票软件| www.877849.com-彩票小说-| www.952874.com-爱波网竞彩比分直播| 云博彩票www.11774.cc| www.cp8553.com-今日河北快三走势图| www.972197.com-印尼五分彩开奖网站| www.57798.com-澳门博彩现金网| www.899113.com-买足彩让球什么意思| www.964126.com-福彩3d稳定和差| 500彩票网www.97655t.com| www.gq88.cc-广东好彩开奖结果| www.wl21.cc-玩彩是什么意思| www.974282.com-彩票一分-| www.ks10.com-彩票冷热号规律| www.c87.vip-中彩乐网站-| www.59uf.com-体彩机额度有限制嘛| www.v35.net-玩时时彩用哪个软件| www.459.in-彩宝贝杀号定胆3d| www.72344.com-彩票加倍计算器| www.049103.com-k8彩票app下载| www.4174.biz-七位数体彩中奖分配| www.dp1.cc-福利彩票什么赌| www.100027.com-彩票首充送彩金| www.421.org-江苏不再彩快3| www.9796.in-(瑞彩祥云)-| www.73510.com-福彩19083-| www.020332.com-上海彩票-| www.46346.cc-买彩票提成多少| www.003450.com-菲律宾博彩平台| www.062226.com-万彩网是正规网站吗| www.127846.com-彩虹哥卖号可信吗| www.206201.com-快彩网是真的吗骗局| www.285018.com-彩票店开在哪里最好| www.356313.com-赠送他人彩票中奖| www.891986.com-中国体育彩-| www.977240.com-濮阳彩礼新规定| www.7544.cc-只赚佣金的竞彩玩法| www.597015.com-金祥彩票网开奖直播| www.712855.com-腾讯分分彩独胆方法| www.880498.com-网彩怎么稳赚不赔| www.bk15.com-买高频彩票的技巧| www.w07.cn-彩票站宣传语| www.63zd.com-七星彩梦册查码图| www.49207.com-中国福彩15选5| www.89241.com-福彩开奖结果23号| www.25qb.com-667彩票平台| www.43323.com-福彩3个位必中规律| www.076658.com-彩票需要几位数| www.131677.com-河南体彩中心银行| www.202244.com-贵州彩票中奖者| www.892344.com-福彩体彩缩水程序| www.957489.com-体彩排列五走势| 幸运彩票www.444165.com| www.ig31.com-国家认可彩票app| www.es59.com-分分中彩票手机版| www.r14.bid-体育彩票数字组合| www.60kj.com-福彩3d蓝精灵地图|