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.318960.com-时时彩后三有多少注| www.505520.cc-体彩3d星期走势| www.594436.com-西安三彩家集团| www.681531.com-辽宁省福彩官方网站| www.777514.com-分分彩必赚方法网站| www.966855.com-紫云涧福彩预测号码| www.cp1868.com-内蒙古福彩快三视频| www.qd26.com-8亿彩在线下载| www.15bw.com-东北各地娶媳妇彩礼| www.397.website安徽福彩主任| www.5150.com-韩国彩票奖金四等奖| www.14707.com-七星彩在线幸运选号| www.66071.cc-福彩机选软件| www.067076.com-彩吧天气网首页| www.142773.com-微信打彩票-| www.229067.com-梦想彩票站用户登录| www.313199.cc-三分时时彩计算公式| www.392462.com-神仙预测彩票| www.567962.com-时时彩能网上买| www.654519.com-上饶市福彩中心在哪| www.763666.com-竞彩和外围-| www.851888.com-365足彩竞彩| www.928700.com-百宝彩账号怎么注册| www.993308.com-足球博彩入门知识| www.pu0.com-淘宝买彩票怎么买| www.su60.com-快三公式计划怎么用| www.23im.com-帮人代玩彩票| www.713.cn-为什么买彩票不犯法| www.5514.biz-m5彩票登录| www.15953.cc-中国福彩怎么玩| www.63906.com-足彩单关赚钱技巧| www.063296.com-福彩退机流程| www.154989.com-足彩冷门绝密分析| www.254433.com-爱乐彩票app| www.333384.com-玩彩什么意思| www.422238.com-联通彩铃下载| www.529008.com-体彩新浪直播| www.654227.com-久久彩票彩-| www.805551.com-易竞彩分析软件| www.886580.com-高频彩联盟官网| www.996945.com-尊彩网邀请码| www.qx5.com-彩票台北快三正规吗| www.si47.com-给账号代玩彩票兼职| www.18wv.com-德清体育彩票店微信| www.346.biz-1228彩票软件| www.4469.cc-彩票中奖怎么收税| www.02060.com-人人中彩是真的吗| www.72136.cc-富彩彩票是什么| www.039082.com-老时时彩助手| www.131576.com-四川彩礼-| www.212094.com-瑞彩祥云软件下载| www.290378.com-体彩兑奖多久到账| www.365960.cc-自学彩铅画教材| www.465986.com-怎么刷彩票流水不亏| www.557970.com-福彩快乐2o分| www.636291.com-彩虹兔分级阅读| www.792985.com-打击私彩赌博| www.876915.com-七乐彩销售时间| www.963354.com-彩票代买-| 500彩票www.66653v.com| www.hf39.com-彩票作弊插件| www.zr65.com-好彩门户-| www.30nv.com-彩虹世界破解版下载| www.1059.in-安卓版彩票计划软件| www.7942.vip-瓷器彩色种类| www.30388.com-福彩网址大全| www.77244.cc-众博彩票网骗局| www.028428.com-彩报图库中心| www.107285.com-彩票一千万收多少税| www.181031.com-中国彩票手机客户端| www.258096.com-成功彩票vip| www.333982.com-附近体彩-| www.412512.com-彩票代理计划员招收| www.525030.com-哪家彩票娱乐平台好| www.704904.com-向日葵彩票登录网址| www.787970.com-c27彩票官方| www.867422.com-家彩网杀号-| www.935657.com-安徽福彩彩票| www.983818.com-众彩网专家杀号| www.oo31.com-3d彩吧图迷第一板| www.z78.com-李彩潭作品-| www.55me.cc-大信彩票平台怎么样| www.0101.pw-彩票店头像-| www.8599.site-彩宝贝网彩票工具| www.42525.com-经彩出行收费| www.88359.cc-玩彩票的心理| www.045219.com-全球彩票下载最新版| www.150683.com-福彩黑彩网站| www.235565.com-6678彩票骗局| www.311799.com-福彩3d好心人布衣| www.381944.com-彩仙阁手机版| www.523836.com-体彩五位数开奖号码| www.608113.com-最新白菜彩金| www.683913.com-竞彩足彩彩票软件| www.761621.com-竞彩优化工具| www.872281.com-即时开彩新版下载| www.992332.com-时时彩预测大小技巧| www.kg5.com-江苏快三今日推荐| www.qa79.com-567彩票官网| www.03zv.com-北京体彩销售站点| www.72vt.com-彩票中奖猫腻| www.1111.org-竞彩绝巧-| www.8900.online竞彩大奖获得者| www.42756.com-足彩预测推荐| www.86793.cc-好彩频道在线直播| www.037088.com-盈彩彩票官网| www.137004.com-99彩票登录平台| www.210977.com-安徽快三遗漏号技巧| www.281689.com-六壬测彩票怎么取数| www.385693.com-金钻彩票登录地址| www.505380.com-福彩3dz字谜图谜| www.572677.com-亚博中标体彩项目| www.639842.com-东方集团三分彩票| www.746329.com-福彩双色球专家杀号| www.813047.com-哪家手机彩彯合法| www.880504.com-十分彩平台违法吗| www.968410.com-澳洲时时彩开奖| www.cai7700.com上海快三开奖走势图| www.km96.com-广州快三查询| www.d34.cc-万能彩票软件| www.29rg.com-lol电竞彩票| www.0109.top-猜冠军彩票的玩法| www.6202.vip-名彩客栈双胆| www.10799.cc-竞彩足球购买新浪| www.52376.cc-天猫彩票网-| www.92375.com-发展竞彩客户端| www.047326.com-乐彩论坛旧版下载| www.170172.com-湖南快三开奖号码| www.253927.com-大发快三作弊app| www.319575.com-亚博体育彩票靠谱吗| www.381863.com-天天中彩票进不去| www.518252.com-彩票代理怎么盈利| www.582785.com-借钱买彩票合法吗| www.651622.com-福彩3d走势图下载| www.752212.com-快三微信群大小单双| www.830837.com-新启旺彩票网址| www.895039.com-怎么投资彩票赚钱| www.958276.com-66彩票的网址| 爱购彩票www.3552d.com| www.bs55.com-老彩民app玩快三| www.rq46.com-三分钟一开的彩票| www.12wq.com-c16彩票-| www.76lj.com-上海福利彩票七乐彩| www.1282.in-078彩票代理| www.8770.vip-七星彩大公鸡梦册| www.37295.com-新星彩-| www.76598.cc-快三怎么守号中大奖| www.022001.com-山东福彩20选五| www.085578.com-旺彩预测软件手机版| www.139616.com-什么什么众彩| www.208106.com-彩票稳赚不赔的买法| www.270675.com-7彩网官方下载| www.409077.com-新浪足彩胜负彩投注| www.507234.com-保利鸣彩艺术可信度| www.569305.com-微讯彩票下载| www.631609.com-购彩网怎么注册账号| www.691770.com-好彩烟图片-| www.760978.com-开彩票站能挣多少钱| www.876765.com-香香彩票资料大全| www.959577.com-6060彩-| www.997050.com-湖北快三一定牛下载| www.cp0512.com-鸿运快三是骗人的吗| www.kh13.com-易彩票可信吗| www.yx13.com-福彩3d返奖率查询|