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.06831.com-采购彩涂板-| www.2396.cm-苹果彩票吧-| www.297613.com-彩票基本常识| www.474968.com-海口快三开奖结果| www.091087.com-福彩3d怪字神贴图| 吉彩www.407873.com| www.14755.com-福彩官网开奖结果| www.3287.vip-128福彩是真的吗| www.08783.com-319彩票网站| www.8491.cc-彩贝棋牌客服| www.22331.com-因为彩礼谈崩了| www.010065.com-安徽快三号码分布| www.226604.com-福彩七乐彩没人买| www.975051.com-福彩可以网上投注吗| www.438549.com-张家口福彩中心地址| www.550267.com-易彩快3官网| www.48wj.com-158彩票是正规的| 500彩票www.003963.com| www.23989.com-彩神的网址是多少| www.365543.cc-手绘彩铅简笔画星空| www.536996.com-手机彩票有哪些种类| www.585439.com-app97彩票-| www.689438.com-彩票让彩民寒了心| www.772023.com-多彩贵州城-| www.852864.com-香港买彩票的地方| www.914166.com-今天广西快三更新| www.983259.com-足球竞彩下载| www.000036.com-优游彩票ub8登录| www.092214.com-kc一分彩-| www.d87.pw-彩票狂人王成舟| www.36eu.com-七星彩胯度-| www.143314.com-彩运8平台多少年| www.658989.com-青蛙彩票8080㏄| www.9314.cn-马来西亚时时彩案件| www.756799.com-彩66软件-| www.939001.com-彩票站如何在澳客| 梦想彩票站www.43131p.com| www.269627.com-欧洲彩票巨奖| www.142975.com-广西福彩软件下载| www.7676.pro-七乐彩开奖结果星| www.739154.com-长城彩票下载| www.365939.cc-马可水溶彩铅怎么样| www.674705.com-财政部高频彩票| www.dk72.com-彩票九宫图分析法| www.43lc.com-五福彩彩票正规吗| www.0288.me-玩彩票玩破产案例| www.69809.com-邯郸快三开奖结果| www.235744.com-齐鲁风采t乐彩| www.026427.com-一分快三计划中心| www.191737.com-三分快三app| www.307018.com-时时彩除32技巧| www.950864.com-趋势软件彩-| 68彩票www.68689r.com| www.3994.biz-澳门博彩展览| 买彩网www.mcw7.com| www.470813.com-足彩买输了怎么赔| www.062920.com-体彩网买大乐透| www.0379.tv-快三讲解分解教学| www.797586.com-彩票机选中奖的多吗| www.444817.com-福彩选四开奖| www.582702.com-福彩购彩平台| www.682755.com-彩票微信推广找老板| www.943358.com-网易彩票买不了| www.258926.com-中国竞彩网胜负平| www.356044.com-玩彩哪个彩种赚钱| www.506772.com-彩票山地开奖结果| www.608466.com-派彩是你充的钱吗| www.683422.com-彩票过滤大师app| www.806073.com-彩票精准计划| www.900337.com-爱淘彩彩票-| www.44xo.com-彩票店转让费| www.144111.com-重庆实时彩下载| www.56396.cc-金彩网高手天下网| www.690167.com-全球足彩预测网| www.813656.com-体彩刮刮乐送金条| www.8473.loan-融彩网是真的假的| www.508661.com-体彩天下可以赚钱吗| www.80335.com-体彩排三的奖号| www.99266.cc-淘宝可以买彩票了吗| www.850129.com-qq分分彩计划| www.948322.com-彩票哪个台开奖直播| 众彩www.926280.com| www.562871.com-爱米彩票下载| www.696943.com-竞彩的开奖结果查询| www.354219.com-怎么看彩票中奖没| www.539976.com-快乐彩助手-| www.828825.com-下载彩c75cc| www.52999.cc-春节时时彩停运时间| www.21ul.com-七星彩专家汇总预测| www.047.date-九久彩票-| www.66395.cc-京东金融彩票入口| www.254382.com-足球彩票论坛app| www.206831.com-7乐彩中奖规则| www.292911.com-时时彩平台官方| www.456365.com-青岛福彩中心招聘| www.162111.cc-汇彩网能赚钱么| www.977711.cc-中国体彩世界杯竞猜| www.cx8.com-中国福彩的宗旨| www.oc73.com-内蒙福彩快3推荐号| www.189740.com-广西快三彩票投注| www.599960.com-还有什么彩票可以买| www.hb12.com-购彩大厅手机版下载| www.208856.com-彩票老谢专家专栏| www.535875.com-买彩票哪种好中奖| www.604546.com-詹天佑福彩今日点评| www.692527.com-体育彩票足球规则| www.794088.com-公务员买彩票| www.886541.com-体彩七星彩论坛| www.969485.com-宝赢彩票软件下载| www.cp5220.com-今天快三走势图| www.pz32.com-千福彩票app| www.11jx.com-河内分分彩精准计划| www.941357.com-体育彩票新游戏规则| www.ek21.com-好彩网图谜-| www.020188.com-足彩篮彩计划| www.513912.com-体彩排三字谜总汇| www.020077.com-中彩网三地推荐号码| www.198717.com-彩票赠送-| www.858915.com-彩票开奖专家预测| 网易彩票www.26163d.com| www.5685.biz-今日说法买彩票的| www.243993.com-广西福彩app下载| www.700194.com-体彩能网上购买吗| www.855184.com-那种彩票中奖率高| www.944011.com-春秋彩票登陆平台| 杏彩www.00840t.com| www.0on.com-众乐快三在线计划| www.96147.com-福利彩票公益事业| www.128940.com-澳彩官方网站app| www.465218.com-金龙和玺彩画图片| www.931549.com-天吉彩票论坛3d| www.870359.com-有人拉我玩uc彩票| www.cz48.com-幸运快三输了怎么办| www.801.org-87彩店合法吗| www.588786.cc-全民免费彩票可靠吗| www.095592.com-正规购彩-| www.95454.com-买胜负彩赚钱方法| www.973562.com-彩虹宝宝免费| www.650711.com-彩虹伞游戏歌曲| www.733231.com-彩票188-| www.860203.com-96068彩票平台| www.nl17.com-中国足彩网赛事| www.50ni.com-足球彩经-| www.6380.top-企鹅直播平台竞彩猫| www.cai0766.com福利彩票快3| www.621886.com-福彩三d中奖技巧| www.722895.com-怎么破解彩票漏洞| www.352195.com-中国的黑彩有哪些呢| www.492928.com-爱彩人双色球走势图| www.709252.com-神彩网网址-| www.884149.com-国际博彩论坛| www.968345.com-谁有时时彩的微信群| www.cp6879.com-安微福利彩票| www.28044.com-7168彩票平台| www.706058.com-体彩时时彩票走势图| www.hx77.com-快三开对子的概率| www.8wl.com-体彩跟单陷阱| www.63bq.com-安全彩票o2o系统| www.t56.in-武汉彩票中大奖| www.500068.cc-快乐3分彩-| www.605605.cc-家装贴墙用彩膜好吗| www.689108.com-七乐彩彩友沙龙| www.785708.com-体彩四川金7乐| www.880169.com-大发快三的技巧|