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.855608.com| www.58.com-亿元大奖彩票图片| www.966620.com-腾讯五分彩是国彩吗| www.ko02.com-一分钟快三技巧| www.776719.com-下载网上购彩| www.908025.com-合肥齐豪快三| 大赢家彩票www.602587.com| www.wr74.com-彩票二等奖容易中么| www.942374.com-go彩app下载| 博友彩www.628987.com| www.so08.com-七乐彩内部预测| www.0210.com-f彩网是骗人的吗| www.958820.com-彩票一般守号多久| www.ih7.com-快乐彩22-| www.a44.xyz-体彩中奖得主吗| www.43jo.com-足彩改期奖金怎么算| www.0300.com-福彩机器能过户吗| www.7883.vip-爱彩乐辽宁11选5| www.18od.com-十一选伍彩票| www.0111.website彩色是颜色词语吗| www.7457.xyz-体彩审批手续| www.7871.cn-十四胜负彩预测分析| www.45902.com-体育彩票f1-| www.025550.com-电脑内蒙快三| www.ao91.com-q彩网app下载| www.13oy.com-十一运夺金快彩乐| www.0678.net-买彩票在哪里买| www.11367.cc-天天玩竞彩-| www.010509.com-双彩网幸运飞艇| www.904569.com-彩票3d和值走势图| www.711258.cc-聚名彩票-| www.979852.com-驻马店快三开奖结果| www.29oy.com-昨天体彩中奖号是几| www.410071.com-圣哲世界杯竞彩| www.918305.com-8k彩票大发快3| www.020.press-彩吧天气网-| www.47774.com-陕西体彩中心在哪| www.647200.com-御都彩票登陆| www.836495.com-中原彩票网址| www.956057.com-投彩票上分下分| www.5707.xyz-福利彩票选三| www.52562.cc-最全彩票开奖记录| www.083609.com-彩票指南报体彩| www.276895.com-三分钟时时彩网站| www.847400.com-福利彩票七加一| www.cq36.com-快三彩票平台app| www.285.website七星彩三字定位全倒| www.614883.com-糯种三彩翡翠价格| www.035051.com-彩票平台刷返利教程| www.254347.com-糖果彩登录-| www.386930.com-c558彩票平台| www.666764.com-e乐彩提现可信吗| www.819710.com-彩钢瓦生产制造厂家| www.147324.com-彩02彩票极速彩票| www.926626.com-褔建体彩31选7| www.9314.cc-彩球滑梯作弊| www.041786.com-永9购十分彩| www.303899.com-甘肃体彩官网| www.496255.com-国外足彩app| www.656279.com-大发彩票官方网址| www.848426.com-体彩专家杀码预测| GO彩www.gocp0.com| www.106278.com-大陆能买外国彩票吗| www.224480.com-国家合法的五分快三| www.375016.com-极速五分⑥和彩资料| www.562983.com-南国彩票天涯论坛| www.778084.com-有谁中过彩票大奖| www.908489.com-七乐彩历史出球顺序| www.200662.com-181彩票-| www.342922.com-浙江体彩大乐透1| www.479509.com-足彩半场能交易吗| www.254317.com-爱乐彩票下载地址| www.588022.com-购彩v是不是骗人的| www.733465.com-体彩时时彩走势图| www.869527.com-彩神软件骗局揭秘| www.984265.com-用支付宝怎么买彩票| www.lp36.com-cp12彩票-| www.45rs.com-体育彩票店如何装修| www.76ph.com-彩票打票截止几点| www.96980.cc-重点古建筑彩绘| www.v59.cn-牛彩网一彩搜网| www.247088.com-彩票智能-| www.261005.com-网上可以买彩票吗| www.395261.com-足球篮球彩票app| www.659572.com-足球彩票一足彩投注| www.869678.com-中彩票的技巧规律| www.553266.com-高手玩竞彩-| www.671295.com-彩独2破解版| www.791740.com-最稳定的时时彩平台| www.949893.com-8炫彩彩票如何玩| www.46ug.com-三门峡快三开奖结果| www.589596.com-体彩第19025期| www.1056.cm-买彩票为什么一直输| www.263175.com-世界杯彩票去哪买| www.7439.cn-福彩中心会转企么| www.6013.biz-119彩票app-| www.952202.com-cc彩票分分彩| www.tr00.com-福建体彩31开奖号| www.713389.com-王者彩票算不算赌博| www.9253.online买彩票输了3万| www.02wr.com-360福彩网-| www.152450.com-福彩1d玩法-| www.8749.xyz-重庆市福利彩票| www.305930.com-买彩票中了50万| www.b81.pw-海南七星彩论准头尾| www.638888.cc-上海开彩票店赚钱吗| www.044101.com-广西体育彩票官网| www.413558.com-福彩万能七码走势图| www.8451.shop-买什么彩票稳赚不赔| www.412383.com-彩钢条牌匾-| www.874385.com-大同彩票合买app| www.50648.com-时时彩十大黑平台| www.675432.com-万景国际彩票稳定吗| www.87cu.com-淘宝为什么不买彩票| www.00322.com-怎么分析安徽快三| www.372717.com-中超彩票在哪里买| www.830245.com-哪里可以买彩票网| www.1838.in-优优反波彩平台| www.538660.com-百度彩彩票-| www.2808.cc-鸿运彩票安卓版下载| www.464389.com-七星彩领奖规则| www.89131.com-盈彩注册邀请码| www.kx64.com-快三代理怎么赚钱| www.7204.cc-七彩娱乐血战麻将| www.np42.com-福彩兑奖-| www.886202.com-大地彩票下载| www.374613.com-五青四精彩图| www.571028.com-天天彩票在线充值| www.58252.cc-安装天空彩票| www.2968.club-体彩3l选7-| www.657422.com-彩票开奖六活彩| www.357104.com-彩票领奖给现金还是| www.834414.com-杏彩平台注册地址| www.197072.com-彩票123导航| www.wt52.com-快三安徽形态走势图| www.17kn.com-关于彩票的书籍| www.1773.bid-中国体彩大乐透号码| www.198717.com-彩票赠送-| www.3098.cm-彩票开奖时间和日期| www.198745.com-玩彩正确倍投| www.942955.com-易购彩app-| www.880164.com-福彩3d杀码条件| www.605711.com-吉祥彩票稳赚计划| www.0280.net-阿里彩票下载安装| www.7980.biz-博彩骗局在国外| www.139506.com-五彩海棠-| www.78838.cc-132彩票新版下载| www.791656.com-彩票11选五内蒙古| www.50fu.com-烟台福彩中奖规则| www.656242.com-玩彩神争霸谁输了| www.5011.la-上和彩票-| www.678902.com-米兜彩票安全吗| www.6790.vip-网易红彩付费| www.590146.com-足彩每日分析推荐| www.778803.com-爱彩通有手机版吗| www.85507.com-四象彩票预测源码| www.656032.com-彩票纷争-| www.32mh.com-彩票双色球昨天的| www.505536.com-名人说彩票-| www.044593.com-快彩王app-| www.188070.com-时时彩五星规律| www.431800.com-彩彩票行家免费资料| www.291825.com-江苏省福彩快3开奖| www.8372.loan-61幸运福星七星彩|