快捷搜索:

原生javascript图片自动或手动切换示例附演示源码

作者: w88官方网站手机版  发布:2019-07-07

序一(08/07/06)

w88官方网站手机版 1w88官方网站手机版 2代码

一、效果图
w88官方网站手机版 3 
二、html代码

看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。
由于有了做图片滑动展示效果的经验,做这个就容易得多了。

执行左移右移函数:
var $get = function(id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
w88官方网站手机版,    }
    return destination;
}

复制代码 代码如下:

序二(09/03/19)

var CurrentStyle = function(element) {
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

<style type="text/css">
.container, .container *{margin:0; padding:0;}

自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。
除了改成Tween缓动,也改进了程序算法,不过原理还是一样的。

var Bind = function(object, fun) {
    var args = Array.prototype.slice.call(arguments).slice(2);
    return function() {
        return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
    }
}

.container{width:408px; height:168px; overflow:hidden;position:relative;}

效果预览

var Tween = {
    Quart: {
        easeOut: function(t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1)   b;
        }
    },
    Back: {
        easeOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s   1) * t   s)   1)   b;
        }
    },
    Bounce: {
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t)   b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t   .75)   b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t   .9375)   b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t   .984375)   b;
            }
        }
    }
}

.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}

//容器对象,滑动对象,切换数量
var SlideTrans = function(container, slider, count, options) {
    this._slider = $get(slider);
    this._container = $get(container); //容器对象
    this._timer = null; //定时器
    this._count = Math.abs(count); //切换数量
    this._target = 0; //目标值
    this._t = this._b = this._c = 0; //tween参数

.slider2{width:2000px;}
.slider2 li{float:left;}

仿淘宝/alibaba图片切换:

    this.Index = 0; //当前索引

.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView2">
<ul class="slider slider2" id="idSlider2">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

  • w88官方网站手机版 4
  • w88官方网站手机版 5
  • w88官方网站手机版 6
  • w88官方网站手机版 7
  • w88官方网站手机版 8

    this.SetOptions(options);

三、源代码

    this.Auto = !!this.options.Auto;
    this.Duration = Math.abs(this.options.Duration);
    this.Time = Math.abs(this.options.Time);
    this.Pause = Math.abs(this.options.Pause);
    this.Tween = this.options.Tween;
    this.onStart = this.options.onStart;
    this.onFinish = this.options.onFinish;

复制代码 代码如下:

默认缓动 方式1 方式2

    var bVertical = !!this.options.Vertical;
    this._css = bVertical ? "top" : "left"; //方向

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

 

    //样式设置
    var p = CurrentStyle(this._container).position;
    p == "relative" || p == "absolute" || (this._container.style.position = "relative");
    this._container.style.overflow = "hidden";
    this._slider.style.position = "absolute";

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

程序说明

    this.Change = this.options.Change ? this.options.Change :
        this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
    //设置默认属性
    SetOptions: function(options) {
        this.options = {//默认值
        Vertical: true, //是否垂直方向(方向不能改)
            Auto: false, //是否自动
            Change: 0, //改变量
            Duration: 50, //滑动持续时间
            Time: 10, //滑动延时
            Pause: 2000, //停顿时间(Auto为true时有效)
            onStart: function() { }, //开始转换时执行
            onFinish: function() { }, //完成转换时执行
            Tween: Tween.Quart.easeOut//tween算子
        };
        Extend(this.options, options || {});
    },
    //开始切换
    Run: function(index) {
        //修正index
        index == undefined && (index = this.Index);
        index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
        //设置参数
        this._target = -Math.abs(this.Change) * (this.Index = index);
        this._t = 0;
        this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
        this._c = this._target - this._b;

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。

        this.onStart();
        this.Move();
    },
    //移动
    Move: function() {
        clearTimeout(this._timer);
        //未到达目标继续移动否则进行下一次滑动
        if (this._c && this._t < this.Duration) {
            this.MoveTo(Math.round(this.Tween(this._t , this._b, this._c, this.Duration)));
            this._timer = setTimeout(Bind(this, this.Move), this.Time);
        } else {
            this.MoveTo(this._target);
            this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
        }
    },
    //移动到
    MoveTo: function(i) {
        this._slider.style[this._css] = i   "px";
    },
    //下一个
    Next: function() {
        this.Run( this.Index);
    },
    //上一个
    Previous: function() {
        this.Run(--this.Index);
    },
    //停止
    Stop: function() {
        clearTimeout(this._timer); this.MoveTo(this._target);
    }
};

var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;

首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative,
滑动对象会设置为绝对定位:

 

this.Index = 0;//当前索引

var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

在前天html加入div容器:

this._timer = null;//定时器
this._slider = oSlider;//滑动对象
this._parameter = parameter;//切换参数
this._count = count || 0;//切换数量
this._target = 0;//目标参数

如果没有设置Change切换参数属性,会自动根据滑动对象获取:

w88官方网站手机版 9w88官方网站手机版 10代码

this.SetOptions(options);

this.Change = this.options.Change ? this.options.Change :
    this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

<!-- Icon scroll begin -->
            <div style="text-align:center; width:100%; margin:auto auto">
                    <div class="container" id="idContainer" runat="server"  >
                    </div>
            </div>
            <!--end-->
            <!--左右滚动按钮-->
             <div class="defaultprenext">
             <table cellpadding=0 cellspacing=0 style="width:100%">
                 <tr>
                     <td style="width:40%; text-align:left; padding-left:6px"> 
                     <img id="ImgPre" alt="" src="ImageV3/Default/pre-gray.png" />
                      <span class="pager" id="Pre" style="color:Gray">Pre</span></td>
                     <td style="width:20%; text-align:center">
                         <div class="defaultprenextmid">
                           <div style="height:10px; vertical-align:middle; line-height:10px">
                              <img src="ImageV3/Default/greendot.png" id="Img1" />  
                               <img src="ImageV3/Default/graydot.png" id="Img2" /> 
                                <img src="ImageV3/Default/graydot.png" id="Img3" />
                           </div>
                        </div>
                     </td>
                     <td style="width:40%; text-align:right; padding-right:6px">
                        <span class="pager" id="Next" style="color:#2f6417">Next</span>
                        <img id="ImgNext" alt="" src="ImageV3/Default/next-green.png" />
                     </td>
                 </tr>
             </table>
            </div>

this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

执行Run方法就会开始进入切换,其中有一个可选参数用来重新设置要切换的图片索引:

下面是改变左右按钮可用状态

oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";

index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);

 

oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Up: true,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 10,//滑动延时
Auto: true,//是否自动转换
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行
};
Object.extend(this.options, options || {});
},
//开始切换设置
Start: function() {
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count){ this.Index = 0; }

== undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);

代码

this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" : "left",
iNow = parseInt(this._slider.style[style]) || 0,
iStep = this.GetStep(this._target, iNow);

之后就到设置使用tween缓动时需要的参数了,
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量):

var imgNum = $get("idContainer").getElementsByTagName("img").length;
var pre = $get("Pre");
var next = $get("Next");
var i = 0;
if (imgNum > 0) {
    var st = new SlideTrans("idContainer", "idSlider", 3, { Vertical: false });
    if (i < 2) {
        $get("Next").onclick = function() {
            if (i < 2) {
                st.Next();
                i ;
                if (i == 1) {
                    $get("ImgPre").src = "ImageV3/Default/pre-green.png";
                    pre.style.color = "#2f6417";
                }
                if (i == 2) {
                    $get("ImgNext").src = "ImageV3/Default/next-gray.png";
                    next.style.color = "Gray";
                }
                ChangePicIndex(i);
            }
        }
    }

if (iStep != 0) {
this._slider.style[style] = (iNow iStep) "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
} else {
this._slider.style[style] = this._target "px";
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index ; oThis.Start(); }, this.Pause); }
}
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? "top" : "left"] = this._target "px";
}
};

w88官方网站手机版 11w88官方网站手机版 12Code
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;

    $get("Pre").onclick = function() {
        if (i > 0) {
            st.Previous();
            $get("ImgNext").src = "ImageV3/Default/next-green.png";
            next.style.color = "#2f6417";
            i--;
            if (i == 0) {
                $get("ImgPre").src = "ImageV3/Default/pre-gray.png";
                pre.style.color = "Gray";
            }
            ChangePicIndex(i);
        }
    }
    st.Run();

window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i ) { fun(list[i], i); }
};

还有Duration(持续时间)是自定义属性。

}

var objs = $("idNum2").getElementsByTagName("li");

参数设置好后就执行Move程序开始移动了。
里面很简单,首先判断_c是否有值(等于0表示不需要移动)和_t是否到达Duration,
未满足条件就继续移动,否则直接移动到目标值并进行下一次切换:

function ChangePicIndex(index) {
    switch (index) {
        case 1:
            $get("Img1").src = "ImageV3/Default/graydot.png";
            $get("Img2").src = "ImageV3/Default/greendot.png";
            $get("Img3").src = "ImageV3/Default/graydot.png";
            break
        case 2:
            $get("Img1").src = "ImageV3/Default/graydot.png";
            $get("Img2").src = "ImageV3/Default/graydot.png";
            $get("Img3").src = "ImageV3/Default/greendot.png";
            break
        default:
            $get("Img1").src = "ImageV3/Default/greendot.png";
            $get("Img2").src = "ImageV3/Default/graydot.png";
            $get("Img3").src = "ImageV3/Default/graydot.png";
    }
}

var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//按钮样式
Up: false
});

w88官方网站手机版 13w88官方网站手机版 14Code
if (this._c && this._t < this.Duration) {
    this.MoveTo(Math.round(this.Tween(this._t , this._b, this._c, this.Duration)));
    this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
    this.MoveTo(this._target);
    this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}

 

tv.Start();

 

 

Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})
}

使用说明

一看就名目了然了,所以就不细讲解代码!
演示及源文件下载

实例化需要3个参数,分别是容器对象,滑动对象和切换数量,之后可以直接执行Run方法运行:

您可能感兴趣的文章:

  • 用javascript实现图片马赛克后显示并切换
  • 用javascript实现的图片马赛克后显示并切换加文字功能
  • JavaScript 图片切换展示效果alibaba拓展版
  • javascript 图片滑动切换代码
  • JavaScript 控制图片改变重叠顺序的代码(鼠标移动切换)
  • javascript 另一种图片滚动切换效果思路
  • javascript实现图片切换的幻灯片效果源代码
  • 原生javascript实现图片按钮切换

new SlideTrans("idContainer", "idSlider", 3).Run();

还有以下可选属性:
Vertical: true,//是否垂直方向(方向不能改)
Auto:  true,//是否自动
Change:  0,//改变量
Duration: 50,//滑动持续时间
Time:  10,//滑动延时
Pause:  2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween:  Tween.Quart.easeOut//tween算子

其中Vertical初始化后就不能修改,Tween算子可参照这里的缓动效果选择(实例中选了其中3个)。

还有提供了以下方法:
Next: 切换下一个
Previous: 切换上一个
Stop: 停止自动切换
还有上面说到的Run

 

程序代码

w88官方网站手机版 15w88官方网站手机版 16Code
var SlideTrans = function(container, slider, count, options) {
    this._slider = $(slider);
    this._container = $(container);//容器对象
    this._timer = null;//定时器
    this._count = Math.abs(count);//切换数量
    this._target = 0;//目标值
    this._t = this._b = this._c = 0;//tween参数
    
    this.Index = 0;//当前索引
    
    this.SetOptions(options);
    
    this.Auto = !!this.options.Auto;
    this.Duration = Math.abs(this.options.Duration);
    this.Time = Math.abs(this.options.Time);
    this.Pause = Math.abs(this.options.Pause);
    this.Tween = this.options.Tween;
    this.onStart = this.options.onStart;
    this.onFinish = this.options.onFinish;
    
    var bVertical = !!this.options.Vertical;
    this._css = bVertical ? "top" : "left";//方向
    
    //样式设置
    var p = CurrentStyle(this._container).position;
    p == "relative" || p == "absolute" || (this._container.style.position = "relative");
    this._container.style.overflow = "hidden";
    this._slider.style.position = "absolute";
    
    this.Change = this.options.Change ? this.options.Change :
        this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
        Vertical:    true,//是否垂直方向(方向不能改)
        Auto:        true,//是否自动
        Change:        0,//改变量
        Duration:    50,//滑动持续时间
        Time:        10,//滑动延时
        Pause:        2000,//停顿时间(Auto为true时有效)
        onStart:    function(){},//开始转换时执行
        onFinish:    function(){},//完成转换时执行
        Tween:        Tween.Quart.easeOut//tween算子
    };
    Extend(this.options, options || {});
  },
  //开始切换
  Run: function(index) {
    //修正index
    index == undefined && (index = this.Index);
    index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
    //设置参数
    this._target = -Math.abs(this.Change) * (this.Index = index);
    this._t = 0;
    this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
    this._c = this._target - this._b;
    
    this.onStart();
    this.Move();
  },
  //移动
  Move: function() {
    clearTimeout(this._timer);
    //未到达目标继续移动否则进行下一次滑动
    if (this._c && this._t < this.Duration) {
        this.MoveTo(Math.round(this.Tween(this._t , this._b, this._c, this.Duration)));
        this._timer = setTimeout(Bind(this, this.Move), this.Time);
    }else{
        this.MoveTo(this._target);
        this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
    }
  },
  //移动到
  MoveTo: function(i) {
    this._slider.style[this._css] = i   "px";
  },
  //下一个
  Next: function() {
    this.Run( this.Index);
  },
  //上一个
  Previous: function() {
    this.Run(--this.Index);
  },
  //停止
  Stop: function() {
    clearTimeout(this._timer); this.MoveTo(this._target);
  }
};

 

下载测试代码

其他图片展示效果:
JavaScript 图片变换效果(ie only)
JavaScript 图片滑动展示效果


本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:原生javascript图片自动或手动切换示例附演示源码

关键词: www.w88985.c

上一篇:没有了
下一篇:没有了