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.444953.com-义乌体彩投放| www.592786.com-广西福彩七彩乐开奖| www.691827.com-财神76c彩票| www.369451.com-福建省彩票网| www.518800.com-中彩票亲戚反目| www.596654.com-福彩3d预测软件吧| www.697196.com-中体彩彩票运营| www.775846.com-经典时时彩龙虎口诀| www.866920.com-昨天彩票3d开什么| www.cai9255.com下载河北快三走势图| www.975953.com-湖南结婚彩礼一览表| www.1mh.com-周日哪个彩票开奖| www.749.xyz-时时彩五星通选奖金| 趣彩网www.qucw4.com| www.717898.com-彩票投注技巧与方法| www.872182.com-时彩五星独胆技巧| www.045099.com-七星彩头奖多少钱| www.90xw.com-13彩是什么-| www.191183.com-苏州快三推荐号码| www.384902.com-彩83时时彩-| www.816233.com-八喜彩票重庆寸时彩| www.983574.com-外围体彩软件下载| www.qv57.com-福彩三天-| www.0868.net-优彩戴泽新-| www.479588.com-山西体彩在哪兑奖| www.462233.com-买2元黑彩-| www.116884.com-体彩试机号及金码| www.682007.com-五分彩预测-| www.478803.com-彩通官网折叠椅| www.911486.com-公益福彩是真的假的| www.982138.com-577彩票提款不了| www.70ma.com-大神推荐足彩竞猜| www.1813.top-彩c53彩票-| www.51419.cc-老品牌彩票平台| www.8768.cn-福彩3d金开网| www.07008.com-730彩票登录| www.126184.com-能抢红包的彩票网| www.850237.com-腾讯分分彩怎么看中| www.948377.com-2019网上购彩票| www.8388.win-福星彩是什么意思| www.61062.com-三d彩报开奖| www.533570.com-怎么举报黑彩| www.617828.com-广东福彩3d玩发| www.690313.com-进球彩走势-| www.012393.com-体彩排列三迷图总汇| www.7011.pw-3d彩票互数-| www.989808.com-老快三走势图| www.iq12.com-360彩票走势图表| www.xw08.com-彩票不能折叠| www.137395.com-随机彩票会中奖吗| www.872836.com-遵义福彩兑奖在哪里| www.765955.com-大发快三最准算法| www.599777.com-买彩票应该怎么说| www.878569.com-中国福彩网积分兑换| www.993488.com-彩票上的签名区| www.98.me-七星彩分析预测大师| www.31599.cc-易彩网福彩3d字谜| www.072298.com-时时彩免费开奖计划| www.243567.com-买彩票用啥软件| www.228282.com-河南商丘彩礼| www.bz34.com-乐彩官网app下载| www.37092.com-金山彩票苹果版下载| www.032586.com-搜索106彩票| www.29287.cc-彩虹的约定伴奏| www.d49.net-170彩票网双色球| www.716262.com-彩铅彼岸花怎么画| www.850470.com-足彩计算器手机版| www.974392.com-彩票分几种-| www.fv50.com-广西快三进群| www.5yf.com-福利彩票分分时时彩| www.2065.net-彩虹七号游戏配置| www.g64.com-安然七星彩专家总汇| www.381.biz-合肥体育彩票| www.332263.com-长沙体彩竞猜骗局| www.460093.com-验证手机号码送彩金| www.665483.com-网易开奖直播七星彩| www.818197.com-19040足彩-| www.964681.com-今日nba竞彩推荐| 大赢家彩票平台www.369052.com| www.pr96.com-体彩助手电脑版| www.079757.com-彩票扣税标准| www.3523.cn-彩六118版本| www.9980.top-福彩3d彩吧图今天| www.065175.com-彩铅画教程视频| www.148399.com-体彩购彩客户端| www.439928.com-姚记彩票下载| www.pn7.com-今日多乐彩走势图| www.501526.com-85255彩图库| www.995.la-体育彩票分几种类型| www.96671.cc-时时彩海南私彩玩法| www.50pl.com-易彩网登录下载| www.92cz.com-彩票试玩赚佣金| www.568261.com-正规彩票赚钱项目| www.088352.com-3d福彩十拿九稳| www.1698.bid-天际彩票必中方法| www.27739.cc-网上玩快三挣钱吗| www.91206.com-好彩四色爆珠多少钱| www.723754.com-彩票3等奖一般多少| www.13941.com-中国竞彩网合法吗| www.021189.com-长沙福彩网-| www.089356.com-彩神ix靠谱吗| www.430224.com-1分彩开奖历史| www.827338.com-微信金沙博彩骗局| www.981170.com-体育彩票排列三周六| www.19wa.com-22彩票平台提现| www.968805.com-乐彩vip官方| www.308285.com-七星彩体育彩票| www.445476.com-体育彩票怎么看开奖| www.9485.shop-彩钢夹芯板原理| www.088735.com-手机365彩票下载| www.91339.cc-欧盟好彩蓝莓怎么样| www.108363.com-彩影相册-| www.251164.com-彩票榜app邀请码| www.389863.com-郑州彩票转让| www.258072.com-大赢家彩票导航| www.831719.com-七彩注册-| 福彩网www.590777a.com| www.763317.com-足彩加苹果-| www.838025.com-玩快三真的赚钱吗| www.kf45.com-彩票走势图首页| www.2179.win-彩票当日开奖| www.hw10.com-宁夏快三49期今天| www.557378.com-快三回血计划| www.686698.com-建行彩票中彩啦| www.830292.com-彩票注册送29| www.540000.com-花式快三口令分解| www.001111.cc-大众六台彩开奘结果| www.540023.com-休闲快三动作分解| www.595652.com-怎样办理福彩站| www.653968.com-南昌体育彩票| www.704775.com-福建体彩网22选5| www.2947.vip-体育彩票店面图片| www.710064.com-网络彩票app诈骗| www.428722.com-种彩虹摇钱树| www.507586.com-市福彩中心地址| www.815256.com-腾讯旗下的彩票软件| www.890436.com-全民彩票app下载| www.965106.com-重庆时时彩骗局上万| www.ah45.com-特区彩票七星彩论坛| www.87732.cc-珠江彩票幸运飞艇| www.209348.com-时时彩快3怎么赚钱| www.274526.com-打快三有赢钱的吗| www.332040.com-快三二十分钟开奖| www.98250.com-竟彩比分直播5oo| www.925910.com-彩票店代买彩票| www.979087.com-好彩无嘴-| www.cp182.com-彩票152cc-| www.87219.com-速赢彩app-| www.69879.cc-财神彩票有人被骗吗| www.502312.com-男朋友买彩票| www.987606.com-全彩汇注册-| www.sh35.com-博彩可以破解吗| www.21961.cc-足彩任九场比赛结果| www.8816.xyz-足球彩票500网| 9号彩票www.80767r.com| www.020310.com-查彩票试机号今天| www.175761.com-彩神争8-| www.4552.vip-七星彩怪码历史| www.073605.com-长沙彩票中心官网| www.603779.com-足彩外围在哪里买| www.915970.com-入侵私彩教程| www.82ti.com-霍尊喝彩中华2| www.39118.com-强强彩票软件手机版| www.78966.com-178彩票客户端|