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.66129.com-彩票选号怎么选的| www.673367.com-快三彩票中奖神器| www.052452.com-网上购彩票app| www.39hw.com-嘉兴福彩中心站| www.4322.biz-江苏福彩电话| www.571967.com-中国体育彩票| www.607098.com-天津福彩电话号码| www.576326.com-福彩3b开机号| www.1985.date-足彩买比分技巧| www.29lf.com-3d胆码彩票| www.2789.cc-彩票可以注销吗| www.887361.com-买福利彩票算赌博吗| www.cai0611.com汀苏快三走势图| www.034934.com-彩71官网下载| www.189238.com-福彩3d阴阳走势图| www.301272.com-彩票开奖排列五开奖| www.388148.com-华彩传媒学校怎么样| www.339814.com-彩票中奖啥时候兑换| www.427844.com-红彩会彩票下载安装| www.556984.com-网上买彩票是真的吗| www.639935.com-东方竞彩app| www.481107.com-澳客竞彩开奖结果| www.372132.com-美国五百彩票| www.547008.com-加好友买彩票| www.23922.com-官方双色球彩票软件| www.5358.cn-永利彩票网信得过吗| www.3819.xyz-今天开奖七星彩图| www.477995.com-浦发积分换彩票| www.066385.com-飞艇是哪里的彩票| www.725276.com-网上彩票赌博严重吗| www.31929.cc-大乐透彩票预测专家| www.131806.com-江油彩礼一般多少| www.520107.com-兰州新区彩虹城商铺| www.599185.com-万博网上彩票投注站| www.023176.com-体彩p3开奖视频| www.by14.com-吉林快三豹子规律| www.25919.cc-gay彩色旗-| www.173553.com-哪里有正规快三平台| www.962394.com-668@彩票网-| www.f16.xyz-中国福彩双色球走势| www.a93.net-博彩是什么-| www.27677.cc-宝马彩票是真的吗| www.iv06.com-足彩竞彩新浪投注| www.067118.com-彩票网站建设制作| www.008659.com-第19029期体彩| www.123626.com-燕赵福彩网电脑版| www.397857.com-今天买什么七星彩票| www.993381.com-足彩2串1对冲| www.gh90.com-彩票系统破解版| www.c02.top-中国竞彩网比分直墦| www.036891.com-彩票近500期开奖| www.136877.com-彩票账号登录异常| www.378351.com-k彩真的能挣钱吗| www.cp6770.com-下载快三技巧| www.54pd.com-彩票一般买几个数字| www.2090.in-爱达彩票-| www.5411.pw-1519彩票平台| www.um00.com-玩快三和值经验| www.801156.com-郎咸平讲彩票视频| 好乐多www.c760.vip| www.rk33.com-彩票中奖真实案例| www.94sm.com-玩彩票怎么损止| www.615916.com-快三秒福彩-| www.234761.com-竞彩足球彩票app| www.34343.com-上海福利彩票银彩通| www.054820.com-58福彩-| www.994320.com-尊彩网邀请码在哪里| www.nq02.com-彩票查询三十六选七| www.32zo.com-11选5彩-| www.fy41.com-福建福利彩票官方网| www.60go.com-下载福利彩票走势图| www.517636.com-35福利彩票下载| www.115974.com-新手买的彩票怎么看| www.063448.com-牛旺庄彩票站| www.165823.com-手机验证送免费彩金| www.252040.com-双色球擂台中彩网| www.323472.com-七乐彩现场直播节目| www.397143.com-长沙福利彩票市场| www.503978.com-彩票验票上写名吗| www.572122.com-福彩开奖带试机号| www.767116.com-关注一下彩票开奖| www.ox59.com-福彩3d技巧论坛| www.434896.com-彩29苹果版下载| www.92692.cc-竞彩给大客户返点| www.251196.com-网易彩票提现不了| www.2355.com-七彩虹gtx960| www.7069.pw-可以网络购彩吗| www.593989.com-特彩吧开奖-| www.618245.com-体彩彩吧助手| www.699866.com-正版神马报幸运彩| www.774921.com-瑞彩网登录-| www.087081.com-乐福彩票下载| www.179646.com-贵州快三中奖规则| www.f28.pw-乐彩网代理是骗局吗| www.872542.com-下载山西体育彩票| www.966700.com-五分彩的软件| 爱购彩票www.355274.com| www.hu23.com-快三豹子1最高遗漏| www.550486.com-2019最新博彩| www.628400.com-557彩票邀请码| www.754211.com-彩经彩票平台怎么样| www.253153.com-好彩app-| www.85551.cc-3218彩城彩票| www.7527.cn-最豪华体育彩票店| www.2197.wang-环球彩票无法提现| www.020943.com-多项彩票开奖软件| www.252618.com-好彩1预测-| www.379018.com-体彩双彩论坛| www.527461.com-彩票网直播-| www.629157.com-竞彩视频-| www.757995.com-希望彩票是骗局吧| www.167609.com-快三彩票开奖查询| www.364405.com-世界杯网络彩票| www.507986.com-刚力彩芽和纱荣子| www.575791.com-彩票是晚上几点停售| www.251009.com-建行的中彩啦靠谱吗| www.599750.com-中彩票1千万后| www.284100.com-彩票是几位数中奖的| www.646146.com-职业玩彩票的人| www.qp13.cc-pc彩票到骗局| www.760908.com-时时彩五星胆码公式| www.880094.com-徐文轩彩票预测网| www.956277.com-玩彩票如何控制贪欲| www.cy12.com-大发时时彩计划网站| www.8iz.com-天才彩票少女| www.848665.com-体彩宝安区在哪里| www.626071.com-黑客破解一分快三| www.2086.wang-苏宁体育彩票加盟| www.po84.com-360彩网首页| 乐彩网www.312299.com| www.616742.com-体彩排列三游戏规则| www.286708.com-今天的江苏快三| www.386555.com-3d彩宝贝金码| www.199728.com-app端彩祥云下载| www.81.la-彩票三d牛人中奖| www.32768.com-全民汇彩票怎么样| www.779258.com-腾讯天天中彩票官网| www.857050.com-彩22稳赚的方法| www.913499.com-澳客彩票app| www.3615.biz-用奇门测港彩实例| www.654521.com-心灵码仙七星彩规律| www.734739.com-非凡彩票网官方网站| www.805392.com-金彩彩票是不是骗局| www.896954.com-快樂双彩-| www.954476.com-彩经网排列三和尾走| www.998759.com-明发彩票主页| www.af40.com-彩票开奖今天| www.mu63.com-彩票天天中彩软件| www.633836.com-腾讯分分彩号码查询| www.732277.com-订婚退彩礼案例| www.799140.com-网彩交流群-| www.870335.com-黑彩票平台在那买| www.965531.com-彩票机吧-| www.28ve.com-彩票中奖被人冒领| www.978.cc-研究彩票中大奖的人| www.062354.com-老重庆时彩开奖号码| www.105122.com-新浪爱彩足球比分| www.983960.com-福彩刮刮乐兑奖流程| www.629565.com-彩色复印机排行榜| www.737444.com-随时赚彩票合法吗| www.040680.com-88彩票官方网站| www.338374.com-彩票腐1600亿| www.435034.com-虹桥的彩票专栏| www.638888.cc-上海开彩票店赚钱吗|