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.288116.com-预知快三软件下载| www.458386.com-百姓彩票七星彩论坛| www.69022.com-尊彩网官方-| www.224519.com-福彩兼职是真的吗| www.302856.com-福利彩票三分快三| www.185585.com-玩快三有什么诀窍吗| www.270957.com-好彩烟-| www.365250.com-体彩p3速查-| www.764734.com-彩票制作开发网站| www.954899.com-中国足球竞彩比分| www.o10.in-体彩三d走势图| www.005344.com-河北福彩地方彩票| www.125666.com-彩票随机生成原理| www.269342.com-高频彩网赌会作假吗| www.370683.com-彩钢板墙面净化设备| www.492942.com-内蒙快三历史数据| www.631982.com-优优彩票网提现| www.841685.com-竞彩与外围之间对冲| www.963098.com-江苏福彩彩票| www.at69.com-湖北省福利彩票官网| www.759532.com-福利彩票票样| www.871100.com-彩票投注计算软件| www.bq62.com-彩71首页-| www.060774.com-北正街附近体彩店| www.266072.com-福彩3d预测今天| www.826537.com-白马彩票-| www.249797.com-天天彩票官方软件| www.cp3319.com-中国福彩一分快三| www.530526.com-重庆时时彩预测技巧| www.319751.com-网易彩票又可以买了| www.322620.com-竞彩神人-| www.8847.cm-爱乐透彩票开奖公告| www.028795.com-支付宝彩神网靠谱吗| www.109544.com-求手机彩票挂机软件| www.036543.cc-快彩分析软件| www.687981.com-318彩票网-| www.789898.com-福彩双色球诗迷汇总| www.875010.com-山西彩票店-| www.468525.com-福彩3d开结果今天| www.cf29.com-世界杯足彩网上投注| www.852785.com-中国体育彩票一等奖| www.88249.cc-彩票支付宝提现| www.853026.com-快三高手投注技巧| www.504900.com-人生无彩排-| www.600076.cc-买彩票是真的吗| www.789597.com-竞彩让平干货| www.882974.com-时时彩单双稳赢技巧| www.b12.in-太子彩票成立多久了| www.4820.cc-盈利彩-| www.17559.cc-众赢彩票网站| www.90982.com-新浪福彩开奖| www.060721.com-六壬测彩票3d| www.233242.com-贵州福彩官网| www.9007.cm-下载安徽福彩网| www.057639.com-彩神帝8-| www.2136.shop-66cp彩票-| www.00025.cc-福彩3d矩形宝典| www.93832.com-足彩解读-| www.388837.com-搜福彩3a开奖号| www.810.bid-体育彩票浙江6+1| www.307361.com-好彩app下载| www.9449.loan-1分彩开奖记录| www.772286.com-如何在线买彩票| www.888789.cc-炫乐彩票可靠不| www.971523.com-中国福体彩开奖公告| www.xg3.com-上海快三软件| www.207696.com-快三软件链接| www.086258.com-大平台彩票聊天室| www.216396.com-7星彩玩法开奖说明| www.138866.com-互娱百盈彩票| www.hf90.com-0234彩票app| www.s70.cn-体彩排列三投注| www.65yq.com-天下彩资料-| www.973824.com-唯彩视频双色球宝典| www.98438.com-分分彩计算-| www.166339.com-河北快三推荐号| www.261565.com-大彩鲸快三助手| www.3vm.cc-彩票中大奖当富豪| www.72cx.com-彩客竞彩app苹果| www.170046.com-快三怎么玩法介绍| www.260192.com-十分快三走势图开奖| www.388692.com-福利彩票背面图片| www.619733.com-3d彩票直选技巧| www.862658.com-体彩体彩排列五开奖| www.950537.com-乐彩客官方下载苹果| 凤凰彩票网www.370766.com| www.760925.com-无极天尊吞好彩妹| www.f48.loan-马来西亚做彩票客服| 600万彩票www.548911.com| www.655493.com-网易彩票开奖直播间| www.756225.com-三分时时彩玩彩票| www.64011.com-南阳结婚彩礼多少钱| www.rm8.com-快购彩票官网| www.ky38.com-彩票ios下载| www.904026.com-大发快三彩-| www.761727.com-中国福利彩票图迷| www.308298.com-北京快三推荐号今日| www.923592.com-福彩坐私-| www.663469.com-分分时时彩杀号技巧| www.757468.com-01团队购彩计划| www.818528.com-中国福利彩票真实吗| www.70mp.com-365彩票网网址| www.6088.in-永盛彩票网靠谱吗| www.485456.com-快乐分分彩在线计划| www.31537.cc-中国福利彩票第| www.77080.cc-京彩集团下载| www.47428.com-好彩妹照片-| www.505168.com-天下彩址-| www.867997.com-七星彩图库图片| www.388637.com-500彩票能买吗| www.947754.com-爱彩乐是不是假的| www.052350.com-500万足球胜负彩| www.534661.com-七星彩中个号有奖| www.638156.com-竞彩店没客户| www.724479.com-男主买彩票中奖后将| www.838756.com-308彩票官网| www.604987.com-盈盈彩票苹果下载| www.696700.com-竞彩违法吗-| www.768805.com-百度彩票手机版| www.899121.com-订阅足彩310报| www.956356.com-七星彩开奖号吗| www.te8.cc-快三时时彩合法吗| www.hc34.com-8彩app-| www.449923.com-七乐彩带座标走势图| www.77913.com-彩云易散-| www.767342.com-天津时时彩开奖号码| www.839919.com-责任彩票答卷| www.902996.com-彩票网站制作怎样做| www.965508.com-福彩9+1多少钱| 梦想彩票www.33112h.com| www.01462.com-糖果派对3个彩金| www.16mk.com-周口体彩中心电话| www.137768.com-3d新彩吧图谜| www.217697.com-福彩一分快三下载| www.464.me-正德彩票-| www.6423.cn-体彩中奖提醒软件| www.47864.cc-玩甘肃快三技巧| www.260499.com-快三第一门户是什么| www.85178.cc-大连有福彩机出售| 淘彩票www.tcp969.com| www.881409.com-南国彩票论坛七星彩| www.974970.com-高频彩票开奖结果| www.yz8.com-河北福利彩票走势图| www.715.cc-非法私营彩票| www.va41.com-时时彩双胆技巧算法| www.892337.com-709彩票官方版| www.zy82.com-网上还可以买竞彩吗| www.447770.com-重时时彩三星走势图| www.028152.com-彩票验票码怎么用| www.340844.com-牛彩网摘彩网| www.801528.com-598彩票注册地址| www.866595.com-星期五那些彩票开奖| www.932532.com-中彩网彩民论坛| www.973820.com-福彩双色球蓝球规律| www.cp6781.com-爱彩乐快乐十分开奖| www.98129.cc-彩票刷机-| www.28726.cc-6号彩票平台登录| www.64557.com-全国彩色纸箱厂品牌| www.930484.com-梦到彩票中大奖| www.36098.com-投注福彩3d彩票| www.82871.cc-竞彩图片-| www.33012.com-福彩3d会员图| www.001344.com-天津体彩官网app| www.075290.com-双色球彩票价格|