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.82dp.com-体育彩票怎么下载| www.98rq.com-彩票事件杀人| www.31159.cc-福彩3d选号软件| www.8310.net-江西彩票品种| www.742727.com-彩票屠龙软件| 彩经彩票www.22270.com| www.509535.com-爱心彩票是真的吗| www.707518.com-南充福利彩票投注站| www.947704.com-玩幸运快三犯法吗| www.21vi.com-体彩考试题库| www.7733.top-彩票工作人员要求| www.025753.com-优乐彩手机开奖| www.216252.com-大马彩最新开彩成绩| www.295239.com-福彩中大奖是真的吗| www.996657.com-福彩幸运三开奖号| www.w66.xyz-香港福彩门户新书签| www.1217.xyz-上海快三奖金哪来的| www.502382.com-kk彩票官网-| www.22251.com-最新彩票平台大全| www.779528.com-哪种彩票真实| www.tj9.com-北京快三官方开奖| www.497.biz-七乐彩开奖历史重号| www.516136.com-牛娃彩票-| www.710628.com-彩票套现怎么算| www.949283.com-易彩测速福地| www.q87.shop-快三会不会赔钱| www.9661.top-彩9彩票app-| www.9889.top-兴化彩票-| www.071788.com-彩票店吃票怎么判| www.83gg.com-七星彩七乐彩玩法| www.o35.cm-送人的彩票中奖了| www.8476.top-m5彩票下载-| www.ty05.com-彩票收米-| www.788165.com-足彩单关查询| www.6930.cm-七彩欢乐世界门票| www.454045.com-彩9网-| www.983258.com-竞彩足球安卓版| www.4826.top-天齐网福彩三d字谜| www.009787.com-快乐公益竞猜彩票| www.298387.com-七乐彩单式开奖号码| www.535897.com-福利彩票简介| www.2063.me-福利双色球彩票下载| www.92773.cc-立彩彩票官网| www.0416.pro-福彩3d金码10期| www.117072.com-竞彩足球对阵| www.54qe.com-福利彩票150期| www.161872.com-今日头条送彩票| www.372251.com-彩票app定制开发| www.549660.com-欧冠可以买彩票吗| www.887083.com-跟团队买彩票骗局| www.cp6680.com-中国福彩app| www.15eh.com-彩票与生活报纸图片| www.611780.com-新昌双彩茶苗黄茶| www.1441.xyz-彩铅画作品赏析| www.703606.com-福利彩票奖池金额| www.195566.com-广西快三预测与推荐| www.327406.com-彩票资料大全wap| www.491778.com-009彩票app-| www.384904.com-新版彩票下载| www.613381.com-微信群跟着买彩票| www.178846.com-快三计划群里的托| www.86408.com-彩票预测下期号码| www.484853.com-盈科彩票合法吗| www.609638.com-腾讯分分彩四星秘密| www.nj90.com-彩客-| www.044947.com-福彩3d专家买票| www.662881.com-国彩单关-| www.vr78.com-彩迷网东方6开奖| www.687750.com-彩神通彩票软件骗局| www.639727.com-体彩兑奖是拿现金吗| www.251994.com-手机彩经网-| www.380808.com-找回我的彩票| www.91987.com-丰彩网合法吗| www.150756.com-彩票缴税地点| www.286056.com-表格制作彩票算号器| www.916186.com-彩票站什么时候淡季| www.cx10.com-彩神x是什么| www.49vw.com-玩时时彩返点设置| www.93082.com-酷彩快三下载安装| www.394655.com-彩虹世界gv图解| www.786679.com-华夏彩票欢迎使用| www.355103.com-买彩票中奖怎样取钱| www.727719.com-福彩中奖号查询| www.258571.com-竞彩篮球-| www.sq84.com-新浪体彩福彩| www.232281.com-江苏快三必中方法| www.851252.com-连玩彩彩票-| www.995901.com-竞彩足球哪个好玩| www.rl04.com-七乐彩10中5| www.5988.bid-新浪彩票网页版| www.59557.com-真人百乐彩-| www.688964.com-私彩源码-| www.843515.com-福彩会不会改制| www.019605.com-湖南体彩中心| www.664743.com-七乐彩历次开奖结果| www.968890.com-浙江快彩-| www.41fh.com-七星彩投注平台搭建| www.766180.com-彩票风采网-| www.912447.com-8号彩票站是真的吗| www.og05.com-福利彩票官网开奖| www.1853.top-广西快三提示| www.xs13.com-体彩店能买双色球么| www.sm38.com-网赌彩票漏洞| www.315938.com-上海体彩兑奖| www.bt52.com-软件彩票大全| 6号彩票www.766602.com| www.763311.com-福建省福利彩票兑奖| www.843828.com-福利彩票管理条例| www.911543.com-排三双彩论坛手机版| www.991558.com-百宝彩免费账号| www.5865.biz-齐鲁风采彩票| www.45xt.com-双龙彩票-| www.205339.com-快三单双大小规律| www.362606.com-为什么没人买彩票了| www.284059.com-彩票昵称大全百度| www.215632.com-宁夏彩票种类及玩法| www.330024.cc-奥客彩网足彩14场| www.4209.win-七彩网投靠谱吗| www.01529.com-套彩金的彩票平台| www.097110.com-福彩幸运二开奖| www.198705.com-怎么看懂彩票| www.269039.com-彩票里面的砍龙| www.354013.com-买彩票怎么才中奖| www.456141.com-彩虹六号黑镜小技巧| www.579645.com-彩逸-| www.665486.com-彩虹岛游戏交易平台| www.768817.com-浙江体彩票-| www.880853.com-快发彩票app下载| www.va19.com-时时彩怎么买赚钱| www.63ry.com-132彩票网app| www.1166.org-彩票经典短语录| www.7741.vip-9号彩票正规安全吗| www.38226.cc-彩天下平台正规吗| www.62911.com-竞彩赛程表-| www.02vw.com-菲律宾福彩合法化| www.226746.com-彩票248app-| www.41ay.com-彩票站春节放假不| www.1629.vip-体彩五d今天推荐号| www.21592.cc-凤彩争霸-| www.89631.com-广州彩妆-| www.057375.com-体育彩票店有哪些| www.193713.com-甘肃快三开奖一定牛| www.302034.com-中彩易软件app| www.659145.com-快乐彩中奖说明| www.cl27.com-彩票平台网址| www.06iz.com-色彩画彩铅-| www.103608.com-九州彩票真的假的| www.89128.com-微信快乐彩是真的吗| www.974494.com-昨日福彩开奖信息| www.zc81.com-乐享彩票合法吗| www.50yn.com-竞彩足球腰斩奖金| www.3022.net-双色球杀蓝号彩经网| www.43360.com-百福彩票合法吗| www.94073.com-彩色耐磨地坪图片| www.200408.com-彩票图谜-| www.369465.com-福利彩票坏处英语| www.057367.com-江苏福彩公告| www.295710.com-江苏快三走势图预测| www.577683.com-彩票平台搭建出租| www.793160.com-彩票如何网上兑奖| www.3222.com-乐八彩下载-| www.070084.com-快彩3江苏-| www.712328.com-彩票老势走势图下载| www.832937.com-真三国星彩无惨|