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.8143.me-福彩p62开奖公告| www.207952.com-彩票组合器-| www.931627.com-北京单场推荐彩客网| www.676869.com-足彩为什么都用狗万| www.772264.com-荣鼎彩有谁黑过| www.858694.com-快三14和值-| www.930087.com-北京快三线路图| www.987029.com-万博彩票怎么下| www.bm76.com-彩票大小单双玩法| www.b19.biz-福彩、体彩开奖公告| www.809052.com-上海快三和值怎么算| www.935832.com-一分快三是不是假的| www.tt9.com-爱彩乐彩票手机版| www.b92.cc-河南福彩跑马奖金| www.86qb.com-360竟彩直播| www.169687.com-分分快三平台| www.14.cm-买彩票顺口溜视频| www.6352.wang-福利彩票有没有技巧| www.290332.com-内蒙体彩-| www.732573.com-汇彩气球-| www.958863.com-360彩票开奖详情| www.cl31.com-k彩手机版-| www.02669.cc-彩票应用下载| www.226229.com-凤凰彩票导师微信号| www.39299.com-七星彩多少号开奖| www.319009.com-帮我查一下时时彩| www.402886.com-定亲钱和彩礼钱| www.032099.com-爱彩乐骗局-| www.450996.com-拉菲彩票手机版| www.35710.com-体彩加盟条件| www.6680.in-七彩云南游套票诈骗| www.333336.cc-腾讯分分彩必输| www.522995.com-时时彩计划在线预测| www.841734.com-外围竞彩竞猜软件| www.984781.com-重庆实时彩下载安装| www.6394.biz-5d里番全彩-| www.022295.com-时时彩牛牛规则介绍| www.238060.com-安徽快三规律破解| www.20pp.com-115体彩-| www.2707.cc-牛蛙彩票图彩好| www.111024.com-乐彩客官网下载| www.177380.com-如何破解快三买下期| www.160234.cc-快三杀号五技巧| www.341185.com-拉萨体彩中心在哪| www.45nz.com-竞彩只能去实体店吗| www.328850.com-下载青海福彩网| www.176825.com-彩票稳赢计划群| www.ve29.com-苏州福彩3d开奖号| www.733139.com-江苏福彩中心电话| www.977339.com-烟台彩礼2018| www.w54.cn-福彩3d彩宝贝杀码| www.831181.com-四月足彩赛程| www.0308.net-彩票是什么梗| www.53545.com-彩虹6号视频| www.773006.com-网上投注高频彩票| www.201813.com-网上购买双色球彩票| www.10736.com-新浪足彩分析推荐| www.69282.com-派彩电子走势图安装| www.536937.com-彩票黑点越少| www.631128.com-看体彩五走势图| www.688767.com-天天彩票网登陆| www.754119.com-韩国有哪些彩票开奖| www.827464.com-巴登五分彩是真的吗| www.900898.com-爱彩乐怎么样| www.959425.cc-3d彩吧图库冫| 好彩网www.hcw823.com| www.eh78.com-下载福建体彩| www.867293.com-福利七星彩-| www.zn89.com-彩票代打兼职群| www.517885.com-迷彩服-| www.613631.com-网上充值买彩票| www.368711.com-彩票与生活庄子说梦| www.ve31.com-江苏福彩七乐彩| www.18115.cc-竞彩比分方法| www.567324.com-江苏福彩3d开奖号| www.86567.com-福彩绝杀和值尾| www.319112.com-网易彩票网址| www.15xl.com-河南体彩怎么兑奖| www.53283.com-极速北京快三| www.639544.com-长治福彩中心在哪| www.3311.net-彩票动态图片| www.12829.com-周二篮球竞彩结果| www.5300.biz-凤凰时时彩分析软件| www.66qp.cc-怎么可以戒掉买彩票| www.079630.com-马来三分彩专家杀号| www.235052.com-新九州彩票-| www.357639.com-数学家计算彩票公式| www.178018.com-吉林快三走势| www.850967.com-竞彩初赔特点| www.923111.cc-108娱乐彩票下载| www.980039.com-彩票店如何装修| www.ps21.cc-鸿彩网-| www.q63.online-周四体彩彩票开奖吗| www.024458.com-假彩票网站骗局| www.59ci.com-体育彩票能作假吗| www.15866.com-体彩中心副主任| www.362350.com-写彩虹的诗句| www.8510.in-长春体彩中心位置| www.813734.com-甘肃体彩11选五| www.444449.com-时时彩开售时间规则| www.036027.com-快三如何才能赚钱| www.vu85.com-一分快三怎么能回本| www.555951.com-彩票试玩游戏平台| www.984340.com-福彩快乐十分计巧| www.16873.cc-正投彩票大发快三| www.260398.com-彩票是赌博吗| www.400925.com-七星彩五六位和尾| www.599865.com-oe彩票平台-| www.172351.com-福彩快三江西开奖| www.275171.com-中国福利彩票有规律| www.757921.com-下载中彩网怎么下| www.855383.com-7星彩复式价格表| www.947868.com-众彩网合法吗| www.993631.com-足彩奖池是多少| www.bi92.com-博友彩票登录| www.090630.com-彩票直通车彩票网| www.289448.com-七乐彩机选号码| www.356442.com-彩票充10送50| www.442900.com-非凡彩票工作室| www.866848.com-快三作弊软件| www.924477.com-6e6e彩票-| www.971002.com-福彩多少种玩法| 500万彩票www.96386g.com| www.87is.com-3号彩票靠谱吗| www.1055.cc-凤凰乐彩网-| www.095283.com-买彩票的方式有哪些| www.982803.com-湖北快三玩法对照| www.879369.com-福彩3d脑筋急转弯| www.ui46.com-快乐彩34-| www.75.tv-东方彩票骗局揭秘| www.58io.com-4c彩票送-| www.356648.com-宁波体彩中奖| www.066057.com-私彩平台代理大客户| www.162783.com-福彩杀码定胆| www.059671.com-下载appk彩-| www.498981.com-百万彩票是真的么| www.663577.com-中彩票去哪里领奖| www.782996.com-福运彩票安徽快三| www.880117.com-内蒙古彩票中心地址| www.db33.com-足彩分析师团队招聘| www.611032.com-梦见猪买什么彩票| www.691214.com-中福彩票平台怎么样| www.777444.com-澳客彩票是否靠谱| www.862743.com-七乐彩查询中奖结果| www.940313.com-福彩七星彩开奖结果| www.jl00.com-彩票选号技巧| www.118738.com-968彩票下载安装| www.207725.com-喜盈门彩票app| www.299621.com-南方双彩首页大全| www.390033.com-新加坡鸿乐彩网站| www.515973.com-如果买体彩月赚十万| www.614240.com-吉林市彩走势图| www.710689.com-七乐彩选号技巧| www.822313.com-碰碰运气选彩票号| www.913546.com-台湾福彩开奖现场| www.999984.com-体彩大乐透资讯| www.ik10.com-喜中彩-| www.722312.com-福利彩票红区中两个| www.47zs.com-荣誉彩票平台怎么样| www.258192.com-吉林快三三同号遗漏| www.56bx.com-下载上海福利彩票| www.024223.com-极速快三计划免费版| www.506788.com-唐三彩彩票app| www.682282.com-微信国际彩票|