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天

知道了
彩票123现在叫什么名字 www.142502.com-彩八彩票是真是假| www.9055.org-工商银行彩票定投| www.9017.vip-乐和彩竞彩提不了现| www.wq59.com-彩中彩网-| www.jz38.com-七星彩一注得多少钱| www.690822.com-彩票网投平台黑钱| www.590508.com-体育彩票500期| www.8005.com-中班户外彩虹伞| www.38286.com-彩票工具奖金计算器| www.469768.com-买国外的足球彩票| www.103052.com-广东好彩2开奖结果| www.9609.biz-彩色耳环-| www.8421.wang-彩票网工具下载| www.786075.com-福彩大赢家高手论坛| www.911028.com-致富团队牛彩| www.977893.com-宝马彩票手机可靠吗| www.fp88.cc-宁夏福彩快三手机版| www.56tm.com-易彩-彩民福登录| www.37889.cc-海口彩票版精英| www.946993.com-江苏快三手机平台网| www.ih1.cc-浙江快乐彩12选5| www.567893.cc-乐彩计划导师| www.646446.com-足彩2串1稳赢方法| www.731687.com-好运来快三输死| www.803755.com-山西体彩11选5图| www.876077.com-京彩app官方下载| www.953936.com-竞彩足球比赛| 350彩票www.350zf.com| www.072093.com-彩票如何坐庄| www.9820.cm-江西快三11选5| www.139971.cc-贵州彩票17中奖| www.744498.com-彩虫七星彩下载安装| www.865678.com-彩票店加盟费| www.950453.com-竞彩亏盈公式| 豪彩VIPwww.hc2388.com| www.200873.com-七星彩35期开奖| www.153830.com-七星彩怎么中奖| www.53ou.com-为彩票1-| www.100053.com-豪门彩票网-| www.896122.com-足彩合买微信群| www.963722.com-网上彩票代理赚钱| 大赢家彩票www.493326.com| www.24vy.com-华章溢彩-| www.0179.cn-86552国彩平台| www.6358.in-红牛彩票官方| www.22117.com-聚名彩票-| www.616714.com-亚彩会代理注册| www.802508.com-佰万彩票平台| www.967143.com-福彩3d藏机图正版| www.h63.org-中国高频彩调整| www.7875.pw-重庆时时彩调整开奖| www.728796.com-大连体育彩票网址| www.918289.com-三分快三有几种写法| 博友彩www.951912.com| www.907321.com-江西快三30期| www.nf25.com-好彩票专业购彩助手| www.32iz.com-下载多彩宝-| www.683483.com-彩票过滤-| www.823182.com-体彩天下app江苏| www.982478.com-南粤36选7好彩一| www.af83.com-福彩三d新彩网| www.vi49.com-福彩十选五怎么玩的| www.62wf.com-西安莲湖区福彩转让| www.vp08.com-重庆时时彩连中口诀| www.16yg.com-网易彩票为什么关闭| www.023571.com-77彩票app下载| www.952217.com-app计划彩票外挂| 大玩家彩票www.919226.com| www.163211.com-福彩3今天怪字神图| www.240993.com-河北福彩快三下载| www.313481.com-招彩票代玩的群| www.381936.com-点击获取更多精彩| www.492001.com-足彩竞猜挣钱| www.575185.com-怎样玩一分快三| www.650284.com-休彩大乐诱开奖| www.692804.com-买彩网官网-| www.837164.com-乐彩33平台众飞| www.460082.com-玩时时彩想赚钱必看| www.209250.com-乐彩官网app下载| www.356642.com-员工中彩票608万| www.570896.com-七彩山鸡蛋报价| www.686507.com-中彩的那一天课文| www.881094.com-私彩平台为何不封| www.998875.com-汇彩app苹果版| www.lh22.cc-中彩彩票大小单双| www.210057.com-大发快三是国家的吗| www.296100.com-快三直选是什么意思| www.970022.com-3d牛彩字迷-| www.cp7537.com-颖彩今晚双色球预测| www.521352.com-占卜预测彩票| www.593782.com-体彩七位数中奖4位| www.661995.com-竞彩足球害死人| www.726708.com-天天彩选四最新开奖| www.802241.com-赢百万彩票app| www.871924.com-彩票每月任务| www.946990.com-宝赢彩票软件破解版| 彩票驿站www.621319.com| 众发彩票www.757zf.com| www.0270.com-彩票打负盈利| www.675292.com-体彩公益图片大全| www.791794.com-全民汇彩票秘诀| www.881985.com-01彩票违法| www.962481.com-手机福彩官网下载| 天天彩票www.106596.com| www.oc61.com-大众彩票注册送体验| www.xq96.com-七星彩历史开奖数据| www.0102.host-彩色的组词-| www.252259.com-旺彩双色球最新软件| www.317668.com-体彩新浪开奖直播| www.374957.com-海南体彩飞鱼中奖率| www.026681.com-辉煌彩票是合法的吗| www.ur73.com-鸿彩直播平台| www.ng24.com-澳客网竞彩-| www.731406.com-手机怎样买足球竞彩| www.507127.com-三彩网-| www.462393.com-中彩双色球500| www.7448.top-中国福彩慈善| www.783.live-六壬测彩票看四课| www.397802.com-赢彩彩票暂停销售| www.968137.com-宁夏福彩中心怎么走| www.022334.com-e球彩任二最划算| www.738252.com-购彩网站代打靠谱吗| www.975581.com-洛阳伊川彩礼| www.2858.biz-黑彩犯法吗-| www.101591.com-澳客竞彩足球| www.60241.com-黑彩新闻最新| www.819326.com-三的彩票经验谈| www.22fh.com-彩票大平台抢红包| www.020989.com-大马彩多多万能成绩| www.718798.com-福彩快三推荐代码| www.201768.com-吉林快三开奖时间| www.975413.com-捷豹彩票系统漏洞| www.21rd.com-288彩票下载| www.30542.com-下载瑞彩祥云| www.310153.com-体彩陕西11选5| www.496049.com-地下博彩-| www.744066.com-个人七星彩软件| www.842726.com-金博时时彩-| www.945757.com-泉州体彩中心兑奖处| 500彩票www.349277.com| www.e44.loan-湖北快三时时彩网站| www.60qc.com-足彩计划-| www.119707.com-今日体彩大乐透字谜| www.675518.com-时时彩不连挂计划| www.765547.com-彩75app-| www.860133.com-时时彩票app大全| www.926289.com-天津时彩开奖| E彩堂www.43818z.com| www.161331.com-体育彩票领奖地址| www.246646.com-湖北快三遗漏值统计| www.200594.com-上海体彩11选5| www.328600.com-福彩快3技巧论坛| www.433611.com-贵州彩票中奖公益| www.520189.com-网络彩票代理骗局| www.224922.com-澳门五分彩是真的吗| www.622999.cc-体彩大乐透网上机选| www.913900.com-彩之家官方旗舰店| 500彩票www.638477.com| www.720822.com-彩票平台软件下载| www.810477.com-官方彩16可靠吗| www.883161.com-怎么开发个黑彩平台| www.949193.com-pc彩讯加拿大| www.996040.com-数字三彩票选号绝招| www.dd31.com-人人红彩票安卓|