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.18eo.com-十一选五彩票论坛| www.543677.com-博彩三预测老头| www.018172.com-乐赢彩票是黑平台吗| www.00094.com-乐58彩票手机版| www.521208.com-三d彩报五码图| www.832032.com-第一彩票网安全吗| www.910691.com-中国体彩nba| www.973448.com-彩虹哥王者-| www.cp128.com-新韩国快三开奖结果| www.067619.com-网站彩票制作| www.27876.com-华阳彩票还能买吗| www.97305.com-彩票快三奖金是多少| www.615810.com-中彩彩票客服电话| www.701960.com-竞彩足球比分网直播| www.796665.com-众博官方彩票| www.874535.com-彩票拉菲平台| www.554261.com-形容中彩票的句子| www.rk14.com-釉彩大瓶-| www.47uz.com-世界彩票大奖| www.0778.xyz-491彩票下载安装| www.9079.org-k彩票网-| www.42220.cc-彩72彩票-| www.99661.cc-亚博体育竞彩网| www.103795.com-足球竞彩310预测| www.932691.com-正规快三app| 大赢家彩票平台www.917737.com| www.597729.com-七星彩论坛| www.684911.com-500竞彩比分| www.783100.com-大奖彩票站奖金多少| www.cp9568.com-全民中彩app| www.017845.com-四亿彩票官方网站| www.225501.com-双色球中奖彩票| www.222253.com-快三和值技巧| www.15es.com-嫁妆跟彩礼哪个多| www.740282.com-香港澳门彩票网| www.257004.com-在汉川开一个彩票店| www.347743.com-福彩时时彩在线开奖| www.309509.com-福彩三d位积和| www.670696.com-彩色的造句二年级| www.742647.com-购彩网658835| www.118483.com-体育彩票选号范围| www.0838.org-宝宝计划时时彩免费| www.991413.com-七星彩奖表电脑版| www.657.mobi-福彩3d中彩票| www.56650.com-盈彩网开奖-| www.059801.com-家彩论坛千禧试机号| www.303550.com-正版好彩客app| www.389079.com-澳客足彩官网| www.543978.com-杨彩旗-| www.623072.com-钻石彩票违法吗| www.101942.com-新浪足彩官网| www.f64.pw-海南私彩4位取码| www.013716.com-有多少人被亿彩骗了| www.833212.com-南海论坛七星彩论坛| www.974667.com-七星彩最新开奖消息| www.925234.com-江苏福彩快3官网| www.67nl.com-体彩中一亿大奖得主| www.123683.com-彩票拼搏在线| www.672556.com-彩墨-| www.187318.com-时时彩正规平台注册| www.31384.com-新浪彩票网预测| www.654691.com-抚州彩-| www.114447.com-京东彩网-| www.698208.com-福彩3d报纸图迷| www.144636.com-众彩网排列三千里马| www.227269.com-彩票系统破解版| www.306737.com-比较靠谱的彩票平台| www.107772.com-福彩3d字谜藏机图| www.215759.com-大发快三稳赚技巧| www.169298.com-安徽快三预测| www.859406.com-彩票分析师骗局案例| www.200073.com-七乐彩开奖号码| www.308512.com-马来三分彩官网| www.846558.com-中福彩中心处理结果| www.933785.com-福利彩票在哪里兑奖| 百姓彩票www.bxcp3.com| www.35531.cc-快三怎么邀请赚钱| www.007651.com-彩票88倍-| www.882944.com-彩之堂骗局揭秘| www.495058.com-58彩票吧-| www.03773.com-豪彩娱乐网上游戏| www.0394.pw-时时彩不倍投方案| www.076148.com-山东体彩下载| www.136114.com-怎样申请彩票投注站| www.225329.com-福彩快三的规律| www.606069.com-福彩400客服电话| www.625856.com-鑫彩娱乐平台登录| www.85786.com-老凤凰彩票登录平台| www.cai9044.com看一下彩票开奖| www.9321.me-吉隆坡快三是真的吗| www.58975.cc-国民彩票登录平台| www.86698.com-上彩传媒-| www.217898.com-内蒙古彩控-| www.85382.com-快彩乐开奖结果查询| www.250860.com-中福网彩票app| www.31513.cc-玩彩的朋友-| www.194907.com-上海体彩新11选5| www.02vc.com-彩虹什么意思| www.s27.net-福利彩票开奖日期| www.364468.com-世界杯哪个彩票| www.892027.com-竞彩足球改期说明| www.055567.com-申请福利彩票店难吗| www.054207.com-找吉林福彩快三| www.144068.com-丹麦快乐彩-| www.69062.com-博乐彩票骗局| www.890931.com-红彩会注册登录| www.27599.com-彩票查询计算器| www.135968.com-梦想彩票登录网址| www.87cc.cc-教人买彩票-| www.301881.com-5分快三怎么看走势| www.634725.com-建盏洋彩-| www.092726.com-商丘彩礼钱-| www.83gq.com-亿彩网娱乐-| www.62619.com-七星彩四码定位预测| www.720997.com-超级团队彩票计划| www.782888.com-卓易彩票官方网址| www.841319.com-彩妆蛋怎么清洗| www.892007.com-3d乐彩网-| www.968808.com-乐彩949499-| 博友彩www.979631.com| www.987861.com-福彩29选7走势图| www.08dv.com-3乐彩是真的吗| www.4151.biz-彩虹十号无人机| www.043468.com-3d彩民乐图库树| www.574300.com-体育彩票计算| www.653382.com-澳门彩票资讯网| www.85fr.com-足彩新手如何看盘| www.502935.com-欧洲杯足彩怎么买| www.713069.com-广东福彩微信号| www.gx01.com-百盈快三骗局揭秘| www.121843.com-福利彩票3d开奘| www.343757.com-8848彩票真的吗| www.957578.com-北京福利彩票有哪些| 幸运彩票www.73166i.com| www.hm61.com-上海快三怎么赚钱| www.386428.com-新火彩票手机版| www.665525.com-七乐彩复式模拟机选| www.6677.cm-三看亲彩调-| www.964964.com-彩票追加-| www.632370.com-彩店宝用不了| www.384803.com-大乐彩票开奖| www.028871.com-鳄鱼讲彩大乐透| www.522627.com-彩虹51挂挂网页| www.313581.com-福建省体彩中心官网| www.461872.com-彩票合买陷阱| www.26zh.com-体育彩票一线屏| www.588387.com-体彩七乐彩开奖时间| www.706707.com-5分钟开奖时时彩网| www.qn89.com-上期七星彩开奖号码| www.539563.com-可以买釉中彩餐具吗| 818合彩www.www.9889hc.com| www.7341.vip-航天彩虹无人机| www.4250.net-彩虹连接-| www.9727.cm-彩票搜索风云| www.nh37.com-彩票大赢家客户端| www.66223.com-老时时彩走势图分析| www.373110.com-吉林省快三调整| www.461001.com-彩票工具—今日运势| www.531156.com-彩铅手绘图片简单| www.1617.vip-体彩五星级怎么评定| www.089872.com-分彩套利-| www.hr89.com-彩票app下载总汇| www.66604.cc-彩票3d下载-| www.334353.com-快三现在一天多少期|