jquery.slider.js jquery幻灯片测试

<!doctype html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>适配placeholder </title> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> jQuery.extend( jQuery.easing,{ easeOut: function (t) { return Math.sin(t * Math.PI / 2); } , easeOutStrong: function (t) { return (t == 1) ? 1 : 1 - Math.pow(2, -10 * t); } , easeIn: function (t) { return t * t; } , easeInStrong: function (t) { return (t == 0) ? 0 : Math.pow(2, 10 * (t - 1)); } , easeOutBounce: function(pos) { if ((pos) < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } } , easeInBack: function(pos){ var s = 1.70158; return (pos)*pos*((s+1)*pos - s); } , easeOutBack: function(pos){ var s = 1.70158; return (pos=pos-1)*pos*((s+1)*pos + s) + 1; } , bounce: function (t) { if (t < (1 / 2.75)) { return 7.5625 * t * t; } if (t < (2 / 2.75)) { return 7.5625 * (t -= (1.5 / 2.75)) * t + 0.75; } if (t < (2.5 / 2.75)) { return 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375; } return 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375; } , bouncePast: function (pos) { if (pos < (1 / 2.75)) { return (7.5625 * pos * pos); } else if (pos < (2 / 2.75)) { return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75); } else if (pos < (2.5 / 2.75)) { return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375); } else { return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375); } } , swingTo: function(pos) { var s = 1.70158; return (pos -= 1) * pos * ((s + 1) * pos + s) + 1; } , swingFrom: function (pos) { var s = 1.70158; return pos * pos * ((s + 1) * pos - s); } , elastic: function(pos) { return -1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1; } , spring: function(pos) { return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); } , blink: function(pos, blinks) { return Math.round(pos*(blinks||5)) % 2; } , pulse: function(pos, pulses) { return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5; } , wobble: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; } , sinusoidal: function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; } , flicker: function(pos) { var pos = pos + (Math.random()-0.5)/5; return jQuery.easing.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos); } , mirror: function(pos) { if (pos < 0.5) return jQuery.easing.sinusoidal(pos*2); else return jQuery.easing.sinusoidal(1-(pos-0.5)*2); } }); </script> <script> /** + ---------------------------------------- + + Slider组件v1.1 + Author: zzf + Date: 2012-3-30 + Update: 2012-4-11 + ---------------------------------------- + **/ $.Slider = function(opts) { if (! (this instanceof arguments.callee)) { return new arguments.callee(opts); } this.init.apply(this, arguments); } $.Slider.prototype ={ constructor: $.Slider, init: function(opts) { var self=this; //配置属性 $.extend(this, { wrap:null, effect:'opacity', //动画效果 淡入淡出opacity 横向xScroll 纵向yScroll interval:3000, fxTime:300, easeing:'easeOutBounce', event:'mouseover', selectedClass:'current', countClass:'count', auto:true, callback: $.noop //回调函数 },opts || {}); if (!this.wrap.length) return; this.ul=this.wrap.find('ul:first-child'); this.list=this.wrap.find('li'); if (this.list.length<=1) return; this.index=0;//当前索引 this.autoTimer = null; //自动切换Timer this.creatBtn(); //创建按钮 this.btn =this.count.find('li'); this.run(); this.autoTimer = setInterval(function (){ self.auto && self.next(); }, self.interval); this.wrap.bind('mouseover',function (){ clearInterval(self.autoTimer) }).bind('mouseout',function (){ self.autoTimer = setInterval(function (){ self.auto && self.next(); }, self.interval) }); this.btn.bind(self.event,function (){ self.index=self.btn.index(this); self.run(); }) }, //创建按钮 creatBtn: function (){ this.count =$('<ul></ul>'); var frag=document.createDocumentFragment(); this.count.addClass(this.countClass); for (var i = 0,len=this.list.length; i <len; i++){ var li = document.createElement("li"); li.innerHTML = i + 1; frag.appendChild(li); } this.count.append(frag); this.wrap.append(this.count); }, //切换到下一个 run: function (){ this.btn.eq(this.index).addClass(this.selectedClass).siblings().removeClass(this.selectedClass); this.callback && this.callback.call(this, this.index); //回调函数 this.doMove(); }, //下一个 next: function (){ this.index++; this.index === this.btn.length && (this.index = 0); this.run(); }, //运动 doMove: function (){ var self=this; if (self.effect==='opacity') { self.list .css({position:'absolute',top:'0',left:'0',zIndex:'1'}) .eq(self.index) .css({zIndex:'9'}) .animate({opacity: 'show'}, {duration:self.fxTime, easing:self.easing,complete:function() { $(this).siblings().hide(); }}) }else{ var SCROLL=self.effect==='xScroll'?'left':'top', NUM=self.effect==='xScroll'?self.list.eq(0).width():self.list.eq(0).height(), obj={}; obj[SCROLL]=-NUM*self.index; self.ul .css({'position':'absolute'}) .stop(false,true) .animate(obj, {duration:self.fxTime, easing:self.easing}) } } } //测试 jQuery(window).bind('load',function (){ var xSlider=new $.Slider({ wrap:$('#xScroll-box'), effect:'xScroll', easeing:'easeOutBounce', fxTime:400 }) var ySlider=new $.Slider({ wrap:$('#yScroll-box'), effect:'yScroll', easeing:'easeOutBounce', fxTime:400 }) var oSlider=new $.Slider({ wrap:$('#oScroll-box'), effect:'opacity', easeing:'easeOutBounce', fxTime:400 }) $("#sel1").change(function (){ xSlider.easing=$(this).val(); $("#sel1-txt span").eq(0).html("你选择了easeing:"+$(this).val()) }) $("#sel1-time").change(function (){ xSlider.fxTime=parseFloat($(this).val()); $("#sel1-txt span").eq(1).html("你选择了运动时间:"+$(this).val()) }) $("#sel2").change(function (){ ySlider.easing=$(this).val(); $("#sel2-txt span").eq(0).html("你选择了easeing:"+$(this).val()) }) $("#sel2-time").change(function (){ ySlider.fxTime=parseFloat($(this).val()); $("#sel2-txt span").eq(1).html("你选择了运动时间:"+$(this).val()) }) $("#sel3").change(function (){ oSlider.easing=$(this).val(); $("#sel3-txt span").eq(0).html("你选择了easeing:"+$(this).val()) }) $("#sel3-time").change(function (){ oSlider.fxTime=parseFloat($(this).val()); $("#sel3-txt span").eq(1).html("你选择了运动时间:"+$(this).val()) }) }) </script> <style> .scroll-box{width:490px;height:170px;position:relative;overflow:hidden;} .list{position:absolute;left:0;top:0;} .scroll-box .count{position:absolute;bottom:7px;z-index:20;right:5px} .scroll-box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;} .scroll-box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;} /*横向*/ #xScroll-box .list{width:10000px;} #xScroll-box .list li{float:left;} .scroll-box{margin:20px auto;} .sel{width:1000px;margin:0 auto;} #xScroll-box,#yScroll-box,#oScroll-box,#xScroll-box *,#yScroll-box *,#oScroll-box *{margin:0;padding:0;list-style-type:none;text-align:center;font:12px/20px Arial;} .test-box{width:500px;margin:20px auto;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:10px;} </style> <div id="xScroll-box" class="scroll-box"> <div class="list"> <ul> <li><img src="http://img1.fangdd.com/fdd/854fccdf0dee88306f9b22de213b0280/854fccdf0dee88306f9b22de213b0280_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img1.fangdd.com/fdd/506f3b5c9ac56ce9d867b0bbd376fa2a/506f3b5c9ac56ce9d867b0bbd376fa2a_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img3.fangdd.com/fdd/36abfe71fc7e2678b9b525cd479d167c/36abfe71fc7e2678b9b525cd479d167c_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img4.fangdd.com/fdd/43c30245b1a07c6a45e37444bf553de0/43c30245b1a07c6a45e37444bf553de0_originals.jpg" alt="" width="490" height="170" /></li> </ul> </div> </div> <div class="test-box"> <pre> 横向滚动: var xSlider=new $.Slider({ wrap:$('#xScroll-box'), effect:'xScroll', easeing:'easeOutBounce', fxTime:400 } </pre> 选择动画效果 <select name="" size="" id="sel1"> <option value="easeOut">easeOut</option> <option value="easeOutStrong">easeOutStrong</option> <option value="easeIn">easeIn</option> <option value="easeInStrong">easeInStrong</option> <option value="easeOutBounce">easeOutBounce</option> <option value="easeInBack">easeInBack</option> <option value="easeOutBack">easeOutBack</option> <option value="bounce">bounce</option> <option value="bouncePast">bouncePast</option> <option value="swingTo"> swingTo</option> <option value="swingFrom">swingFrom</option> <option value="elastic">elastic</option> <option value="spring">spring</option> <option value="blink">blink</option> <option value="pulse">pulse</option> <option value="wobble">wobble</option> <option value="flicker">flicker</option> <option value="mirror">mirror</option> </select> <select name="" size="" id="sel1-time"> <option value="200">200毫秒</option> <option value="300">300毫秒</option> <option value="400">400毫秒</option> <option value="500">500毫秒</option> <option value="600">600毫秒</option> <option value="700">700毫秒</option> <option value="800">800毫秒</option> <option value="900">900毫秒</option> <option value="1000">1000毫秒</option> <option value="1500">1500毫秒</option> <option value="2000">2000毫秒</option> <option value="3000">3000毫秒</option> </select> <span id="sel1-txt"><span></span> <span></span></span> </div> <div id="yScroll-box" class="scroll-box"> <div class="list"> <ul> <li><img src="http://img1.fangdd.com/fdd/854fccdf0dee88306f9b22de213b0280/854fccdf0dee88306f9b22de213b0280_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img1.fangdd.com/fdd/506f3b5c9ac56ce9d867b0bbd376fa2a/506f3b5c9ac56ce9d867b0bbd376fa2a_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img3.fangdd.com/fdd/36abfe71fc7e2678b9b525cd479d167c/36abfe71fc7e2678b9b525cd479d167c_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img4.fangdd.com/fdd/43c30245b1a07c6a45e37444bf553de0/43c30245b1a07c6a45e37444bf553de0_originals.jpg" alt="" width="490" height="170" /></li> </ul> </div> </div> <div class="test-box"> <pre> 纵向滚动: var ySlider=new $.Slider({ wrap:$('#yScroll-box'), effect:'yScroll', easeing:'easeOutBounce', fxTime:400 } </pre> 选择动画效果 <select name="" size="" id="sel2"> <option value="easeOut">easeOut</option> <option value="easeOutStrong">easeOutStrong</option> <option value="easeIn">easeIn</option> <option value="easeInStrong">easeInStrong</option> <option value="easeOutBounce">easeOutBounce</option> <option value="easeInBack">easeInBack</option> <option value="easeOutBack">easeOutBack</option> <option value="bounce">bounce</option> <option value="bouncePast">bouncePast</option> <option value="swingTo"> swingTo</option> <option value="swingFrom">swingFrom</option> <option value="elastic">elastic</option> <option value="spring">spring</option> <option value="blink">blink</option> <option value="pulse">pulse</option> <option value="wobble">wobble</option> <option value="flicker">flicker</option> <option value="mirror">mirror</option> </select> <select name="" size="" id="sel2-time"> <option value="200">200毫秒</option> <option value="300">300毫秒</option> <option value="400">400毫秒</option> <option value="500">500毫秒</option> <option value="600">600毫秒</option> <option value="700">700毫秒</option> <option value="800">800毫秒</option> <option value="900">900毫秒</option> <option value="1000">1000毫秒</option> <option value="1500">1500毫秒</option> <option value="2000">2000毫秒</option> <option value="3000">3000毫秒</option> </select> <span id="sel2-txt"><span></span> <span></span></span> </div> <div class="test-box"> <div id="oScroll-box" class="scroll-box"> <div class="list"> <ul> <li><img src="http://img1.fangdd.com/fdd/854fccdf0dee88306f9b22de213b0280/854fccdf0dee88306f9b22de213b0280_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img1.fangdd.com/fdd/506f3b5c9ac56ce9d867b0bbd376fa2a/506f3b5c9ac56ce9d867b0bbd376fa2a_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img3.fangdd.com/fdd/36abfe71fc7e2678b9b525cd479d167c/36abfe71fc7e2678b9b525cd479d167c_originals.jpg" alt="" width="490" height="170" /></li> <li><img src="http://img4.fangdd.com/fdd/43c30245b1a07c6a45e37444bf553de0/43c30245b1a07c6a45e37444bf553de0_originals.jpg" alt="" width="490" height="170" /></li> </ul> </div> </div> <pre> 淡入淡出: var oSlider=new $.Slider({ wrap:$('#oScroll-box'), effect:'opacity', easeing:'easeOutBounce', fxTime:400 } </pre> 选择动画效果 <select name="" size="" id="sel3"> <option value="easeOut">easeOut</option> <option value="easeOutStrong">easeOutStrong</option> <option value="easeIn">easeIn</option> <option value="easeInStrong">easeInStrong</option> <option value="easeOutBounce">easeOutBounce</option> <option value="easeInBack">easeInBack</option> <option value="easeOutBack">easeOutBack</option> <option value="bounce">bounce</option> <option value="bouncePast">bouncePast</option> <option value="swingTo"> swingTo</option> <option value="swingFrom">swingFrom</option> <option value="elastic">elastic</option> <option value="spring">spring</option> <option value="blink">blink</option> <option value="pulse">pulse</option> <option value="wobble">wobble</option> <option value="flicker">flicker</option> <option value="mirror">mirror</option> </select> <select name="" size="" id="sel3-time"> <option value="200">200毫秒</option> <option value="300">300毫秒</option> <option value="400">400毫秒</option> <option value="500">500毫秒</option> <option value="600">600毫秒</option> <option value="700">700毫秒</option> <option value="800">800毫秒</option> <option value="900">900毫秒</option> <option value="1000">1000毫秒</option> <option value="1500">1500毫秒</option> <option value="2000">2000毫秒</option> <option value="3000">3000毫秒</option> </select> <span id="sel3-txt"><span></span> <span></span></span> </div> </body> </html>
横向滚动: var xSlider=new $.Slider({ wrap:$('#xScroll-box'), effect:'xScroll', easeing:'easeOutBounce', fxTime:400 }选择动画效果
纵向滚动: var ySlider=new $.Slider({ wrap:$('#yScroll-box'), effect:'yScroll', easeing:'easeOutBounce', fxTime:400 }选择动画效果
淡入淡出: var oSlider=new $.Slider({ wrap:$('#oScroll-box'), effect:'opacity', easeing:'easeOutBounce', fxTime:400 }选择动画效果
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步