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.760347.com-大众彩票网首页| www.393028.com-彩铅画竹子画法教程| www.918765.com-信誉好的外围彩票| www.77334.cc-手机购彩合法么| www.098885.com-玩分分快三的技巧| www.185646.com-福彩理念-| www.329027.com-快三公式怎么算的| www.501736.com-购买体育彩票广告| www.185020.cc-9彩app-| www.4783.biz-天下第彩票开奖结果| www.64qq.com-体彩二十十一选五| www.247585.com-辽宁快三彩票| www.655613.com-五福彩彩票软件下载| www.855159.com-多彩彩票软件| www.972200.com-印尼五分彩开奖结果| www.cp4.com-快三线上投注| www.200076.cc-江苏体彩网首页| www.549717.com-胜负彩网上哪里买| www.636715.com-小学生画彩虹的图画| www.141456.com-网上彩票代理加盟| www.913801.com-欢迎光临台湾福彩| 全民快乐8www.qmkl0.com| www.231058.com-728彩票下载| www.737985.com-体彩五d开将结果| www.823401.com-附近体育彩票站点| www.904446.com-合买彩票网站| www.085043.com-在传奇彩票输了好多| www.7427.pw-福彩公益球-| www.17890.com-彩票三位数开奖| www.34823.com-举报网络购彩平台| www.97628.com-中国体彩官方| www.062807.com-网上哪能买彩票| www.150912.com-彩宝贝短信点播| www.185957.com-快三高手-| www.566334.com-彩81彩票苹果版| www.603715.com-彩票中奖会怎样| www.128282.com-快三怎样选和值大小| www.003452.com-菲律宾彩票推广工资| www.3048.vip-体彩排列三牛材网| www.55jg.com-七星彩什么软件| www.939155.com-599彩票安全吗| www.999122.com-乐汇彩下载-| www.hk48.com-哪个彩票软件最正规| www.337915.com-今福彩开奖号| www.492937.com-彩票黑平台成本| www.131204.com-安阳各地彩礼| www.924991.com-豹赢彩票ios| 六福彩票www.66ffz.com| www.3480.win-55彩票时时彩| www.749813.com-体育彩票几天开| www.935528.com-福彩有那些玩法| www.fp25.com-辽宁体彩11远5| www.954748.com-彩788犯罪吗| www.161685.com-三第彩票-| www.299395.com-彩票开奖结查询| www.0393.bid-驾着七彩祥云去接你| www.wt2.cc-网易彩票开奖大全| www.133172.com-彩钢围挡厂家石家庄| www.100554.com-江苏快三吧-| www.3814.com-好彩什么意思| www.708098.com-足彩竞彩单场胜平负| www.845552.com-彩票分为几类| www.920813.com-七彩网是正规的吗| www.975934.com-狂人时时彩后二直选| www.ci3.com-吉林福彩快三开奖号| www.855795.com-七乐彩投注金额表| www.485678.com-时时彩阶梯倍投技巧| www.270578.com-安徽省福彩中心站| www.8au.com-玩彩票大平台靠谱不| www.78zs.com-富力彩票app| www.1674.vip-三d彩票独胆| www.8608.net-360全国彩票网| www.38172.cc-彩票app-| www.76716.com-任九足彩奖-| www.026584.com-泌县彩英说唱团| www.089784.com-快乐彩票(三)官网| www.cp3888.cc-搜索湖北福彩快3| www.pg60.com-中彩票的人什么命| www.02bq.com-彩迷葫芦弟53期| www.7457.org-彩票站买假刮刮乐| www.39863.cc-台湾彩券官网| www.99315.com-经彩出行退押金| www.097876.com-北京福利彩票转让| www.149544.com-中国福彩网唯一官网| www.222917.com-一分快三倍投法则| www.282758.com-玩时时彩算不算犯法| www.343658.com-玩赚体彩-| www.398018.com-九万彩票下载ios| www.bc10.com-彩票怎么稳赚不赔| www.sc86.com-福彩3d和值字谜| www.35tu.cc-五分彩怎么买| www.365.pw-我爱彩票网-| www.2726.top-牛彩三地字谜| www.7056.biz-m5彩票正规吗| www.09749.com-福彩三d大花猫| www.65wo.com-猫扑宝乐彩下载| www.0453.net-彩经网下载安装| www.6921.me-七彩阳光寓意| www.12788.com-金博彩票-| www.45017.com-利民彩票论坛| www.78802.com-福彩3d定五码技巧| www.026013.com-体彩五位数开奖结果| www.086139.com-聚宝彩票怎么样| www.137504.com-体育彩票报刊| www.195282.com-彩长期盈利心得| www.252932.com-500彩票大发快三| www.306905.com-贵阳体彩中心在哪里| www.360918.com-开彩网开奖号码| www.425262.com-2019足彩任九| www.715760.com-官方双色球彩票软件| www.113608.com-福利彩票3d跨度表| www.236300.cc-福彩手机购彩平台| www.335368.com-双色彩票一注守号| www.455955.com-赌彩票的危害经| www.568188.com-顶尖彩票不能提现| www.6ba.cc-中国彩票头奖排名| www.qu34.com-白岩松谈彩票视频| www.915728.com-网上彩票加盟| www.985778.com-彩票网址大全下载| www.dl94.com-福利彩票导师| www.0my.com-买足球彩票软件下载| www.4133.site-彩虹6号最低多少钱| www.393920.com-3d彩票第三-| www.543259.com-玩彩老头双色球| www.611822.com-万彩吧里面的高手| www.823647.com-山东彩板厂家| www.894983.com-体彩官网购彩软件| www.987414.com-河北快三冀彩宝| www.rs9.cc-快彩彩票官网| www.pp59.com-体彩官竞-| www.07.cm-跑马计划时时彩| www.64jn.com-众彩网赢者-| www.802.website外围体彩哪个好中奖| www.4562.org-玩彩票的九大亏损| www.40513.com-信誉分分彩平台| www.91805.com-广东彩王2o18| www.055639.com-足球彩票哪里买好点| www.115415.com-彩钢瓦防水-| www.181360.com-内蒙古福彩快3开奖| www.239654.com-单双大小彩票app| www.307650.com-快三组合图-| www.378123.com-体彩开奖今天晚上| www.493823.com-体彩排列三专家荐号| www.566454.com-凯发彩票下载| www.639618.com-竞彩店投资-| www.425342.com-彩泥做冰淇淋小视频| www.525598.com-时时彩五星计划网址| www.590785.com-全球足球竞彩分布| www.677722.cc-易彩2.0最新网站| www.781696.com-3d福彩布衣123| www.871849.com-竞技彩票频道| www.995264.com-英国五分彩开奖记录| www.gy31.com-财神8彩票靠谱吗| www.e15.net-凤凰彩app下载| www.42ug.com-免费下载彩视| www.93yh.com-希腊彩开奖时间分别| www.3124.vip-彩票选号走势图| www.34083.com-无极彩票可靠吗| www.022716.com-体彩排列三断组分解| www.102323.com-快彩是什么意思| www.187007.com-快三数字杀头尾| www.272150.com-一分快彩走势| www.337734.com-桂林快三走势图| www.425377.com-英彩票app-|