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天

知道了
1分快三 www.93cg.com-最近体育彩票点| www.id31.com-银川彩票中奖去哪领| www.006754.com-福彩直播间下载| www.131737.com-网上彩票怎么代理| www.270136.com-彩票应用-| www.579450.com-易购彩票是真是假| www.339770.com-彩吧彩图厍-| www.b37.org-福彩3地全图总汇八| www.020685.com-快2彩票怎么玩| www.210327.com-瑞彩祥云app官方| www.307739.com-好彩官方版-| www.418905.com-彩金项链图片| www.495117.com-彩票925-| www.738873.com-江苏快三红包群| www.706803.cc-博众时时彩论坛| www.466411.com-福彩七乐彩派奖规则| www.584838.com-旺彩3d专业平台| www.698337.com-彩库宝典资料大全| www.781069.com-8g网络彩票网址| www.862605.com-快三有东北快三嘛| www.948483.com-体彩3d基本走势图| 天下彩www.335484.com| www.23199.com-玩彩票大发快3技巧| www.01yt.com-揉纸法重彩画| www.359818.com-体彩刮刮乐网上兑奖| www.667070.com-乐彩网是干什么的| www.779850.com-中彩易叫什么| www.885318.com-最有收藏价值的彩票| www.993519.com-竞彩足球二选一玩法| www.41qu.com-彩票解梦大全查询| www.2880.hk-玩网络黑彩犯法吗| www.024.top-下载世界彩票| www.878953.com-极速赛车彩票小技巧| JJ彩票www.22503.cc| www.xq46.com-彩71彩票平台| www.151074.com-u9彩票是骗局吗| www.070954.com-约彩365中了5万| www.ij59.com-新九州彩票-| www.33503.com-福利彩票属于国企吗| www.325255.com-大数定律预测彩票| www.408652.com-体彩放假时间| www.t80.cc-中国购彩网-| www.72fr.com-香港官网有时时彩吗| www.4422.me-金祥彩票网开奖直播| www.689007.com-手机上购买福利彩票| www.790622.com-福彩太湖钓-| www.872061.com-彩票中奖自我查询| www.946921.com-高频彩票调整店关门| www.287797.com-博彩论坛发帖网站| www.313038.com-038彩票讨论群| www.367350.com-卫藤美彩-| www.448447.com-免费彩票计划| www.554010.com-熊猫时时彩软件| www.944659.com-有盈彩票-| www.04767.com-快彩网app官网| www.522767.com-彩虹51手机版| www.404.gg-金博在线彩票合法吗| www.556769.cc-苹果彩票计划| www.712664.com-7星彩开奖结果yy| www.795413.com-网上买快三倾家荡产| www.906923.com-福利彩票刮刮奖品种| www.zz2.cc-江西快三彩票网页版| www.c13.top-幸运快三怎么看大小| www.1961.club-深圳体彩店怎么申请| www.73217.com-c58彩票网-| www.007252.com-吉林快三精准计划网| www.922902.com-昆山福彩投注站转让| 凤凰彩票www.77803b.com| www.27923.cc-博雅彩票信誉好不好| www.054045.com-玩快三亏钱-| www.401231.com-703彩票香港报| www.624611.com-双色球字谜彩宝贝| www.5296.xyz-彩票采集教程| www.613951.com-香港生肖彩票| www.700082.cc-五百彩票网比分直播| www.105536.com-彩票助赢官网论坛| www.204911.com-一分快三公式| www.286565.com-捕彩老头排三预测| www.09805.com-福彩3d论坛| www.495398.com-彩漂液对孕妇的危害| www.693520.com-大乐透命中中彩预测| www.459544.com-竞彩单关推荐| www.48ni.com-星彩无慘-| www.970634.com-彩票团队群-| www.162529.com-福州福彩15选5| www.514228.com-会彩是骗局揭秘| www.609211.com-澳门老虎机派彩图片| www.ih28.com-新利快乐彩是真的吗| www.91cw.cc-今日彩票幸运选号| www.5031.cc-吉祥彩票是不是黑网| www.131771.com-山西彩礼-| www.238150.com-天天中国福利彩票| www.8137.loan-买澳门彩票违法吗| www.38089.com-彩票稳赚神器| www.868228.com-南国彩网-| www.969339.com-酷彩在中国有产地吗| www.268450.com-众彩网北京赛车| www.464904.com-竞彩足球信息网| www.602130.com-80彩票集团-| www.702571.com-新福彩3d彩票图片| www.803963.com-关于湖北快三的文章| www.888881.com-乐优彩票苹果版| www.989308.com-彩66网-| www.oe14.com-彩票送彩金白菜群| www.037706.com-可靠的快三平台下载| www.343838.com-学生买彩票-| www.468738.com-福彩3d太坑人| www.tk45.com-河南福彩走势图表| www.102665.com-网络彩票合法网站| www.8624.loan-百宝彩票电视走势图| www.184814.com-新彩app-| www.257948.com-彩99下载-| www.6912.net-顺丰彩票中奖率| www.711155.cc-竞彩足球分析师| www.02688.com-易彩账号注册| www.690345.com-310足彩星象图| www.115992.com-彩礼顺口溜视频| www.299778.com-广西福利彩票助手| www.379333.com-智行彩票-| www.428456.com-盛大彩票网登录| www.541799.com-精彩网站-| www.033185.com-网易彩票安卓下载| www.708624.com-订做彩票店走势图| www.82448.com-彩票图纸今天的局王| www.730119.com-37彩票app下载| 9928彩票www.9928l.com| www.975602.com-河南省福彩兑奖中心| www.288663.com-熊猫竞彩app| www.556810.com-苹果彩票彩app| www.638765.com-上海竞彩店申请条件| www.718163.com-菜鸟彩票登录| www.781721.com-彩票多少钱上税| www.839122.com-福利彩票詹天佑| www.906228.com-足彩竞彩计算器| www.965405.com-97彩票下载-| 易盈彩票www.www.7793h.com| www.030811.com-61彩-| www.176353.com-江苏快三福彩开奖| www.437316.com-超级赛车彩票怎么看| www.673096.com-湖北快三开奖视频| www.603851.com-福利彩票改革| www.369260.com-星辉彩票-| www.209802.com-快三跟计划能赚钱吗| www.666713.com-世界杯足球赛彩票| www.123606.com-台湾运彩朋友圈| www.9564.com-太阳2彩票网可靠吗| www.917252.com-网络彩票成瘾的危害| www.987583.com-福利彩票全国兑奖| www.5677.xyz-双色球彩票胆拖| www.850427.com-最新胜负彩奖金| www.923138.com-广州好彩1开奖结果| www.974602.com-易众足彩票店| 亿万彩票www.508869.com| www.962643.com-银河彩-| 购彩在线www.66332u.com| www.11sk.com-赢天下彩票正规吗| www.22600.cc-大学生玩彩票输钱| www.0815.online好彩票是骗人| www.98ik.com-轩彩娱乐网页版登录| www.739057.com-腾讯分分彩万能平刷| www.025302.com-安徽福彩3一定牛| www.700470.com-足彩如何兑奖| www.043001.com-足球彩票的区别在哪| www.64ou.com-福彩三d晒时票|