头像

jQuery响应式网站banner图片轮播特效

来源:http://www.gay-online-webcams.com/js/4369.html 18***38 2019-05-21 11:37浏览(62) 收藏

jQuery响应式网站banner图片轮播特效,自适应手机浏览,带左右按钮控制图片轮播切换,轮播时有淡出淡现过渡动画效果。
jQuery响应式网站banner图片轮播特效
分类:图片代码 > 图片轮播 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ525945990直接充值

查看演示 下载资源: 2

手机扫码访问:

下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<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>
最新交易
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

  • 头像 沙发
    7小时前 10:21
    AJ***on
    这轮播图看起来很不错,谢谢分享!
1 2
火红彩票 www.685373.com-福彩3d组三计划| www.828518.com-欧洲彩票奖金排行| www.911959.com-彩票刷彩金-| www.978431.com-七彩石原石-| www.km13.com-足彩资讯在哪| www.k23.cn-牛彩网独胆王| www.44du.com-江苏快3彩彩乐乐| www.674.mobi-重庆时时彩漏洞刷钱| www.4933.cm-8288彩票下载| www.04231.com-体彩助手扫码出票| www.53325.com-一分钟时时彩图片| www.99756.cc-巨人彩票软件| www.072515.com-cp710彩票官网| www.139022.com-南粤36选7好彩一| www.220246.com-炫乐彩票app官网| www.299072.com-时时彩历史开奖号码| www.375044.com-五分⑥和彩怎么玩| www.606390.com-q彩链接-| www.679161.com-注册就送彩金的游戏| www.760488.com-福彩三d新彩吧字谜| www.869659.com-有人推荐买鸿运彩票| www.951625.com-网易体育彩票| 奔驰彩票www.750966.com| www.em25.com-彩吧网论坛-| www.we48.com-qq彩票网页版| www.14qf.com-彩票开发的行业前景| www.0155.vip-穿越彩云国之仙| www.6825.top-体彩第18151期| www.20281.com-今日体彩足球竞彩| www.126901.com-彩铅画明星-| www.202643.com-四川省体育彩票| www.275962.com-那个彩票中奖率最高| www.411789.com-彩票怎么玩视频| www.517346.com-高频彩网站app| www.587395.com-3d福利彩票返奖率| www.661572.com-竞彩单场开奖时间| www.829786.com-彩票大师软件怎么样| www.900093.cc-288彩票平台官网| www.966791.com-大连体彩中心| 9号彩票www.80767n.com| www.gd84.com-快三街机视频| www.j76.biz-彩票平台网站维护| www.47jp.com-金手指胜负彩| www.711.pw-福利彩中奖彩民| www.4572.biz-省级快三-| www.9795.loan-七星彩兑奖时间| www.95513.com-体彩足球低级赛事| www.091559.com-彩票99苹果户端| www.166126.com-快三走势图怎么看| www.272815.com-pc彩票是是什么| www.357950.com-体彩排列3奖金| www.459829.com-求七星彩直码网址| www.577172.com-人人彩球app| www.651080.com-水彩3d画教程简单| www.756524.com-208彩票网客户端| www.843644.com-佛山福彩兑奖中心| www.910833.com-三d玩彩老头预测| www.965560.com-线上彩票靠什么赚钱| 彩票大家乐www.21202x.com| www.es78.com-正彩登陆-| www.277875.com-双色球分析中彩网| www.874903.com-有游彩票吧-| www.968049.com-中央巡视彩票| www.jo2.com-河南快三遗漏查询| www.029236.com-神州彩票网下载| www.597100.com-赛马结果派彩| www.666710.com-乐透彩票网安全吗| www.739028.com-世界杯彩票app| www.805712.com-一分钟时时彩计划| www.876683.cc-利澳彩票不能提现| www.979903.com-广西体彩手机投注| www.cp7618.com-河北快三下载安装| www.ka17.com-新宝彩票下载| www.a15.top-彩票6000万无人| www.22mw.com-体育彩票贪案| www.824.tv-时时彩冷热规律| www.4592.biz-众彩易购是什么快递| www.9794.biz-k彩平台登陆| www.61074.com-三d彩经网-| www.017592.com-亿发彩票官方网站| www.082735.com-体育彩票店的发展| www.141199.com-广州鸣彩服务电话| www.214752.com-彩乐漂北京足彩单场| www.281889.com-复式彩票-| www.395533.com-七乐彩一周开奖几次| www.509362.com-利盈彩票国际| www.575952.com-彩票app活动| www.639441.com-彩票站买假刮刮乐| www.738923.com-老快三技巧数学公式| www.804966.com-篮彩算不算加时| www.873810.com-彩31网站-| www.961078.com-大众彩票手机| 易彩网www.36166h.com| www.cm45.com-福彩咋玩-| www.rt40.com-中彩彩票教学| www.09nd.com-福建体彩泉州乐聊天| www.72lu.com-竞彩串关计算方法表| www.0832.date-彩美旬果手机云播| www.8028.xyz-水彩森系古装少女| www.23511.cc-彩票发展史-| www.60458.cc-北京体育彩兑奖中心| www.077708.com-算局画规七星彩奖表| www.133523.com-手机买彩票软件下载| www.201680.com-十分快三稳定计划| www.265391.com-上海快三走势图下载| www.372503.com-彩色的翅膀主要内容| www.455458.com-彩票官方运营平台| www.536020.com-网上哪种彩票真实| www.629004.com-福彩双色球奖池余额| www.690313.com-进球彩走势-| www.758583.com-大发快三邀请码高倍| www.857943.com-动物总动员彩票| www.911650.com-地方彩票有哪些| www.967196.com-即时开彩下载app| 易彩网www.12455f.com| www.bg39.com-鳄鱼彩票高手| www.qd88.cc-76c彩票网站| www.00cm.cc-快钱彩票合不合法| www.57ao.com-特彩吧天空与你同行| www.783.cn-彩879彩票-| www.3889.xyz-七星彩图片幽默图片| www.8744.org-安徽快三冷热号统计| www.60277.com-长春市双阳区黑彩| www.009232.com-体彩福彩每天开奖号| www.067579.com-彩票店如何做私庄| www.124858.com-迷彩免视频-| www.183786.com-河北快三杀号技巧| www.243530.com-快彩是国家正规的吗| www.305950.com-彩虹六号腾讯| www.367244.com-彩票最大的奖| www.444501.com-老品牌-明发彩票| www.527674.com-时时彩猜数字规律| www.735545.com-中国彩吧更慬彩民| www.798936.com-8彩票论坛-| www.863241.com-19050胜负彩| www.905139.com-太原彩票站转让| www.954351.com-家彩网排三胆码预测| www.989958.com-彩漂成分-| www.cai27.com-江西快三走势图| www.gx86.cc-鸿彩网app下载| www.vd24.com-49彩票会员登录| www.6sf.com-就餐送彩票违法吗| www.49tl.com-中国福利彩票做假| www.289.biz-彩票输惨-| www.2959.cc-体彩标准店-| www.7468.cn-厦门人做彩票的多吗| www.17579.cc-淘宝彩票停售公告| www.53537.com-时时彩安卓app| www.89490.com-新彩娱乐-| www.031680.com-七星彩历史号码查询| www.096122.com-福彩文化-| www.146444.com-篮彩韩篮比分直播| www.334728.com-福利彩票3d预测| www.388756.com-体育彩票大乐透图片| www.505633.com-炫彩粒子hd-| www.561686.com-世界杯彩票奖金多少| www.616895.com-福利快乐彩开奖结果| www.674777.com-福利彩票33-| www.733389.com-三d开走势图彩宝网| www.784633.com-手机在线彩票| www.831072.com-577彩票安全吗| www.884324.com-彩票平台猜大小| 500彩票www.557032.com| www.dr84.cc-快彩下载安装到手机|