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.825349.com-男子痴迷彩票27年| www.262609.com-吉林快三代理平台| www.592585.com-彩虹台直播源下| www.1234.vip-123彩票-| www.322076.com-彩票论坛大全白菜| www.437298.com-贵阳彩票申请网| www.561176.com-名人彩票下载| www.38281.cc-腾讯分分彩五星龙虎| www.d31.bid-足球彩票预测分析| www.515234.com-七星彩中三号多少钱| www.619529.com-投诉福利彩票站点| www.745920.com-彩票就玩大彩网| www.824130.com-三彩进货几折| www.893448.com-快三看走势如何分析| www.964021.com-福彩三地和尾值| 多乐彩票www.344242.com| www.654469.com-景德镇福利彩票地点| www.791446.com-千禧彩票备用| www.394491.com-福利彩票么时候开奖| www.u77.cc-山西体彩中心在哪里| www.92kt.com-彩票买50注的人| www.15645.com-彩铅颜色调色表图| www.101483.com-新华论彩是什么| www.227380.com-快三大小规律怎么看| www.312385.com-一定牛彩票网追号| www.382081.com-彩票平推技巧| www.503918.com-万豪彩票官方| www.579186.com-彩票一等奖是多少钱| www.668872.com-五百万奖金是什么彩| www.26gp.com-体彩合作-| www.739399.com-百盈快三结果查询| www.319678.com-七星彩查询历年号码| www.444779.com-人工智能彩票app| www.540333.cc-球队买彩票-| www.632718.com-九宫八卦彩票选号器| www.724018.com-cc彩球网注册| www.819124.com-0投资彩票赚钱| www.905771.com-国彩怎么提现| www.990830.com-彩票1分快3公式| www.gb77.com-彩票追号-| www.a87.com-北京快福彩快三| www.35ef.com-红牛彩票聊天软件| www.204886.com-网彩平台哪个最靠谱| www.549680.com-888678彩票网| www.60837.com-国乐彩用户注册| www.329544.com-现金游戏网彩票| www.886722.com-新浪体彩开奖直播| www.174342.com-我全国彩票开奖查询| www.137486.com-快易彩-| www.223455.com-福彩开机号近100| www.887946.com-官方高频彩直播网| www.965143.com-博彩话术-| www.cp7556.com-北京快三手机软件| www.758936.com-有什么彩票可以刷水| www.847068.com-彩票3d网上购买| www.937600.com-彩票bug-| www.990069.com-下载送彩金58| www.ak88.com-南国彩票特区| www.tf83.com-快三怎么看跨度| www.6pz.cc-彩票不能提现追回| www.55zf.cc-彩票超级赛车计划| www.rs68.com-香港中彩网-| www.331302.com-彩神和值大小| www.br58.com-最好的彩票走势图| www.743907.com-629彩票-| www.865625.com-彩票站加盟多少钱| www.268371.com-河南省福彩网| www.357656.com-老公买彩票欠债| www.001877.com-七星彩复式所有号码| www.85mg.com-陕西省福彩兑奖地址| www.90800.com-体育彩票如何选号码| www.8381.biz-时时彩手投网| www.28jb.com-易网彩票软件彩下载| www.0025.cm-彩票几位数中奖| www.9809.cn-中彩双色球开奖结果| www.597663.com-彩薇花护肤品加盟| www.723528.com-常州体彩中心| www.822593.com-彩票网购何时恢复| www.986478.com-一号彩票提款安全吗| www.kb66.com-内蒙快三开奖号| www.03rl.com-三亿彩票网站| www.046.biz-彩16提现-| www.536797.com-发行福利彩票的目的| www.684561.com-体彩排列三和值遗漏| www.811405.com-福利彩开奖今天| www.947520.com-体彩公益图片| www.hj59.com-快三复式缩号| www.1ez.com-657彩票网址登陆| www.96ae.com-彩票软件系统开发| www.323865.com-聚鑫乐彩-| www.968290.com-网上时时彩怎么举报| www.ih5.com-快乐彩开奖号码走势| www.pj05.cc-体彩开奖视频直播| www.77yi.com-非法卖足彩-| www.720227.com-中彩票秘诀-| www.5470.xyz-今期彩票结果开奖| www.29653.cc-金手指3d彩票预测| www.0449.cn-彩票如何做计划| www.ns86.com-买彩票属于赌博吗| www.871548.com-足彩软件哪个好用| www.509686.com-福彩主任电话| www.22qe.com-159888彩票-| www.0755.date-分分彩我输得很惨| www.737657.com-网络民间购彩平台| www.846886.com-如何买三d彩票| www.293522.com-幸运彩走势图最新| www.396551.com-漫画彩虹-| www.950104.com-中彩乐购-| www.3609.net-竞彩推荐平台哪个好| www.139370.com-怎样用手机购买彩票| www.212648.com-私彩搭建-| www.270353.com-福彩七乐彩开奖结果| www.335157.com-快三怎么看豹子| www.536709.com-今日七星彩开奖| www.631338.com-我要看彩票信息| www.732517.com-新郑和庄镇彩礼| www.802618.com-七乐彩几点开奖时间| www.876471.com-牛彩彩票好吗| www.948790.com-美国彩票种类| 盛大彩票www.c6121.com| www.fp85.com-福彩网平台是真的吗| www.104545.com-绿好彩香烟代购| www.12003.com-彩票平台是骗局吗| www.134931.com-江苏七位数体彩| www.891539.com-为什么要有彩票| www.990647.com-e球彩助手手机版| www.az93.com-湖北彩票十一选五| www.bi11.com-彩投-| www.386598.com-福星彩资料开奖结果| www.547155.com-彩票跟单提挣佣金| www.617525.com-福彩发号中心| www.685300.com-87彩店是正规的吗| www.1kr.com-爱彩乐充值平台| www.53xz.com-国家彩票正规平台| www.268442.com-玩快三输了-| www.470547.com-国外足彩公司| www.lz66.cc-时时彩大全下载| www.11702.com-京东官网彩票靠谱吗| www.63436.com-七乐彩开奖走势图2| www.543377.com-乐彩玩彩胆神| www.975159.com-如何制作彩票走势图| www.aq50.com-uu直播现场购彩| www.f99.org-发达娱乐彩票诈骗| www.58ix.com-彩票网站彩金| www.200563.com-熊猫彩票合法吗| 易彩网www.99638h.com| www.850027.com-体彩最新试机号码| www.928678.com-中福彩票无法提现| www.988090.com-彩民乐图库-| www.ec9.com-七星彩票江苏快三| www.084578.com-ios玩彩票的软件| www.7193.cm-开奖公告彩票中奖| www.46029.com-打一张彩票提成多少| www.60150.com-中奖彩票税费| www.881413.com-青海省福利彩票中心| www.909040.com-贵州快3彩经网旧版| www.28622.com-福彩中奖容易| www.09651.com-11006移动彩票| www.98438.com-分分彩计算-| www.735395.com-吉祥彩票把我删了| www.ku02.com-上海福彩网时时乐| www.co76.com-万彩网是骗局吗| www.1784.online上海基诺彩票在哪买| www.72713.com-精彩大片视频播放|