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.83gl.com-东营彩票站-| www.279646.com-腾讯分分彩好假啊| www.765666.com-779彩票正规吗| www.875797.com-彩票彩票2元网| www.cp649.com-人人彩票app| www.u33.link-出澳门博彩那个网站| www.076090.com-易网体彩直播| www.023148.com-现在彩票不敢造假了| www.sz91.com-国彩8-| www.4648.net-竞彩胜平负彩客网| www.910553.com-彩99彩票登录平台| www.3676.org-竞彩比分软件下载| www.zn14.com-快三复式中了多少钱| www.11653.com-福彩3d彩乐乐杀号| www.289753.com-快乐彩34-| www.845787.com-于海彩票-| www.656528.com-98彩票-| www.88327.com-白菜彩票论坛| www.27gf.com-彩票核心秘密书籍| www.788740.com-竞彩足球资讯网| www.114688.com-快三守号260计划| www.60053.cc-山西福彩十分钟开奖| www.5111.vip-今日牛彩一句定三码| www.777212.com-澳客彩票可信吗| www.180343.com-彩票查询快3| www.592642.com-福利彩票极速赛车| www.537252.com-春秋彩票黑平台| www.611617.com-益彩网正规嘛| www.il.cc-福彩快三开奖走势图| www.9014.loan-新加坡乐和天天彩| www.h11.net-易彩彩民福地网址| www.114931.com-河内五分彩在线预测| www.326928.com-中国古建筑彩绘| www.320339.com-苏快三是什么| www.496425.com-福彩3d开奖号码| www.670290.com-七彩开奖最新结果| www.748428.com-993彩票娱乐| www.812603.com-七乐彩走势带连线| www.880511.com-福彩3d万能组选| www.161514.com-体彩19052期| www.232169.com-旺彩奖金计算器| www.300644.com-何明七乐彩预测| www.770439.com-网络黑彩赌博刑案例| www.14336.com-信彩票下载-| www.670522.com-安徽10月竞彩促销| www.878229.com-彩票71湖北和江苏| www.5su.cc-美国彩票交税详解| www.7249.cn-彩虹无人机大单| www.3136.cm-七星彩解诗网第一站| www.54343.com-体彩标志-| www.878402.com-分分时时彩开奖公式| www.51ri.com-买彩票最好买什么| www.7887.vip-乐米彩票进不去| www.285130.com-幸运时时彩人工计划| www.451885.com-体彩排列三跨度预测| www.637103.com-彩虹六号透视脚本| www.915068.com-大发快三投注攻略| www.25yn.com-微信彩友什么意思| www.6770.in-188彩票手机下载| www.332730.com-掌上京彩app| www.37441.com-彩票计划真的假的| www.317136.com-喜乐彩历史中奖号码| www.105667.com-c59彩票下载安装| www.ej04.com-彩票投注方式有哪些| www.665739.com-七星彩长春-| www.868865.com-七星彩软件哪个最好| www.987553.com-皇都彩票怎么玩法| www.lo90.com-台北快三一分钟开奖| www.926079.com-乐和彩票靠谱吗| www.981294.com-彩六c6com-| www.ab38.com-手机彩票网哪个最好| www.a93.in-网上彩票挣钱平台| www.bq49.com-彩71是什么平台| www.i05.com-七乐彩中奖概率计算| www.53316.com-彩虹七号游戏| www.604507.com-玩彩票开挂神器下载| www.273195.com-中国福彩发行宗旨| www.866782.com-全天彩是合法的吗| www.8501.vip-双色球基本走势中彩| www.87726.cc-最新彩票骗局| www.713857.com-网上彩票猜大小| www.871904.com-彩49彩票安卓版| www.875051.com-中国有多少家彩票店| www.14ek.com-99彩登陆平台登录| www.4444.gg-体育彩票哪家好平台| www.733927.com-山东好彩快三正规么| www.377131.com-胜负彩19047| www.825487.com-33彩票网-| www.909328.com-福彩3d第三版彩吧| www.971253.com-彩票c16-| www.fa34.com-瑞彩祥云快三规律| www.0310.net-梦见中彩票被他人追| www.603720.com-彩票中过一等奖的吗| www.872269.com-七星关彩票店| www.vu56.com-彩票k线走势分析| www.6600.biz-今日彩票运-| www.gt54.com-彩票店招人没人干| www.3xk.com-竞彩球队身价对比| www.69258.com-竞彩任九什么意思| www.3104.xyz-体彩票体彩开奖查询| www.276353.com-香港行政快三查询| www.372027.com-七彩色饺子图片大全| www.495551.com-博彩怎么做网络推广| www.558365.com-彩客网pc版-| www.781239.com-彩吧开机号3d| www.856452.com-彩票反水是什么| www.52979.com-时时彩要停吗| www.2876.vip-彩工委彩票代理加盟| www.663471.com-网络乐彩彩票| www.128104.com-温州体彩中心电话| www.773811.com-时时彩五星做号| www.396760.com-福彩官网3d返奖率| www.45087.com-福利彩票站提成| www.004733.com-慧讯网彩票| www.6678.live-3字谜专区双彩论坛| www.27769.cc-福利彩票分析软件| www.725894.com-c8彩票-| www.9205.cm-山东体彩论论坛| www.577907.com-今天彩票报纸大全| www.673926.com-什么部门管彩票站| www.778456.com-最新版彩乐园| www.96676.com-944c彩票-| www.115445.com-胜负彩500比分网| www.218098.com-亿彩彩票骗局揭秘| www.301920.com-七星彩最怪号| www.is63.com-体育彩票6?1| www.11gf.com-新彩陶瓷-| www.929355.com-福彩群英会开奖结果| www.995687.com-足彩单双-| www.gf53.com-湖北彩票假球案| www.229557.com-五分彩是骗人的吗| www.465316.com-足彩最多能买多少钱| www.653929.com-竞彩提点多少| www.83px.com-彩票中心领奖安全不| www.7774.xyz-湖南省彩票兑奖地址| www.075022.com-深圳试行区块链彩票| www.zi40.com-福彩好运十倍规则| www.048977.com-东北彩礼-| www.xd25.com-快三走势图怎么看透| www.57bs.cc-爱彩站靠谱吗| www.1015.vip-福利彩票政策调整| www.674044.com-亚洲五分彩开奖记录| www.557410.com-彩票3d字谜图谜| www.5173.me-足彩对阵麦-| www.76141.com-网上能不能买彩票| www.69qs.com-福彩三地中奖故事| www.t47.bid-虎扑体育彩票算法| www.66gw.com-千禧彩票-| www.600197.com-不买彩票还想着中奖| www.293126.com-银川仟彩摸吧| www.888757.com-开一个黑彩小平台| www.981915.com-彩票三d试机号| www.mz8.cc-好彩0567下载| www.470370.com-足彩是不是赌博| www.671952.com-亚博投彩官网| www.807995.com-福利彩票安装下载| www.926176.com-如何从手机买彩票| 梦想彩票站www.43131e.com| www.424240.com-三国无参全彩| www.536769.com-中彩网能投吗| www.513316.com-大星彩票下载| www.381649.com-乐彩3500写真机| www.054501.com-福利彩票平台出租| www.366694.com-兰州福彩一等奖|