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.918978.com-彩经网杀号定胆号| www.9490.vip-彩票选码软件| www.030282.com-好运来彩票网可信吗| www.189254.com-内蒙古快三爱乐彩| www.701410.com-雪园绿足彩比分直播| www.872533.com-重庆体彩七星彩| 惠民彩票www.18kpl.com| www.959312.com-杏彩168-| www.12111.cc-抢彩票违法吗| www.80342.com-球彩怎么买-| www.223950.com-中国体彩网官方| www.336193.com-快三现在一天多少期| www.428816.com-福彩双色球大奖| www.82817.cc-搜狐彩票网电脑版| www.00cp.cc-快钱彩票安全吗| www.250982.com-中彩在线害了多少人| www.083081.com-彩票回血规划| www.180223.com-江苏快三一定牛预测| www.uw62.com-买快三有赢钱的吗| www.67lz.com-分分彩稳定玩法| www.203082.com-内蒙古福彩快3走图| www.580831.com-e乐彩彩票注册| www.878642.com-有江西快三的平台| www.1677.top-恒彩-| www.865458.com-玩快三输得倾家荡产| www.9239.hk-青岛福彩养老院官网| www.9860.org-中国古代建筑彩画| www.0754.wang-彩票接口api教程| www.280244.com-彩票幸运农场技巧| www.2kk.com-福彩销售提成| www.15gi.com-618彩票快三| www.295689.com-体彩排三的走势图| www.081892.com-七星彩中三个有钱吗| www.8131.org-发梦中彩票的图片| www.223269.com-全民计划网快三| www.322112.com-快三软件预测| www.953425.com-乐彩团队骗人| www.91665.cc-ap彩票-| www.0775.bid-篮球计算器竞彩网| www.192666.com-体彩11选5app| www.017.cm-9号彩票官方下载| www.6260.top-注册668彩票账号| www.44762.com-四季一分彩-| www.98675.com-一分钟彩有假吗| www.082295.com-好运彩彩票网可靠吗| www.3ay.com-京彩集团是合法的吗| www.qo01.com-今期七星彩开奖号码| www.61048.com-贵宾室彩票平台| www.1sr.com-云鼎彩票网-| www.258091.com-乐米彩票首页| www.24675.com-唯美古风彩铅画| www.839725.com-19048体彩-| www.659749.com-明发彩票平台怎么样| www.751003.com-中发彩票首页| www.835135.com-好彩烟爆珠-| www.898289.com-七星彩电动车被偷码| www.963613.com-彩铅风景画教程| www.cp9115.com-冀彩宝官网-| www.40os.com-国彩快三下载| www.363177.com-上海天天彩开奖结果| www.482582.com-长春吉康彩溢大选| www.561820.com-306好彩票-| www.639044.com-体彩店好申请吗| www.805825.com-福利彩票程序是谁| www.926133.com-七乐彩除9走势图| www.985215.com-中国彩软件是真的吗| www.jx38.com-长春福彩中心| www.017291.com-鼎盛彩票黑平台| www.78122.com-彩票科学投注法| www.61790.com-彩家园平台可靠吗| www.123153.com-用酷彩吧合法吗| www.589441.com-足球36o胜负彩| www.24267.com-福彩3d÷规律| www.119337.com-今天i海快三开奖| www.3825.cm-七星彩多少种组合| www.98779.cc-孝感福彩中心地址| www.3515.wang-天天爱彩票提现失败| www.06966.cc-福彩的可怕黑幕| www.011783.com-55期彩票开奖| www.0090.win-彩字打一生肖| www.v48.net-体彩遗漏是什么意思| www.651972.com-幸运彩票赚钱| www.145893.com-体彩金手指报纸| www.420099.com-今日竞彩胜平负温胆| www.5118.com-买彩票截止到几点| www.47685.com-破解彩票中奖密码| www.697809.com-香港资料彩票正版| www.759665.com-安傲褔彩15选5| www.191808.com-关注吉林今天快三| www.181951.com-上海快三中国福彩| www.272892.com-体育彩票有几种类型| www.416601.com-常常中体彩app| www.530383.com-幸运彩票助手下载| www.302386.com-七星彩规律图今天| www.08wj.com-体彩合买中奖| www.183908.com-河北快三ks-| www.ij72.com-微信上的广东福彩| www.zz27.cc-太原体彩店如何申请| www.26oc.com-分分彩历史数据查询| www.3471.cc-发梦中彩票二等奖| www.uo90.com-快乐博彩尽在乐彩| www.6350.in-今日体彩开机号| www.1750.com-鴻彩直播-| www.766.com-时时彩360遗漏| www.831431.com-竞彩店全国销量冠军| www.30mp.com-福利彩票全套多少钱| www.c44.bid-三六零彩票开奖| www.ty69.com-彩票名词-| www.17ds.com-老幻想中彩票| 博友彩www.267by.com| www.321908.com-彩票双色球中奖神器| www.fz85.com-中彩神网-| www.244002.com-山东福彩app官网| www.333742.com-微彩票网站-| www.78688.cc-彩3d乐彩3d-| www.050782.com-快三多长时间开奖| www.15lb.com-足球彩票19047| www.1009.net-周一彩票-| www.525113.com-圣地彩开奖号码| www.582571.com-今甘肃快三开| www.641583.com-中国竞彩图标| www.699087.com-快三微信群怎么赚钱| www.766983.com-乐彩双色球诗迷| www.832050.com-怎么找博彩公司网址| www.888508.com-金沙时时彩平台| www.949065.com-pc蛋蛋彩票合法吗| www.df17.com-新湖北快三-| www.tk54.com-河南福彩快3| www.060509.com-天天爱彩票停了吗| www.49fd.com-河北彩花漏打马赛克| www.0058.top-福利彩票哪种容易中| www.860959.com-好彩一开奖历史| www.959796.com-彩票计划详情网址| 福利彩票www.8039k.com| www.365292.cc-彩库品牌女装官网| www.483852.com-彩票双色球号码顺序| www.4096.org-珐琅彩瓷器的市场| www.17599.cc-手机广西体彩网| www.03sn.com-购彩iv登录-| www.81cp.com-蚂蚁彩票-| www.862654.com-大乐透江苏体彩网| www.112195.com-会员登陆98c彩票| www.181258.com-内蒙时时彩-| www.257612.com-105彩票官方下载| www.333944.com-体育彩票可以网上买| www.396685.com-多彩宝官网-| www.607016.com-福彩控主任诗| www.717203.com-彩铅画对孩子的好处| www.826182.com-新浪乐彩下载| www.912569.com-彩客吧是什么| www.982351.com-下载旧版爱乐透彩票| www.im69.com-移动彩票软件安全吗| www.42iq.com-彩票上亿大奖| www.170263.com-乐和彩开奖-| www.05000.cc-彩票29app-| www.666746.com-彩95平台怎么样| www.692985.com-17彩票绑定安全吗| www.768580.com-爱乐彩双色球走势图| www.8233.cc-莱利彩票网-| www.82338.com-江苏快三计划员| www.070578.com-彩神争霸报警有用吗| www.365230.cc-周四体彩开奖| www.521024.com-内蒙古体彩下载软件| www.599800.com-篮球竞彩怎么玩|