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.622087.com-彩票澳门快三怎么玩| www.798178.com-快三开奖要几分钟| www.907567.com-长春体彩客服| www.982142.com-信彩网下载-| www.je0.com-网易彩票购彩大厅| www.s66.top-香港电脑彩正版资料| www.65os.com-彩票站怎么样| www.1680.cn-彩票中奖计算公式| www.9357.xyz-cc国际彩票-| www.301736.com-球彩台下载-| www.431985.com-今天福彩怪字第二版| www.777304.com-六开彩投注客户端| www.21113.com-多赢彩票官方网| www.974263.com-环球彩票ahd| www.va88.com-彩票软件开发排行榜| www.32sy.com-众大时时彩信誉平台| www.82399.com-幸运时时彩定位走势| www.436686.com-福利彩票7-| www.238909.com-首充送38彩金| www.957785.com-皇帝彩票-| 国彩网www.guocai667.com| www.7194.biz-河南福彩七乐彩| www.910.la-素描彩铅画图片风景| www.666843.com-福乐彩票欺骗| www.756290.com-哪个app能买竞彩| www.840681.com-22彩票app官网| www.913967.com-福彩三d天庚图| www.973983.com-利盈彩票999| www.cai5234.com安徽快三结果图| www.8291.cn-天津时时走势图彩经| www.0yh.com-彩票助手怎么买彩票| www.37223.cc-四川体育彩票开奖| www.065807.com-必赢彩票跑路| www.613814.com-平安彩票安全吗| www.977868.com-七星彩10期开奖| www.2457.vip-博金彩票站-| www.284356.com-赢彩彩票网-| www.461883.com-福彩排五开奖公告| www.720821.com-2元彩票网官网下载| www.838388.com-山东彩友沙龙怎么了| 大赢家彩票网www.178652.com| www.6163.cn-彩票世界官网| www.85087.com-彩乐乐双色球选号器| www.2455.com-彩83苹果下载软件| www.787824.com-体彩排列5今天开奖| www.696036.com-彩票源码出租| www.896065.com-彩票今晚开奖号码| 亚投彩票www.ya350.com| www.9985.top-彩色压印混凝土广场| www.99488.com-体彩查询大乐透查询| www.742580.com-免费注册送彩金38| www.410050.com-世界杯竞彩分析推荐| www.77sz.com-私彩报警能破案吗| www.377387.com-彩票对联-| www.16801.cc-可变条码彩票定制| www.001524.com-新浪爱彩买票靠谱吗| www.111670.com-三分时时彩开奖结果| www.218299.com-福彩押大小-| www.331886.com-体彩大乐透怎么卖| www.681098.com-买彩票该不该放弃| www.7707.cn-一分快三玩法介绍| www.86758.cc-福彩3d牛网-| www.887957.com-平台彩票推广的老板| 乐彩网www.lcw199.com| www.yp95.com-在韩国中彩票| www.498261.com-01彩票靠谱么| www.166712.com-快三在线稳定计划| www.829519.com-158彩票计划| www.921605.com-用数学买彩票| www.984355.com-广州鸣彩服务电话| www.rq5.cc-福彩快乐三开奖| www.ua61.com-查今天彩票开奖号码| www.14sl.com-安徽体彩开奖时间| www.542163.com-体彩恢复网上购买| www.8647.loan-乐中彩票-| www.009258.com-新彩吧彩票网| www.203116.com-皇家快乐彩开奖结果| www.55348.cc-大发快三网页| www.98937.cc-时时彩三星跨度打法| www.707000.com-彩票2018年休市| www.981469.com-易彩彩民-| www.kp58.com-福彩快三概率| www.49yw.com-重庆时彩心得| www.2751.cn-福利彩票倍数和注数| www.099944.com-网络彩票禁止| www.211002.com-吉林省福彩中心官网| www.581965.com-内蒙快3彩票| www.722616.com-博雅彩票怎么做代理| www.807701.com-彩票中了5000万| www.9325.org-新加坡赛车彩票| www.719896.com-七星彩复式容易中吗| www.920966.com-河北福彩网站| www.dm13.com-体彩七星彩中奖条件| www.16515.com-中国足球竞彩网开奖| www.544661.com-福利彩票怎么线上买| www.745368.com-福彩3d开奖结果日| www.829137.com-双色球预测牛彩专区| www.913943.com-辽宁爱彩乐11选5| www.981189.com-七彩冰激凌-| www.cp9677.com-快三形态走势图河北| www.433334.com-彩中堂现场报码| www.ai29.com-海南体彩论坛| www.6289.vip-福利彩票3d彩报图| www.106582.com-彩票足球世界杯| www.207163.com-七乐彩哪年开始的| www.mt20.com-福利彩票复试玩法| www.751429.com-陶彩票app-| www.18645.com-澳超竞彩资讯| www.00ux.com-七星彩梦秘解图册| www.65or.com-彩票站怎么提成| www.811.red-彩计划手机版下载| www.901231.com-河北燕赵福彩排列五| www.hp11.com-玩彩票算赌博吗| www.02722.cc-什么是彩色混凝土| www.585022.com-掌聊买彩票软件下载| www.671278.com-万彩工具箱-| www.898787.com-篮球彩票推荐软件| www.ax45.com-上海基诺彩票玩法| www.b73.tv-时时彩和快三| www.185775.com-老时时彩基本走势图| www.257690.com-彩票开奖11选五| www.9766.com-中围彩吧-| www.57391.com-锋彩直播老版本下载| www.008283.com-19004期胜负彩| www.397988.com-够力七星彩计算局| www.7305.cn-彩虹六号不同版本| www.882114.com-百信彩票平台| www.258951.com-虚拟彩票快三投注| www.447700.com-大彩开挂-| www.449819.com-福彩专营-| www.181010.com-彩票1分快3怎么玩| www.383262.com-体彩样票有什么用| www.638887.com-800万彩票网| www.830641.com-领先彩票app| www.941125.com-新疆时彩开奖走势图| www.ig7.cc-彩宝贝大乐透杀号| www.044706.com-湖北快三输钱| www.384677.com-中国福利彩票口号| www.86sk.com-彩票导航线路| www.195159.com-篮球彩票规则| www.133390.com-152彩漫app-| www.8295.xyz-江西福彩电话| www.078906.com-彩16app-| www.799030.com-长城彩票真假| www.6067.cm-3d彩票的秘密公式| www.636010.com-好彩快三计划软件| www.026671.com-辉煌彩票是骗局么| www.703712.com-彩票王成周视频| www.796614.com-博众彩数字-| www.868605.com-七星彩合直走势| www.215967.com-中福彩票是合法的吗| www.731460.com-好彩烟蓝莓多少钱| www.981398.com-竞彩官方网站下载| www.94hb.com-众益彩票158| www.16985.com-时时彩私彩如何破解| www.64031.com-足彩中5808万| www.8366.cc-小辣椒七星彩规律图| www.072022.com-深圳体彩店转让更新| www.nj13.com-易眼金睛足彩推荐| www.39382.com-明天七星彩预测号码| www.jh08.com-旺旺彩票怎么兑奖| www.921171.com-彩票跨度怎么看| www.qo95.com-彩票走势网首页| www.19um.com-彩仙阁盈利宝|