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.259434.com-福彩帮手选号| 公益福彩www.gyfc4.com| www.919010.com-博彩app安全吗| www.019050.com-青蛙过河游戏彩票| www.721226.com-福彩开奖号马| www.428850.com-彩票随机两注| www.233694.com-微信快三玩法规则| www.036040.com-彩票全天免费计划| www.32ry.com-2月22号七星彩| www.691998.com-京东官网彩票靠谱吗| www.858554.com-彩神计划全能版| www.951976.com-彩神彩天下骗局| www.bn46.com-彩站宝怎么收费| www.f75.net-蓝海娱乐彩票骗局| www.56ou.com-体彩世界杯赔率| www.16521.cc-时时彩全天连中计划| www.gd06.com-彩虹玫瑰-| www.220342.com-乐彩网下载| www.521589.com-分分庄家彩作弊| www.ia8.com-福建快三一定牛推荐| www.7881.top-想中彩票想得我疯了| www.409999.cc-浙江体育彩票飞鱼| www.971124.com-福彩都有哪些种类| www.535022.com-2元彩票网com| www.111903.com-手机购彩是犯法的吗| www.222194.com-四分钟一期的彩票| www.8322.cm-赣州体彩中心位置| www.62942.com-彩宝彩票提现难| www.023133.com-天下彩、免费资料| www.096041.com-正规购彩票平台| www.00.cm-附近中国体彩| www.551.tv-时时彩下分版下载| www.6290.me-时时采彩走势图算号| www.17917.cc-竞彩公告-| www.58100.com-2018彩图库彩图| www.001140.com-酷彩吧彩票下载安装| www.054753.com-福彩六加一走势图| www.21391.cc-创名彩票是真的吗| www.576002.com-彩票停售是什么意思| www.619566.com-怎么投诉彩票网站| www.921268.com-甘肃福彩网官方网| www.gv25.com-共享彩票是什么意思| www.01xf.com-揉纸重彩画教程| www.u67.net-唐山彩票站转让| www.343200.cc-伦敦2分彩是官网吗| www.368796.com-728彩票是骗局| www.549536.com-下足彩哪个网站好| www.657722.cc-排列三专家彩乐乐| www.803939.com-红旗彩票合法吗| www.924996.com-聚富彩app-| 网易彩票www.36788u.com| www.075618.com-研究中奖彩票达人| www.573458.com-快三本金计划| www.775394.com-彩富网资料大全正版| www.6598.org-信发彩票app| www.488401.com-甘肃快三彩控图| www.654176.com-七星彩19029期| www.832187.com-七星彩摇奖是随机吗| www.990844.com-腾讯彩票挂机软件| www.2817.xyz-本期七星彩高手| www.85309.com-彩大发快三破解器| www.20620.cc-地下六仺彩开奖结果| www.878116.com-福利彩快三下载安装| www.sk74.com-彩票查询时时彩开奖| www.10405.com-50o足彩-| www.024518.com-七星彩二等奖多少钱| www.144236.com-北京快三怎么玩稳赚| www.261439.com-火箭彩票网-| www.435432.com-都匀彩票店位置| www.81365.cc-福利彩票双色球倍率| www.764733.com-介绍彩票送彩金平台| www.974.cn-福利彩票店最近位置| www.127901.com-温州福彩中心| www.32id.com-印度官方一六乐透彩| www.3937.me-英国幸运彩-| www.04297.com-彩票软件上中一等奖| www.44417.cc-全民竞彩足彩彩票| www.859963.com-河内时时彩在线计划| www.973016.com-百胜快三合法吗| www.gx65.com-幸运快三彩票官网| www.yr00.com-网络福彩快三的骗局| www.3190.cm-福彩往期回顾| www.51ke.com-竞彩篮球购买热线| 500万彩票www.39500u.com| www.301817.com-湖北快三湖北快3| www.056658.com-合肥省福彩中心地址| www.74740.cc-金彩彩票可信吗| www.071195.com-昆山福彩投注站转让| www.234282.com-体彩3-| www.319600.com-星彩viptxcc| www.4705.org-彩票店挣钱吗| www.562631.com-pc二八彩下载| www.679907.com-巨龙彩票独家心水图| www.780188.com-申请福彩要什么条件| www.2174.cn-福彩快3网上注册| www.445006.com-牛彩3d布衣天下图| www.627150.com-互联网彩票何时开售| www.36875.cc-福彩胆王-| www.cai5822.com长春快三中奖查询| www.mu95.com-手机客户端打彩票| www.097303.com-体彩3d基本走势图| www.385064.com-彩票中心王素英视频| www.876769.com-500彩票是真是假| www.970740.com-激励买彩票经典语录| www.dk3.com-体育彩票十分钟一次| www.598530.com-七星彩036期| www.489071.com-安阳体育彩票网| www.236197.com-7号彩票注册邀请码| www.320377.com-360彩票购采大厅| www.407074.com-江西11选5爱乐彩| www.262089.com-湖北快三多少号| www.365619.cc-彩铅中国山水名画| www.465052.com-彩票数字组合9| www.545050.com-cc彩球网是真的吗| www.659465.com-澳彩风情开奖记录l| www.754813.com-王牌彩票快3下载| www.870919.com-41四亿彩票-| www.927785.com-彩票生肖怎么打的| www.979187.com-广州哪里有好彩烟卖| www.lq8.com-河北福彩3d和值表| www.119558.com-经典彩票店标语| www.227706.com-手机可以买彩票吗| www.337971.com-海南快2开奖彩票| www.953040.com-彩票官方app| 网易彩票www.36788g.com| www.210206.com-吉林快三我输50万| www.130405.com-彩票走势图2| www.027840.com-彩票教你赢钱套路| www.555934.com-美狮彩票推荐人| www.621571.com-三d彩票三毛58期| 吉利彩票www.66376w.com| www.156622.com-网上彩票赚钱平台| www.323228.com-七星彩牛嗲头尾资料| www.569352.com-促销送彩票违法| www.653374.com-彩票性缘网盘百度云| www.738544.com-澳彩风情开奖结果| www.65uq.com-运城老张体彩| www.2018.mobi-彩虹六号nokk| www.04180.com-全民彩票怎么玩| www.095059.com-购买3d彩票-| www.405015.com-七星彩技巧和和方法| www.577397.com-彩虹糖蓝色什么意思| www.686717.com-中彩彩票网维护| www.809636.com-彩票组合生成器| www.926225.com-彩票一般多少钱| www.988231.com-国家批准的网上彩票| www.025849.com-喜乐彩票靠谱吗| www.5gr.com-足彩税怎么算| www.76gn.com-哈尔滨体彩中心地址| www.171102.com-今晚七星彩-| www.258745.com-足彩19039-| www.3955.me-体彩小蓝报-| www.9758.in-体育彩票19029| www.52455.cc-足球彩票下载手机版| www.735652.com-广西快三大小怎么算| www.3343.top-彩之乐彩票网app| www.70456.com-彩运8平台下载| www.111526.com-加拿大3分彩走势图| 体彩网www.3890r.com| www.749855.com-重庆福利彩票十分钟| www.285993.com-1216亚洲彩票网| www.x73.in-专业彩票网-| www.73177.cc-如何看彩票中奖信息| www.822829.com-手机看彩-|