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.9109.net-南京福彩领奖图片| www.272344.com-北京单场彩票| www.611040.com-体育彩票店如何盈利| www.044651.com-外卖送彩票方案| www.132989.com-篮球彩票在哪买| www.317609.com-吉林快三专家预测号| www.460360.com-体育彩票是怎么玩的| www.581705.com-爱彩原创网-| www.663345.com-美东2分彩-| www.783184.com-福利彩票0312| www.511307.com-彩客网竞足胜平负| www.163626.com-七乐彩最多中多少钱| www.2gc.com-安徽体彩排烈三派送| www.922756.com-竞彩亚盘怎么看输赢| www.213769.com-足彩分析师收入多少| www.328233.com-上快三和值表奖金| www.sl0.cc-玩时时彩心态口诀| www.0632.top-武汉彩票转让信息| www.8996.club-博猫2分彩-| www.166324.com-快三开奖结果上海| www.ym46.com-福利彩票是真的吗| www.cz55.com-幸运快三预测| www.267655.com-彩票易中奖预测平台| www.630668.com-大奖彩票的登录口令| www.381745.com-更多精彩的恐龙视频| www.cp9256.com-中彩网软件下载| www.2230.vip-彩票平台求正规网站| www.9086.cm-北京pk10赢彩王| www.204712.com-体育彩票大乐透玩法| www.834176.com-好彩爽爆-| www.985908.com-快三号码计算秘诀| www.nm32.com-内蒙福彩3d-| www.11gb.com-七乐彩五分区走势图| www.55697.cc-福彩3d好难中| www.113713.com-贵州省体彩管理中心| www.231777.com-5分快三投注攻略| www.495155.com-彩吧排列三试机号| www.665083.com-欢迎使用078购彩| www.730922.com-易彩网首页-| www.411895.com-河内五分彩平台有吗| www.307888.com-福彩十五选五开奖| www.615168.com-三彩翡翠值钱吗| www.984153.com-福彩试机号码| www.288858.com-彩票名词-| www.468460.com-体育彩票刮刮乐兑奖| www.572382.com-南国彩票网-| www.688113.com-九州博彩下载地址| www.818988.com-买彩票经验-| www.950563.com-福彩3d杀跨-| www.sk04.com-百盈快三怎么玩稳赚| www.67747.com-微信博彩被骗| www.225414.com-福彩摇奖机能否作弊| www.453777.com-体育竞彩投注app| www.8065.cm-陈流水彩价格| www.579794.com-彩票当日开奖查询| www.gu63.com-上海福彩网官方网站| www.586630.com-新用户送38彩金| www.83oj.com-中国彩票七位数| www.3704.vip-腾讯qq彩票网| www.091517.com-手游彩官网-| www.216819.com-江苏快三彩票| www.324768.com-假的中彩网-| www.308.hk-彩票法律纠纷案例| www.dx19.com-彩票今天开奖吗| www.yy92.com-三分彩网站-| www.652132.com-查看一下彩票开奖| www.740258.com-永旺彩票app| www.810879.com-足彩18175期| www.947973.com-四川省体育彩票中心| 非凡彩票www.77210f.com| www.768477.com-爱乐彩票之类的软件| www.860604.com-全国快三开奖时间| www.928755.com-七星彩奖图表| www.978740.com-500w彩票网网址| www.cp063.com-江西多乐彩开奖结果| www.oa79.com-彩99旧版本-| www.578160.cc-足球竞彩论坛| www.653179.com-海南博彩受益股| www.737478.com-举报网络购彩平台| www.799823.com-新浪胜负彩必发| www.864837.com-手机彩票网投| www.919372.com-彩票打印机故障| www.997780.com-大发彩票注册| www.cp02.com-私彩报警追回| www.uj32.com-福彩3d彩经网| www.20uq.com-祥瑞彩云app| www.2321.biz-w彩票线路检测| www.35532.com-那些彩票是合法的| www.88073.com-14彩票网-| www.270468.com-新彩网手机版分析| www.337644.com-网上玩彩票心得体会| www.922269.com-约彩365安卓下载| www.926511.com-彩票达人app| www.566982.com-彩票网站定制| www.634285.com-特区论坛七星彩| www.711909.com-万豪彩票助手在线| www.787861.com-体育彩票历史开奖| www.865962.com-彩票开奖大全安装包| www.931869.com-彩多多网站-| www.979636.com-发彩送彩金平台| www.cai4199.com1分快三怎么玩| www.640722.com-荣耀彩票app| www.023984.com-海外足彩-| www.129925.com-234彩票平台| www.cai7933.com福建快三走势图| www.875088.com-彩票258下载| www.972142.com-韩国彩票开奖规则| www.mc21.cc-吉林快三规律| www.11pb.com-河内分分彩全天计划| www.p58.net-快三多长时间一期| www.83tf.com-中金彩注册-| www.676066.com-双彩开奖-| www.781809.com-彩票源码口碑排行榜| www.866595.com-星期五那些彩票开奖| www.960946.com-中超彩票-| 68彩票www.68689y.com| www.09cc.cc-星辉彩票登录官网| 百姓彩票www.bxcp3.com| www.7447.vip-怎么开好彩票店| www.3088.biz-体彩最大弃奖| www.404868.com-重庆不要彩礼| www.39732.cc-买彩票输了300| www.034123.com-中国体育彩票nba| www.356984.com-送彩票什么含义| www.001935.com-彩票中奖真实事件| www.sb66.cc-快3彩票软件破解版| www.634668.com-七彩狐泳装集团| www.78975.cc-随机彩票能中奖么| www.052953.com-竞彩足球500w| www.144377.com-竞彩2c1保本对冲| www.233974.com-中彩网快三真假| www.948630.com-体彩排列三组远| 成功彩票www.le33.cc| www.836292.com-银豊彩票-| www.923886.com-cp彩票骰子-| www.69174.com-体彩大乐透怎么买| www.472338.com-中国体彩体了大彩图| www.3954.cc-九场之醉足彩博客| www.057629.com-广西快三二码遗漏表| www.268108.com-辽宁体育彩票| www.74vl.com-时时彩彩票开奖时间| www.342255.com-百乐彩安卓版下载| www.489508.com-搜索彩吧3d-| www.0837.bid-网易彩票不能买了| www.988773.com-彩票程序的编程思路| www.321.name-乐彩赢攻略-| www.3222.date-178彩票网怎么样| www.035714.com-www106彩票-| www.158013.com-微信教你买彩票| www.cp2424.com-快三怎么才算中奖| www.y91.org-中国福利彩票可靠吗| www.94is.com-易彩云客服-| www.6808.org-3d下彩报-| www.107037.com-澳洲五分彩存在吗| www.908785.com-全国彩票走势图大全| www.985610.com-竞彩足球买比分技巧| www.cp7729.com-江苏彩票巨奖| www.556991.com-公牛彩票真的还是假| 财神网www.29277a.com| www.029043.com-二元彩票3d走势图| www.5379.club-新手买哪种彩票| www.043266.com-时时彩基本知识| www.108918.com-福彩快3嘉奖| www.474255.com-福彩三毛三毛总汇|