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天

知道了
彩01彩票 www.638036.com-一个足彩高手的总结| www.47498.com-好彩下载-| www.161761.com-洛杉矶快三开奖结果| www.jc11.com-幸运快三全天走势图| www.979035.com-好彩门户一报特网| www.85sn.com-八喜彩票app| www.159090.com-外国彩票分析| www.142477.com-彩八彩票怎么害人| www.026080.com-9购10分彩-| www.978328.com-市政彩钢围挡价格| www.42ts.com-约彩365胜负彩| www.11qg.com-彩567-| www.77860.com-天津市体彩中心电话| www.348228.com-七乐彩是真是假| www.444726.com-五彩斑斓的世界虐吗| www.391434.com-福利彩票手机投注| www.658666.cc-中彩乐网址-| www.803703.com-重庆二分彩-| www.886723.com-中国福彩是骗局吗| www.978555.com-福彩3d彩图丹东版| www.is2.com-福彩内蒙古快三下载| www.750898.com-彩46.apk-| www.pz00.com-百盈彩票官网下载| www.8157.cc-双色球近期彩票开奖| www.10930.com-手机彩票网投平台| www.76304.com-澳门福乐彩开奖结杲| www.08ev.com-哆咪奖七星彩010| www.92gz.com-体彩列三开奖| www.61430.cc-重庆互联网彩票案| www.88517.cc-下载彩c75cc| www.049907.com-炫乐彩票二维码扫描| www.802685.com-福彩字迷图迷总汇| www.078832.com-六合牛娃彩票| www.202045.com-陕西快三开奖| www.122734.com-众彩彩票是合法的吗| www.xm79.com-青海快三杀码技巧| www.361066.com-福彩高管贪污| www.527663.com-时时彩容错做号法| www.637852.com-周围福利彩票店| www.761427.com-大乐透中彩票的概率| www.878573.cc-江西体育彩票61| www.962412.com-福利彩票选号助手| www.cp6543.cc-e球彩直播-| www.8482.loan-八彩-| www.027646.com-黄山体彩外围| www.39535.cc-豪彩娱乐代理| www.tn45.com-全国快三计划| www.263667.com-江苏快三近50期| www.424445.com-金祥龙版彩票app| www.07559.com-中彩那天微型课视频| www.04nf.com-即时开彩2017| www.314008.com-福彩3d的赔法| www.545062.com-双色球颖彩-| www.856557.com-关于福利彩票的文章| www.979954.com-足彩让球胜平负开奖| www.uj99.com-大赢家彩票不能提现| www.757919.com-震惊全国的彩票事件| www.7521.pw-台湾彩票官网| www.87708.cc-太阳彩票合法吗| www.118332.com-附近中国福利彩票站| www.369660.com-彩票站封机时间| www.295168.com-彩票数学公式大全集| 500彩票www.50024w.com| www.590822.com-佬牛足彩任九| www.4537.biz-买彩票什么时辰吉利| www.056151.com-彩票黄金分割计算法| www.507119.com-易点彩票首页| www.637992.com-色彩斑斓女神款微信| www.892147.com-彩1下载安装| www.rt70.com-我爱彩票官网| www.671701.com-体彩排三和值表| www.912283.com-网上买彩票会不会抓| www.ef55.com-234彩票手机版| www.9102.pw-七乐彩首页开奖| www.687101.com-福利彩票励志广告| www.776267.com-重庆时时彩软件计划| www.92852.com-彩库助手安装| www.10004.com-浙江福彩中心新址| www.539350.com-彩票站开在哪里合适| www.986858.com-福建即乐彩中奖规则| www.873902.com-贵州快三玩法和开奖| www.986338.com-福彩所有玩法介绍| www.1ef.com-手机买彩票哪个好| www.4616.biz-彩票全中是多少钱| www.594543.com-优乐彩安全吗| www.jl7.com-快三助手苹果手机| www.25ud.com-76858彩票网| www.13374.com-彩票缴费通支付宝| www.278592.com-吉首市快三秒| www.tn69.com-淘彩票888-| www.608237.com-中国体彩直播频道| www.63770.com-陇西彩礼一般给多少| www.hi63.com-湖北快三新规| www.03iv.com-4157彩民红论坛| www.66545.cc-福彩直播视频| www.931335.com-大吉彩票下载| www.974980.com-3d彩票非凡走势图| www.i26.club-福彩坑-| www.2072.cm-360彩票客户端| www.63184.com-中国福利彩票365| www.01563.cc-大发大掌柜彩票平台| www.250521.com-全中彩票官网下载| www.321333.com-名人娱乐分分彩| www.373735.com-福彩足球刮刮乐| www.464163.com-今天福彩杀码号| www.530838.com-黑客会攻击彩票网么| www.591062.com-竞彩购买网站| www.419806.com-印象彩票登陆| www.938779.com-亿彩苹果下载| www.37wj.com-星座彩票幸运号| www.310026.com-体育彩票怕列三论坛| www.548255.com-彩票幸运28的漏洞| www.621752.com-彩神vii安卓下载| www.2763.org-福彩快3跨2度表| www.356503.com-赠送彩票营销| www.440875.com-彩色耐磨混凝土容重| www.zz23.cc-怎么申请体育彩票站| 500彩票www.50788j.com| www.55239.cc-时时彩后三胆软件| www.42tt.com-四川彩钢围挡厂家| www.y45.xyz-西安福利彩票号码| www.9368.bid-福彩的钱都用哪儿了| www.45898.com-qq赛车彩票-| www.89980.com-七彩在线彩票| www.068850.com-福建快三玩法介绍| www.168234.com-398彩票-| www.273508.com-福彩的发行原则| www.656962.com-经营体彩竞彩店经验| www.078908.com-五福彩票网559| www.153896.com-体彩排列五玩法说明| www.239636.com-一定牛贵州快三| www.035198.com-广西快三平台下载| www.80880.com-哪个台能看体彩直播| www.7183.biz-宝乐彩票是假的吗| www.665084.com-七乐彩开奖记录| www.061809.com-彩客网苹果怎么下载| www.152947.com-安徽福彩下载| www.255775.com-体育彩票是几位数| www.341624.com-江苏快三微信计划群| www.397440.com-正规网上彩票网站| www.505940.com-鞍山彩票大案| www.586415.com-开户送彩金网站| www.463755.com-好运彩不让我提款| www.5jk.cc-中福在线快三| www.087.net-天刀射利彩签怎么用| www.4718.website体育彩票中奖多少钱| www.708451.com-体育彩票和福彩开奖| www.809035.com-买彩票中奖感言| www.881123.com-大乐透彩票幸运选号| www.957784.com-333彩票下载安装| www.so69.com-重庆老时彩开奖| www.235889.com-360足球彩票| www.320131.com-幸运5分彩怎么玩法| www.375570.com-彩虹六号刘醒表情包| www.492406.com-广西体彩站电话| www.97ly.com-黄渤彩票号-| www.51193.cc-苹果下载58彩票| www.28739.cc-趣彩app下载| www.556310.com-天天乐彩是骗局吗| www.17988.com-足彩是不是骗局| www.130757.com-彩运宝app下载| www.202839.com-彩票平台程序排行榜| www.497.cm-彩票微信群骗局| www.771718.com-致富彩app下截|