jquery.slider.js jquery幻灯片测试

View Code

<!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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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
}

选择动画效果