帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 带回调函数的bannner轮播图
带回调函数的bannner轮播图
浏览:1030次
-
评论:0次
-
发布时间:2017-12-28
Html
Css
Js
1
我是回调函数....
3
<
>
*{ padding:0; margin: 0; } ul,ol{ list-style-type: none; } a{ text-decoration: none; } .banner{ width: 100%; height: 300px; margin:0 auto; position: relative; overflow: hidden; } .banner .box{ width: 100%; height:100%; } .banner .box li{ position: absolute; left:0; top:0; width: 100%; height: 100%; overflow: hidden; display: none; } .banner .box li.active{ display: block; } .banner .ban-nav{ position: absolute; bottom: 30px; left:50%; margin-left:-50px; display: none; } .banner .ban-nav li{ float: left; width: 15px; height: 15px; border-radius: 50%; background: #5e5e5e; margin-left: 8px; cursor:pointer; } .banner .ban-nav li:first-child{ margin-left:0; } .banner .ban-nav li.on{ background: #8a6d3b; } .banner .ban-btn{ width: 50px; height: 50px; line-height: 50px; text-align: center; background: #515151; color: #ffffff; position: absolute; top:50%; margin-top: -25px; z-index: 1991612; opacity: .7; display: none; } .banner .prev{ left: 15px; } .banner .next{ right: 15px; } /*-----*/ #obj{ width: 300px; height: 100px; margin:0 auto; margin-top:-100px; text-align: center; line-height: 100px; font-size: 36px; color: red; }
/* * author:wangzhihong * email:guailaoma@qq.com * time:2017.12.25 * 功能:回调函数、轮播宽高、轮播方式切换、轮播时间、自动轮播 * ---------------------------------------------- * 可配置项: * type: string 轮播方式,slide:左右切换,fade:淡入淡出 * area: array 轮播宽高 * aBgImg: array 背景图片地址 ---------必须传值 * animateTime: number 动画时间 * nCallback: function 进入下一个动画完成 回调函数 * pCallback: function 离开当前动画完成 回调函数 * auto: boolean 是否自动轮播 * autoTime: number 自动轮播相隔时间 * pageBtn: boolean 是否显示左右按钮 * * */ (function($){ $.fn.Carousel = function(obj){ var setting = { type:'slide', area:['100%','400px'], aBgImg:[], animateTime:500, auto:true, autoTime:5000, pageBtn:true, navBtn:true, nCallback:false, pCallback:false }; if(obj){ $.extend(setting,obj); } var this_obj = $(this); var nav_width = parseFloat(this_obj.find(".ban-nav").width())/2; this_obj.css({ width:setting.area[0], height:setting.area[1] }); this_obj.find(".ban-nav").css({marginLeft:-nav_width+'px'}); for(var j = 0 ; j < setting.aBgImg.length ; j++){ this_obj.find(".box>li").eq(j).css({ background:'url('+setting.aBgImg[j]+') no-repeat', backgroundSize:'100% 100%' }) } if(setting.pageBtn){ this_obj.find(".ban-btn").show(); } if(setting.navBtn){ this_obj.find(".ban-nav").show(); } function nowActive(){ var number = 0; for(var i = 0 ; i < this_obj.find(".ban-nav>li").length ; i++ ){ if(this_obj.find(".ban-nav>li")[i].getAttribute("class") == 'on'){ number = i; } } return number; } var now = 0; var setTime = null; switch (setting.type){ case 'slide': this_obj.find(".next").click(function(){ if( this_obj.find(".box>li").eq(now).is(":animated") ){ return false; } now = nowActive(); now++; if( now >= this_obj.find(".box>li").length ){ now = 0; } if(this_obj.find(".box>li").eq(now).prev("li").length > 0){ // 如果 有上一个兄弟元素 this_obj.find(".box>li").eq(now).prev("li").animate({left:"-100%"},setting.animateTime,function(){ $(this).removeClass("active").css({left:0}); if(setting.pCallback){ setting.pCallback(now); } }); }else{ // 如果 没有上一个兄弟元素,则执行最后一张 this_obj.find(".box>li:last-child").animate({left:"-100%"},setting.animateTime,function(){ $(this).removeClass("active").css({left:0}); if(setting.pCallback){ setting.pCallback(this_obj.find(".box>li").length);//最后一张的下标 } }); } this_obj.find(".box>li").eq(now).addClass("active").css({ left:'100%' }).animate({ left:'0' },setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(now+1); } }); this_obj.find(".ban-nav li").eq(now).addClass("on").siblings().removeClass("on"); }); this_obj.find(".prev").click(function(){ if( this_obj.find(".box>li").eq(now).is(":animated") ){ return false; } now = nowActive(); now--; if( now < 0 ){ now = this_obj.find(".box>li").length-1; } if(this_obj.find(".box>li").eq(now).next("li").length > 0){ this_obj.find(".box>li").eq(now).next("li").animate({left:"100%"},setting.animateTime,function(){ $(this).removeClass("active").css({left:0}); if(setting.pCallback){ setting.pCallback(now+2); } }); }else{ this_obj.find(".box>li:first-child").animate({left:"100%"},setting.animateTime,function(){ $(this).removeClass("active").css({left:0}); if(setting.pCallback){ setting.pCallback(1); } }); } this_obj.find(".box>li").eq(now).addClass("active").css({ left:'-100%' }).animate({ left:'0' },setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(now+1); } }); this_obj.find(".ban-nav>li").eq(now).addClass("on").siblings().removeClass("on"); }); this_obj.find(".ban-nav>li").click(function(){ if( this_obj.find(".box>li").eq(now).is(":animated") ){ return false; } var index = this_obj.find(".ban-nav>li").index(this); now = nowActive(); if(index < now ){ // prev this_obj.find(".box>li").eq(now).animate({left:"100%"},setting.animateTime,function(){ $(this).removeClass("active").css({left:0}); if(setting.pCallback){ setting.pCallback(now+1); } }); this_obj.find(".box>li").eq(index).addClass("active").css({ left:'-100%' }).animate({ left:'0' },setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(index+1); } }); } if(index > now ){ // next this_obj.find(".box>li").eq(now).animate({left:"-100%"},setting.animateTime,function(){ $(this).removeClass("active").css({left:0}); if(setting.pCallback){ setting.pCallback(now+1); } }); this_obj.find(".box>li").eq(index).addClass("active").css({ left:'100%' }).animate({ left:'0' },setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(index+1); } }); } $(this).addClass("on").siblings().removeClass("on"); }); break; case 'fade': this_obj.find(".next").click(function(){ if( this_obj.find(".box>li").eq(now).is(":animated") ){ return false; } now = nowActive(); now++; if( now >= this_obj.find(".box>li").length ){ now = 0; } this_obj.find(".box>li").eq(now).fadeIn(setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(now+1); } if(setting.pCallback){ if(now == 0){ setting.pCallback(this_obj.find(".box>li").length); }else{ setting.pCallback(now); } } }).siblings().fadeOut(setting.animateTime); this_obj.find(".ban-nav li").eq(now).addClass("on").siblings().removeClass("on"); }); this_obj.find(".prev").click(function() { if(this_obj.find(".box>li").eq(now).is(":animated")) { return false; } now = nowActive(); now--; if (now < 0) { now = this_obj.find(".box>li").length - 1; } this_obj.find(".box>li").eq(now).fadeIn(setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(now+1); } if(setting.pCallback){ if(now == this_obj.find(".box>li").length- 1){ setting.pCallback(1); }else{ setting.pCallback(now+2); } } }).siblings().fadeOut(setting.animateTime); this_obj.find(".ban-nav li").eq(now).addClass("on").siblings().removeClass("on"); }); this_obj.find(".ban-nav>li").click(function(){ if( this_obj.find(".box>li").eq(now).is(":animated") ){ return false; } var index = this_obj.find(".ban-nav>li").index(this); now = nowActive(); this_obj.find(".box>li").eq(index).fadeIn(setting.animateTime,function(){ if(setting.nCallback){ setting.nCallback(index+1); } if(setting.pCallback){ setting.pCallback(now+1); } }).siblings().fadeOut(setting.animateTime); $(this).addClass("on").siblings().removeClass("on"); }); break; default: throw "type:'"+setting.type+"',This type does not defined"; break; } // 自动轮播 if(setting.auto){ setTime = setInterval(function(){this_obj.find(".next").click();},setting.autoTime); // 每次手动切换banner时,都会重新计时轮播。 this_obj.find(".next,.prev,.ban-nav>li").click(function(){ clearInterval(setTime); setTime = setInterval(function(){this_obj.find(".next").click();},setting.autoTime); }); } } })(jQuery); // 调用方法: $(function(){ $("#banner").Carousel({ type:'slide', area:['100%','300px'], aBgImg:['http://www.sucainiu.com/themes/images/demo/500x300-1.png','http://www.sucainiu.com/themes/images/demo/500x300-2.png','http://www.sucainiu.com/themes/images/demo/500x300-3.png'], auto:false, nCallback:function(now){ // console.log("进入==="+now); if(now == 2){ $("#obj").animate({marginTop:'100px'}); } }, pCallback:function(now){ // console.log("离开==="+now); if(now == 2){ $("#obj").animate({marginTop:'-100px'}); } } }); })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.1.1
<!doctype html><html><head><meta charset="utf-8"><title>带回调函数的bannner轮播图-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:代码简洁,易用,上手快。
css3动画loading效果
3D导航翻转效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1030
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值