zoukankan html css js c++ java

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
}

选择动画效果

查看全文

相关阅读:
Hadoop Yarn 框架原理及运作机制及与MapReduce比较
 模型驱动与属性驱动区别
 spark伪分布式的安装
 大数据集群的常见问题
 linux常用命令
 大数据集群ssh登录其他机器失败 RSA host key for zb03 has changed and you have requested strict checking. Host key verification failed.
Python 地点转化为经纬度
 Hbase原理、基本概念、基本架构
 struts2的java.lang.NoSuchMethodException错误
 抽象工厂

原文地址：https://www.cnblogs.com/zhuzf/p/2425245.html