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.2859.top-彩虹糖颜色味道| www.ey86.com-黑彩余额修改器| www.qj3.com-马来西亚福利乐彩票| www.tt89.com-安徽七星彩开奖号码| www.35795.cc-顶尖彩票软件可靠吗| www.916103.com-济南牛旺庄彩票| www.61016.com-机选一注七乐彩| www.31cw.com-周天开什么彩票| www.0889.win-福利彩票预测技巧| www.8429.pw-江苏竞彩网-| www.69224.com-500竞彩历史数据| www.039527.com-大中华彩票邀请码| www.52kq.com-江苏利彩是国家的吗| www.57304.cc-彩票手机投注app| www.940.xyz-体育彩票试机号码| www.688098.com-九州彩票的邀请码| www.787256.com-旧版竞彩篮球| www.871270.com-80彩票平台-| www.944892.com-乐发彩票官网下载| 明星彩票www.cp67.cc| www.066016.com-网站彩票代理提成| www.671310.com-彩独2破解版下载| www.758079.com-中彩网61233t| www.834385.com-日软好彩-| www.905692.com-大发快三和值推荐| www.971561.com-网易彩票app官网| www.570896.com-七彩山鸡蛋报价| www.672669.com-七星彩18152| www.750337.com-北京单场彩开奖| www.829019.com-做梦梦到中彩票中奖| www.899384.com-彩神通app-| www.969817.com-开始导航路线彩票| www.cai55.cc-河北快三推荐号| www.lo60.com-好彩票软件-| www.pv82.com-手机珠江彩票图片| www.41247.com-中彩的读音-| www.002205.com-快钱彩票是骗局吗| www.812153.com-亮彩-| www.896072.com-福利彩票内部数据库| www.970933.com-福利彩票都有哪几种| www.cp182.com-彩票152cc-| www.oy30.com-在微信上玩彩票| www.2xp.com-台湾基诺彩-| www.53uk.com-福彩3g画迷-| www.830667.com-福彩双色球摇号机| www.808688.cc-天玺彩票注册| www.7661.loan-体彩logo释义| www.172078.com-快三开奖助手安卓版| www.899846.com-天天中彩票软件| www.rh6.cc-牛牛彩骗局-| www.65ov.com-投资彩票站怎么提成| www.05041.com-体彩排3和值走势图| www.062475.com-59彩票平台-| www.131564.com-长春市福利彩票领奖| www.358942.com-七星彩幸运选号器| www.651995.com-上海彩亿-| www.715813.com-彩票代表什么生肖| www.448774.com-中国七乐彩开奖结果| www.3857.cc-竞彩资讯中国足球网| www.673239.com-中了七乐彩怎么领奖| www.805881.com-福彩猪年刮刮卡| www.781734.com-彩票多少钱开始收税| www.963721.com-乡镇开彩票店赚钱吗| www.zc26.com-甘肃彩票大奖| www.7312.loan-彩虹电视台在线直播| www.96nu.com-彩排的好处-| www.99688.cc-c27彩票下载| www.1447.cn-高手彩宝贝杀号| www.61159.cc-最新彩票093| www.212300.com-大发优彩网-| www.310163.com-云南省彩票中心位置| www.400109.com-盛世彩票官网| www.514933.com-免费加盟店彩妆| www.587286.com-福彩七乐彩如何兑奖| www.661473.com-网易彩票是真的假的| www.732009.com-河南结婚限制彩礼| www.84rk.com-9123彩票网页| www.29467.com-彩福彩票是骗人的吗| www.668181.com-七星彩开奖结开奖果| www.766300.com-15分钟开奖的彩票| www.859969.com-澳客赢家彩票手机版| www.946132.com-彩九c9com平台| www.995139.com-福彩主任违法事件| www.fk64.com-快三彩票是真的吗| www.bd27.com-万博博彩app| www.071252.com-足彩编辑-| www.628980.com-福彩任务代打| www.756011.com-怎么拉人来玩彩票| www.lx01.com-中国福彩网走势图| www.12308.cc-乐游彩票官网| www.66662.com-下载福彩3d预测| www.246181.com-一分钟快三技巧| www.343499.com-大连体育彩票招聘| www.409965.com-彩票平台源码在哪找| www.525542.com-福彩三d鑫鑫预测| www.080362.com-七星彩梦兆查询| www.004563.com-福彩七乐彩开奖顺序| www.125119.com-合江中彩票-| www.200096.cc-昨福利彩票开奖号码| www.41258.com-重庆福彩报app| www.008014.com-今天开七乐彩吗| www.088519.com-大乐透资讯新浪彩票| www.75761.cc-骰宝三分彩-| www.4618.vip-为什么会有彩票| www.586684.com-星力捕鱼送彩金| www.198637.com-大发彩票app安卓| www.269851.com-下载彩九送19元| www.891776.com-彩票自动发计划软件| www.969236.com-美女拉我玩众彩彩票| 彩61www.621764.com| www.099632.com-体彩试机号码查询| www.207372.com-彩票缩水软件| www.277150.com-重庆时时彩2星技巧| www.367421.com-上期福利彩票结果| www.507972.com-彩宝批发-| www.600075.cc-5a彩票平台登录| www.663874.com-nba彩票哪里买| www.754368.com-北京体彩中心官网| www.962161.com-玩彩网手机版| 500彩票www.50077c.com| www.xj08.cc-南粤好彩三开奖奖金| www.202819.com-快三走势图上海牛| www.288352.com-湖北快三爱乐彩| www.407748.com-看看福彩3d专业版| www.558120.com-玩网络博彩犯法吗| www.630418.com-今天的彩报图案全部| www.838045.com-72彩票-| www.954811.com-瑞彩祥云软件安全吗| www.cai2525.com湖北精彩十分| www.92su.com-韩国高频彩票| www.gt8.com-安徽快三官网查询| www.qz60.com-五分快三的玩法| www.97ud.com-皇爵国际时时彩| www.61iq.com-网上投资彩票赚钱吗| www.2413.cm-河北快3派彩网| www.169122.com-快三一定牛-| www.235200.cc-中国福利彩票网下载| www.390632.com-全彩漫画全本| www.518218.com-领彩网论坛-| www.211090.com-天下彩免费资料综| www.173769.com-6e彩票-| www.222715.com-湖北快三数据专家| www.858377.com-乐购彩票快3| www.950554.com-体彩排列三分析预测| www.41rb.com-吉利彩票怎么玩法| www.093893.com-新彩吧图迷字谜| www.541155.com-竞彩完场赛果| www.651745.com-彩票赚钱平台哪个好| www.787714.com-神马六给彩票| www.898492.com-扫一扫彩票-| PK彩票www.www.23040.com| www.il70.com-山东彩票彩友沙龙沙| www.19ka.cc-肥城彩票中3个亿| www.561816.com-内蒙快三一牛| www.21ut.com-七星彩下期杀号预测| www.791464.com-彩票一等奖的真实性| www.968394.com-9场胜负彩开奖结果| 500彩票www.552703.com| www.28711.cc-599彩票ios-| www.656301.com-彩之网手机版| www.768055.com-福彩快三的倍投方法| www.871256.com-豹赢彩票是真的吗| www.924508.com-众赢平台彩票| www.990860.com-彩票一分快三计划|