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.278834.com-彩票中奖真实故事| www.398899.com-彩开票开奖-| www.775697.com-彩票新颖名字| www.f24.in-天天乐彩彩票骗局| www.75hb.com-红8彩票网址多少| www.537417.com-彩色的填什么| www.255807.com-福利彩票站-| www.923421.com-彩票吃票属于诈骗| 彩票5www.550439.com| www.505372.com-博彩彩票网址| www.259570.com-福彩双色球自选号| www.292959.com-河南体彩官方网站| www.427709.com-鲸彩漆有什么缺点| www.51161.cc-快三体彩屋-| www.225774.com-5亿彩是干什么的| www.342844.com-神彩奕奕的动物| www.492220.com-重庆彩万位在线计划| www.582889.com-利用彩票的走势赚钱| www.662650.com-彩票开奖杳-| www.755753.com-中彩网选号助手| www.837480.com-山东福彩微信公众号| www.7az.com-宁波给员工发彩票| www.72ci.com-双色球彩票机选号码| www.19400.com-发彩软件-| www.72617.cc-吉林市福彩中心地点| www.128324.com-广西快三软件| www.414749.com-天天头彩官方| www.510145.com-亚洲彩票代码网| www.590881.com-中国足球彩票怎么买| www.949418.com-体彩11选五复式| www.793518.com-网络彩票输了很多钱| www.911522.com-彩神通时时彩专业版| www.999698.com-宝马彩票登录网页版| www.fp03.com-一分快三开奖| www.7zu.com-员工彩票中608万| www.060.org-彩宝批发-| www.801728.com-w600彩票-| www.723756.com-博乐彩平台下载| www.871096.com-七星彩排列走势图| www.15051.com-浙江体彩飞鱼下载| www.579979.com-百盈快三软件下载| www.gf60.com-体彩31选7走势图| www.82fv.com-澳门福彩快三计划| www.800262.com-福建体彩开奖公告| www.874341.com-体彩七星彩中奖号码| www.947184.com-二分彩开奖号码| 亚投彩票www.ya939.com| www.jh30.com-彩发发app下载| www.024291.com-牛彩网3d图谜汇总| www.128015.com-彩虹宝宝中文版全集| 天天彩票www.7782n.com| www.188726.com-福建快三2同号遗漏| www.965676.com-玩赚彩票app下载| www.py09.com-百盈快三彩票| www.882861.com-棒棒彩票是正规的吗| www.eg43.com-彩票玩法介绍| www.um50.com-合肥福彩中心地址| www.06ge.com-用手机怎样买彩票| www.98be.com-888彩票是黑彩吗| www.646566.com-免费开户彩金领取| www.161986.com-湖北快三热的早知道| www.913546.com-台湾福彩开奖现场| www.973486.com-彩虹手机壁纸| www.om2.com-山东体彩在线app| www.xt41.com-下載即時開彩| www.18vb.com-七乐彩今晚几点开奖| www.81et.com-哪些银行积分买彩票| www.522356.com-500亿彩票-| www.92wx.com-网易彩票欢乐豆| www.1257.org-顶尖彩票邀请码| www.225902.com-彩票追号倾家荡产| www.778505.com-下载升级版网易彩票| www.878762.com-福彩积分卡兑换| www.028898.com-彩神网可靠吗| www.qg90.com-好彩双爆-| www.32279.com-8k彩票进入网址| www.9uq.com-中国体育彩票微博| www.794911.com-快三线上正规吗| www.952981.com-体育彩票网上购买| 500彩票www.26299z.com| www.375907.com-19044期体彩| www.72ft.com-跑马彩票网站| www.482895.com-5个数的彩票有哪些| www.128811.com-环球彩票注册网址| www.036350.com-九彩凤凰与弓的传变| www.1281.in-彩票经销商回扣| www.13396.cc-吉林彩票11选5| www.002202.cc-苏州彩票店-| www.058208.com-国家福彩五分快三| www.738262.com-uu直播彩票群| www.f55.cc-马来西亚搞彩票| www.276.cx-私人排五彩票| www.142786.com-彩八官方网站| www.183.la-统计学可以算彩票吗| www.5603.wang-开户送28彩-| www.15101.com-温州体彩官网首页| www.768.me-赢彩王免费软件| www.947218.com-三彩网彩票官网| www.590018.com-福彩3d小熊猫图迷| www.675965.com-结婚10万彩礼多嘛| www.317000.cc-湖北快三和值11| www.127379.com-陈赫中奖的彩票号码| www.902447.com-快三能挣钱吗| www.995621.com-易彩票快三-| www.706179.com-聚星博彩是合法的吗| www.792317.com-彩票店最多能兑奖| www.873931.com-多乐快三彩票怎么玩| www.979711.com-彩票应用软件| www.cai1455.com好彩3-| www.037793.com-手机下载双色球彩票| www.703226.com-万家彩票是什么| www.949766.com-ms彩票-| www.990496.com-福彩字谜汇总图| www.cp.com-北京彩票快三查询| www.3538.vip-七乐彩独胆泌下| www.879416.com-彩票5app-| www.696039.com-七乐彩走势图乐彩网| www.123582.com-乐彩网论坛静态板| www.255761.com-k彩登录-| www.006806.com-福彩中奖号3d| www.121419.com-导师网络彩票| www.9421.cc-新潮娱乐彩票| www.194670.com-福彩3d跨度走势图| www.4020.cn-彩票捡钱-| www.14vd.com-山东体彩地址| www.79or.com-福彩3d小条件方法| www.9768.in-竞彩篮球联比分直播| www.028168.com-鸿彩网登录入口| www.96957.com-彩票案视频-| www.051253.com-600w彩票-| www.137143.com-七彩鲜花店-| www.324769.com-下期的彩票中奖号码| www.739031.com-买世界杯彩票| www.835590.com-500彩手机版| www.932827.com-微信上怎么买彩票| 彩71www.911203.com| www.583061.com-公益彩票下载| www.053.online-彩票止损方案| www.57503.com-江苏竞彩e球彩开奖| www.543548.com-3d预测玩彩老头| www.590351.com-福彩三d天宇| www.71zd.com-微信新启航时时彩| www.2456.com-灯彩介绍-| www.38373.cc-海南七星彩局王图纸| www.986962.com-彩票五星定位胆技巧| www.ai41.com-七星彩包码长期稳赚| www.743903.com-8888彩票登录| www.797339.com-九八彩票-| www.206802.com-阿里彩票骗局| www.280599.com-时时彩网上不更新| www.937855.com-云彩厅可信不| www.bk27.com-038彩票官方版| www.32256.com-我要福彩-| www.668191.com-郑州彩铃-| www.13607.com-立体彩铅画作品| www.022830.com-体彩杀码断组组合| www.560917.com-彩票大师手机版下载| www.010102.com-淘彩票登录| www.133731.com-好彩一综合走势| www.667.online-彩币新闻-| www.323267.com-乐彩报码-| www.764829.com-彩票网站制作有哪些| www.887.in-艾彩原创全部视频| www.6698.pw-华夏鑫彩-|