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.219841.com-福彩3d彩吧图库| 幸运彩票www.118428.com| www.31vf.com-星期日买什么彩票| www.2747.org-彩票试机开奖| www.9427.shop-求福彩3d算胆公式| www.877769.com-举报别人做私彩| www.958851.com-二人生日彩票| 大赢家彩票平台www.176223.com| www.505462.com-乐彩网3b讨论区| www.297.live-领航彩票程序| www.5906.vip-结婚彩礼都有什么| www.297779.com-甘肃彩票11选五| www.473488.com-吴江福利彩票中心| www.907016.com-彩票有11位数字| www.cai89.cc-河北快三开奖结果着| www.21fq.com-时时彩数据接口| www.256913.com-快三作弊器网站| www.116991.com-欧洲五分彩-| www.788988.cc-竞彩盈亏交易量| www.971754.com-创彩网首页-| www.32qo.com-我想福利彩票| www.7779.cc-35彩票中心-| www.71923.cc-503彩票注册| www.9092.biz-福彩神牛公众号| www.397351.com-掌优彩票官网下载| www.561404.com-中彩在线官网域名| www.23766.com-微信代打彩票兼职| www.dc99.com-快三每期开奖时间点| www.461974.com-排三彩票专家预测| www.948084.com-微信快乐彩是合法吗| www.27sm.com-怎样注册彩票帐号| www.1074.xyz-彩票遗漏图数据分析| www.8167.cm-彩票故事大全| www.508205.com-彩票一号店怎么样| www.577014.com-河南福利彩票幸运一| www.577182.com-uu彩票下载链接| www.660897.com-彩票广告怎么做| www.760507.com-购彩票中奖技巧| www.727515.com-福利彩票今天开奖吗| www.800502.com-河南福彩快三太假| www.781742.com-老尹说彩大乐透分析| www.869862.com-彩票开奖现场视频| www.973948.com-头条彩票app下载| www.iq9.com-内蒙快三和值走势| www.tx46.cc-快三投注员头像| www.38mt.com-动漫彩铅颜色搭配表| www.6688.name-七彩国际美容华联| www.19944.cc-体育彩票国庆放假| www.63748.com-福彩票双色球开奖| www.032498.com-彩票在哪里买| www.121324.com-彩票查询软件哪个好| www.186454.com-百盈快三是什么彩票| www.265360.com-上海快三综合走势| www.333010.com-天天爱彩票官网| www.ao2.com-快三注册38-| www.j57.me-正版藏机图福彩3d| www.486338.com-足彩奖池奖金是多少| www.574116.com-老师可以买彩票吗| www.246471.com-彩票快三单查询结果| www.685305.com-安装福彩3d彩票| www.763708.com-吉快三走势图带连线| www.902705.com-彩之云-| www.961984.com-在网上买彩票靠谱吗| 500彩票www.51515r.com| www.eb06.com-众彩网app下载| www.uz32.com-人人彩是什么| www.06fu.com-3g彩票网网址| www.73sp.com-大乐透彩民乐解释图| www.2335.cm-澳门博彩短信广告词| www.8565.top-福彩今日开奖号| www.488575.com-中国乐彩彩网| www.555949.com-美狮彩票经销商| www.620440.com-神圣彩票平台怎么样| www.680808.com-内蒙中福快三| www.749028.com-中彩华南致富快三| www.807199.com-温州福利彩票总站| www.871664.com-足彩手机过滤软件| www.980122.com-竞彩让球胜平负推荐| www.cp078.com-分分快三咋看走势图| www.901520.com-牛彩论谈首页官网| www.132283.com-彩票介绍-| www.003404.com-恒大彩票71158| www.129346.com-体彩昨晚开奖号| www.206696.com-内蒙快三今天推测号| www.298358.com-1分快三在线计划| www.506339.com-彩杏娱乐平台注册| www.589899.com-足彩推荐足彩| www.uc12.com-91彩神app-| www.3857.bid-福彩字迷图迷汇总| www.715572.com-新福利彩票总汇| www.841012.com-噢客彩票网网| www.966209.com-广西快三群里赌博| www.yi8.com-大发快三程序破解| www.xw58.com-彩六官网下载ios| www.82os.com-3d全彩里库-| www.7294.cn-彩虹e台节直播源| www.33146.com-全民彩票网址是什么| www.77922.com-正版福彩3d谜面| www.045491.com-彩神通代理4码| www.137013.com-福彩店怎么盈利| www.234350.com-微信彩票-| www.301609.com-万彩吧6合资料下载| www.365027.com-彩民红高手-| www.441190.com-福彩3图迷字谜总汇| www.525631.com-极速时时彩计划网址| www.667815.com-福利彩票造假新闻| www.734800.com-老杨说彩双色球预测| www.799168.com-184彩票下载| www.860569.com-外围彩票网站排名| www.916551.com-中国竞彩足彩500| www.971341.com-彩票易位原理| www.cai689.com-必中快三计划免费版| www.le77.com-中彩彩票中福快三| www.p03.com-微彩票网站-| www.49zw.com-彩票高人指点号码| www.20424.com-福利彩票线上选号| www.039955.com-四场进球彩对阵表| www.345148.com-网络购彩500| www.421212.com-山东彩票软件下载| www.711861.com-单关足球竞彩推荐| www.730608.com-足球竞彩购买| www.859757.com-456彩票-| www.939256.com-旧版彩神争争霸2| www.982638.com-鸿彩app怎么样| www.nr42.com-福利彩票手机兑奖| 九五彩票www.95555w.com| www.rd54.com-快三360遗漏数据| www.7381.vip-懂球帝可以买彩票吗| 大赢家彩票平台www.221075.com| www.pq40.com-3d快三开奖结果| www.59hp.com-体彩竞彩混合过关| www.048424.com-福彩排列五玩法说明| www.159145.com-无锡福彩网-| www.227202.com-福体彩票开奖公告| www.332615.com-买彩票的正规平台| www.65ob.com-高频彩种专业品牌| www.2253.com-今天安徽快三开奖| www.rs66.com-快三彩票代理| www.23jr.com-彩票是人为控制的| www.346.pw-55世纪购彩合法吗| www.4024.biz-腾讯分分彩api| www.9701.org-体育彩票出什么奖| www.981674.com-体彩大乐透直播| www.643535.com-香港49码彩票開獎| www.428424.com-59博论坛免费彩| www.973504.com-3d走势彩吧-| www.ct97.com-大发快三在线投注| www.f24.net-聚鑫乐彩怎么样| www.82xm.com-挂机彩票可以挣钱| www.8896.bid-江苏竞彩-| www.83758.cc-买彩票的好处与坏处| www.062300.com-淘宝不能买彩票了吗| www.866547.com-福彩3d昨天奖号| www.56913.com-腾讯分分彩四星技巧| www.086411.com-彩客彩票老版本| www.685031.com-1216手机彩票网| www.900973.com-中国体彩报竞彩推荐| 39彩票www.3933v.cc| www.588029.com-购彩v注册链接| www.812086.com-体彩排列五计算口诀| www.54vy.com-昔日的彩票专栏| www.1357.xyz-28彩票网-| www.19366.cc-彩82app-| www.69771.com-易彩网怎么下载|