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.236329.com-下载360彩票| www.9184.cc-网上买彩票可以挣钱| www.72237.com-彩票开奖终端机| www.sj14.com-上海快三专家预测| www.38dx.com-时时彩大全-| www.508663.com-九久彩票-| www.613416.com-七星彩有哪些软件| www.713323.com-4亿彩票网页版| www.799510.com-搜索一品彩票网| www.881135.com-三d走势图彩吧助手| www.955558.com-足彩分折一新浪彩票| www.cai4033.com快三安徽开奖结果| www.nl00.cc-足彩资讯-| www.323593.com-海口七星彩开奖时间| www.795669.com-新加坡天天彩网| www.896617.com-彩票中千万大奖的人| www.yu98.com-山东省体彩兑奖流程| www.278076.com-国家福彩中心网站| www.683489.com-浙江福彩征召| www.896855.com-分分彩长龙-| www.993340.com-足彩大神论坛| www.ue22.com-五分彩人工计划| www.419.cn-鼎吉国际高频彩| www.9697.online赢彩网3d开机号| www.028647.com-排列三乐彩网断组| www.365728.cc-福彩98期开奖结果| www.169025.com-河南福彩快三| www.289883.com-福利彩票福彩三d| www.07353.com-彩色混凝土做法| www.54sd.com-彩票投注单打印软件| www.386162.com-港彩60876-| www.502528.com-永胜理财彩票| www.741037.com-探探投彩诈骗| www.578.red-代打彩票游戏规则| www.801578.com-手机购买彩票app| www.403104.com-鑫彩国际是真是假| www.954948.com-博彩白菜网址导航| www.529579.com-利盈彩票实时计划| www.858940.com-体彩返奖率-| www.015091.com-彩民买彩票上瘾| www.37hu.com-dd彩赚钱-| www.092193.com-吉林快三97群| www.364035.com-世界杯哪里有彩票| www.493051.com-时时彩几点开奖时间| www.743207.com-沙皇彩蛋-| www.939808.com-西藏福彩快3开奖| www.gh01.com-福彩中奖是真的吗| www.02ae.com-御彩轩计划软件官网| www.232883.com-网络彩票群骗局揭秘| www.333515.com-彩票数学理论| www.422515.com-环彩网最新版| www.179701.com-彩铅画-| www.zz74.com-七乐彩开奖号| www.041811.com-竞彩足球弃赛怎么算| www.417421.com-如何开卖彩票的店| www.960417.com-盐城彩民-| www.mb47.com-快三豹子中了多少钱| www.30ib.com-体彩刮刮乐兑奖方法| www.77172.com-柬埔寨博彩-| www.034525.com-焦点篮彩-| www.017232.com-152彩票网怎么样| www.272344.com-北京单场彩票| www.308879.com-江苏快三彩票下载| www.418345.com-上海市体彩中心主任| www.15212.com-玩时时彩有托吗| www.660920.com-陕西彩票安康| www.804046.com-七乐彩走试图| www.874344.com-订阅号体彩-| www.939716.com-彩票盛邦财团| www.988792.com-神兽时时彩app| www.cv13.com-架设彩票网站| www.xu42.com-彩票送礼金-| www.8760.vip-牛彩测速平台| www.822771.com-手机上怎买福彩| www.e36.top-首页新彩票走势图| www.38ig.com-彩礼多少钱是吉利数| www.342818.com-足彩让球详解| www.1232.vip-大发云彩神神争霸| www.320047.com-36o彩票开奖下载| www.043839.com-重庆时彩刷返点技巧| www.405497.com-彩票反思维倍投| www.806929.com-浙江福彩销售点申请| www.880380.com-快三遗漏数据一定牛| 乐发彩票www.84141.com| www.228872.com-广东福彩好彩1奖金| www.406055.com-彩吧论该首页| www.688537.com-山西体彩电话投注| www.806465.com-彩票模拟-| www.968595.com-中乐彩网站-| www.up72.com-内蒙古快三论坛| www.566391.com-彩票软件分析| www.696882.com-中国体育竞彩网比分| www.875758.com-梯子游戏彩票软件| www.85ei.com-台州转让福利彩票点| www.872053.com-买体育彩票几位数字| www.951867.com-官方幸运快三| 天玺彩票www.568380.com| www.539524.com-826网络彩票下载| www.630232.com-海南七星彩打奖| www.704907.com-彩票店买私彩| www.781780.com-分分彩不死挂机方案| www.879084.com-和彩资料大全10| www.320768.com-百宝彩网-| www.432566.com-一张体育彩票多少钱| www.1077.tv-七星彩开奖电视台| www.034983.com-坤彩科技发展前景| www.162378.com-彩票137中彩网| www.44010.com-七星彩梦图解梦号码| www.460836.com-输年月日查彩票运势| www.555604.com-江苏快三顺子中多少| www.003529.com-盈彩人工计划| www.1657.vip-万彩吧大乐透走势图| www.fj23.com-河北福彩双色球开奖| www.243993.com-广西福彩app下载| www.7js.cc-过生日可以送彩票吗| www.91zh.com-彩票500邀请码| www.99391.cc-首选500体彩网| www.678421.com-支付宝篮球彩票| www.766596.com-最新版全民福彩| www.894762.com-够力星彩-| www.966305.com-体彩图谜第二版| www.77361.cc-体彩奖号-| www.122435.com-乐彩vip安卓| www.yr08.com-山东福彩网论坛| www.037166.com-时时彩什么叫屠龙| www.298802.com-七星彩明月珰| www.7216.me-下载手机天天中彩吧| www.8572.cn-算彩票-| www.85697.com-北京体彩快11| www.085057.com-宁波彩票12选5| www.307702.com-彩票店早上几点开门| www.447522.com-足彩微信大神推荐| www.65175.cc-澳客网篮球竞彩比分| www.975708.com-专业福彩快三网| www.jy96.com-168j彩票-| www.788240.com-网易彩票开奖号号码| www.861939.com-体彩开奖公告开| www.936093.com-速8彩票真假| www.980657.com-易彩补漆笔哪个正宗| 博友彩www.979683.com| www.hm87.com-时时彩定一胆方法| www.114229.com-p3杀号定胆家彩网| 网易彩票www.501251.com| www.hh42.com-万能彩票分析器| www.l18.me-全天彩票计划网| www.46xn.com-中博彩票怎么样| www.349099.com-足球彩票代理| www.275490.com-彩6苹果下载安装| www.3229.cc-双色球凤彩网签到| www.267781.com-甘肃快三遗漏查询表| www.1768.cc-福彩300秒-| www.94905.com-卡姿兰彩妆加盟| www.687507.com-彩票刮刮卡下载| www.838009.com-复式彩票怎么算钱| www.up6.cc-彩票计划神器| www.656973.com-福彩3d质合是什么| www.37vl.com-福彩17500开奖| www.363383.com-彩虹是什么颜色| www.368893.com-彩铅画美人图化妆| www.2ns.cc-49cp彩票网-| www.93644.com-一分快三口诀| www.711861.com-单关足球竞彩推荐| www.022391.com-各省份快三开奖结果| www.531395.com-彩票买多少钱|