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.165382.com-安徽福彩网几点开奖| www.1107.com-手机足彩怎么买| www.lh96.com-好彩246-| www.996706.com-龙江体彩票-| www.944449.cc-中国体育彩票赚钱吗| www.cai5577.com安微快三走势图| www.995582.com-北单好还是竞彩好| www.yu74.com-甘肃体彩排五| www.bg80.com-辉煌彩票app| www.172277.com-江西多乐彩开奖结果| www.jo2.com-河南快三遗漏查询| www.i80.org-吉利快三开奖结果| www.83xp.com-福彩太湖脑筋急转弯| www.2046.hk-彩票网站定制| www.7250.cc-彩虹四无人机| www.as27.com-安徽快三和尾走势图| www.186798.com-极速时时彩太假了| www.303001.com-广东好彩36开奖| www.581233.com-大通彩票入口| www.357636.com-中国福彩网官网下载| www.436204.com-福彩三地跨度表| www.89pz.cc-怎么做个博彩| www.253322.com-分分时时彩计划软件| www.343178.com-山东体育彩票下载| www.338374.com-彩票腐1600亿| www.440813.com-海南彩票193期| www.587913.com-施乐彩色复印机耗材| www.672373.com-大乐透在线彩宝网| www.xd22.com-3d彩票见0不出0| www.37wb.com-北京七星彩票| www.505194.com-973彩票-| www.606390.com-q彩链接-| www.932973.com-众信彩票app下载| www.fb49.com-彩票辅助软件下载| www.849294.com-竟彩比分预测| www.8886.wang-福彩十二生肖图片| www.sz96.com-国彩彩票官方网站| www.334128.com-玩私彩-| www.233895.com-福彩3d字图谜汇总| www.7938.vip-彩墨染卡-| www.158459.com-足彩北单是什么| www.427163.com-投资时时彩靠谱吗| www.569787.com-体彩是真的吗| www.1480.com-精彩中国说林志玲| www.269192.com-手机网上赚钱送彩金| www.2349.vip-福利3彩票-| www.002215.com-竞彩猫陆慧-| www.313072.com-体彩排列5开奖查询| www.083.biz-易玩567彩票官网| www.3355.vip-app彩乐汇下载| www.411260.com-澳洲彩票开奖app| www.62284.com-彩吧彩票破解软件| www.773632.com-滴滴彩票送28平台| www.821139.com-福彩3d大兵全版| www.33026.com-查福彩3b开奖结果| www.24267.com-福彩3d÷规律| www.78078.cc-中国福彩3d今天图| www.95.hk-红牛福利彩票双色球| www.954598.com-彩票官方网站下载| www.ls3.cc-福彩快三有假吗| www.wa45.com-甘肃十一选五时时彩| www.30pa.com-福利彩票山3g| www.513.site-福彩3d精准彩票群| www.564949.com-亚彩app-| www.666103.com-七星彩万字号奖图| www.751643.com-彩票程序出售| www.822165.com-购彩助手软件手机版| www.896330.com-七星彩开奖视频造假| www.956868.com-欧洲彩票5加2| 中国福利彩票www.33588w.com| www.56815.cc-时时彩前三杀一码| www.59858.com-东升彩票平台怎么样| www.023472.com-七星规律百姓彩票网| www.258738.com-彩票平台送38| www.662512.com-福彩3d在哪购买| www.710195.com-首存18送58彩金| www.900783.com-彩吧p3图谜第五版| www.gs44.com-好彩三奖金查询| www.14yt.com-七星彩头像图片| www.81ur.com-山西体育彩票走势图| www.171552.com-七星彩专家预测| www.846959.com-信阳彩票中奖| www.943991.com-春秋彩票苹果官网| 大富豪www.h701.com| www.nx2.com-河北省彩票开奖查询| www.100033.cc-网络平台销售彩票| www.711586.com-双色球唯彩看球杀蓝| www.788430.com-彩票国际365购彩| www.867770.com-七星彩现场开奖直播| www.922187.com-温州快乐彩电视走势| www.977416.com-兰考彩礼2018| www.728300.com-体彩竞彩审批| www.878119.com-网易彩票平台下载| 大赢家彩票平台www.137916.com| www.uk46.com-普通彩铅画星空教程| www.00717.com-彩票销售结束时间| www.001951.com-体育彩票彩票故事| www.591503.com-澳门五福彩-| www.85iw.com-蓝彩蝶-| www.621054.com-乐盈网彩票| www.721775.com-竞彩足球单场胜负| www.858480.com-吉林快三统计| www.980009.cc-开体育彩票店收益| www.de47.com-中国福利彩票彩种| www.254935.com-网络彩票网站排行榜| 多媒体信息发布系统_56i大乐透彩票字谜q数字标牌软件官网| www.74ic.com-久久彩票怎么提现| www.1796.com-彩吧论坛首页预测| www.40746.com-买世界杯彩票哪个好| www.05430.com-那个平台可以买彩票| www.2763.net-唐山福彩中心| www.380361.com-福彩3d返奖率报表| www.552218.com-2元机选七乐彩号码| www.7098.net-七彩阳光幼儿园简介| www.282316.com-福彩双色球图标| www.523135.com-刷彩赚钱靠谱吗| www.70xv.com-时时彩牛牛玩法漏洞| www.790702.com-3d福彩过滤器苹果| www.56976.cc-福彩3d追号秘诀| www.045287.com-彩票双色球开奖详情| www.104698.com-新快三游戏恐龙| www.164164.com-竞彩4×4-| www.34ar.com-彩票通代理下载| www.234469.com-支持微信提现的彩票| www.208355.com-大发快三在线计划网| www.54ha.com-贵州毕节体彩中心| www.162301.com-129彩票-| www.65bf.com-重庆实时走势图彩经| www.668776.com-美国在哪儿买彩票| www.921386.com-买彩票中奖概率| www.19mq.com-更多精彩的恐龙视频| www.038130.com-九九集团彩票app| www.399344.com-福利彩票既开票代理| www.804696.com-管家婆彩图更新| www.ps34.com-竞彩猫app-| www.376476.com-qq彩票金豆怎么刷| www.710363.com-神彩争霸注册| www.886288.com-彩铅动漫古风女| www.960841.com-933彩票下载| 500彩票www.50026h.com| www.859098.com-河北福彩河北福彩网| www.977762.com-足彩竞技-| www.cp7911.com-福彩开奖双色球| www.66948.cc-福彩冯亚平-| www.322257.com-彩票大全有哪些| www.850571.com-福利彩票站点培训| www.918757.com-博彩app推荐下| www.981858.com-大象彩票平台网址| www.cp2771.com-那个快三遗漏号| www.oj99.com-湖南福彩中心新地址| www.038979.com-天宏国际彩票真假| www.01cx.com-月亮黑洞彩虹写作文| www.0454.cn-彩票平台怎么做代理| www.96659.cc-253彩票下载安装| www.039900.com-我玩网投彩票输了钱| www.123877.com-彩票816邀请码| www.198930.com-快乐彩票平台| www.234911.com-陕西福彩app| www.884990.com-宇宙彩票app下载| www.979620.com-五彩缤纷香烟价格| www.cai6911.com甘肃快三最牛走势图| www.805977.com-3d彩报第五版| www.862681.com-快7彩票-| www.33266.cc-1分快3彩票合法吗|