JS（JQ）-实现图片横向滑动效果

先看效果:

 

      

这是一个常用的js实现图片滑动的效果

这里面的代码很值得去研究：（勘称完美~）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片切换展示效果</title>
</head>
<body>
<style type="text/css"> 
.container, .container *{margin:0; padding:0;}

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

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

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

.num{ position:absolute; right:5px; bottom:5px;}
.num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 16px;
     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;
     21px;
    height: 21px;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
  <ul class="slider" id="idSlider">
    <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="idNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<br />
 
  <script type="text/javascript">
  
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
//尼玛这坨代码不好看懂滴呀；
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
//这个应该是通过复制的方式来实现继承滴呀
//而且是一种浅拷贝;
Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

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;

    this.Index = 0;//当前索引
        //标签运算符啊
    
    this._timer = null;//定时器
    this._slider = oSlider;//滑动对象
    this._parameter = parameter;//切换参数
    this._count = count || 0;//切换数量
    this._target = 0;//目标参数
    
    this.SetOptions(options);
    
    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;
    
    oContainer.style.overflow = "hidden";
    oContainer.style.position = "relative";
    
    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; }
    
    this._target = -1 * this._parameter * this.Index; //这个就是物体运动的总结点；比如width=100 第一个移动100*1 第二个移动:100*2 第三个：100*3
    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);
    
    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);
    //iStep= iStep>0?Math.ceil(iStep):Math.floor(iStep);
    return iStep;
  },
  //停止
  Stop: function(iTarget, iNow) {
    clearTimeout(this._timer);
    this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
  }
};

//真是面向对象的全部讲解啊
//我操*你*妈的啊

window.onload=function(){
    function Each(list, fun){
        for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
    };
    
    var objs = $("idNum").getElementsByTagName("li");
    //这个是以我们的li为移动对象滴呀；
    
    var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
        onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
    });
    
    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();
        }
    })
}
</script>
</body>
</html>

 2.下面的是以jq的方式来实现滴呀 （都值得去研究哈）

$(function ($) {
    $.fn.extend({ "focusScroll": function (o) {
        o = $.extend({
            thumbObj: "#myTab_btns li", //导航对象(jQuery表达式‘容器 元素’)
            botPrev: null, //按钮上一个(jQuery表达式)
            botNext: null, //按钮下一个(jQuery表达式)
            changeType: 'top', //切换方式，可选：top(垂直滚动),left(左右滚动),fade(淡入淡出)，默认为top
            fadeSpeed: 'fast', //淡入淡出速度(slow,normal,fast或指定毫秒)
            thumbNowClass: 'hot', //导航对象当前的class,默认为hot
            thumbOverEvent: true, //鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象
            overStop: true, //鼠标经过切换对象时，是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换
            auto: true, //是否自动切换，默认为true
            interval: 5000, //自动切换时间            
            len: 420, //单个尺寸
            start: 0, //初始显示位置
            lazyAttr: "backload",//图片延迟加载img属性
            onChange:function(li){}//切换时触发（动画可能未完成）
        }, o || {});
        var _self = $(this), _selfDom = $(this).get(0);
        var dir = o.changeType == 'top' ? 'scrollTop' : 'scrollLeft';
        var curIndex = 0;
        var autoTimer = null, stopPlay = false; imgLoaded = false;
        var navLis = _self.find("li");
        var timers={};
        
        var go = function (i) {
            if (!imgLoaded)
                lzyLoad();
            $(o.thumbObj).removeClass(o.thumbNowClass).eq(i).addClass(o.thumbNowClass);
            
            if (o.changeType == 'fade' && i != curIndex) {
                navLis.stop(true, true);
                var fadeoutSpeed=o.fadeSpeed;
                switch(o.fadeSpeed){
                    case "fast":
                    case "normal":
                        fadeoutSpeed = "fast";
                        break;
                    case "slow":
                        fadeoutSpeed = "normal";
                        break;
                    default:
                        if(!isNaN(parseInt(o.fadeSpeed))){
                            fadeoutSpeed = parseInt(o.fadeSpeed)/2;
                        }
                }            
                navLis.eq(curIndex).fadeOut(fadeoutSpeed, "linear");
                navLis.eq(i).fadeIn(o.fadeSpeed, "linear");    
            } else {
                (function (me) {
                    //一次性计算出动画过程中的位置
                    var diffs = [];
                    var dis = i * o.len, pos = _selfDom[dir];
                    while (dis != pos) {
                        var remain = dis - pos;
                        var d = Math[remain > 0 ? 'ceil' : 'floor'](remain * 0.1);
                        pos += d;
                        diffs.push(pos);
                    };
                    clearTimeout(me.only);
                    var run = function () {
                        _selfDom[dir] = diffs.shift();
                        if (diffs.length > 0)
                            me.only = setTimeout(run, 10);
                    }
                    if (diffs.length > 0)
                        me.only = setTimeout(run, 0);
                })(timers);
            }
            curIndex = i;
            o.onChange(navLis.eq(curIndex));
        };
        if (o.overStop) {
            _self.hover(function () { stopPlay = true; }, function () { stopPlay = false; });
        }
        if ($(o.thumbObj).length == 0) {//自动生成数字导航
            var content = o.thumbObj.split(" ")[0];
            var tag = o.thumbObj.split(" ")[1];
            for (var i = 1; i <= _self.find("li").length; i++)
                $(content).append("<" + tag + ">" + i + "</" + tag + ">");
            $(content).find(tag).eq(0).addClass(o.thumbNowClass);
        }
        $(o.thumbObj).each(function (i) {
            if (o.thumbOverEvent) {
                $(this).hover(function () { stopPlay = true; go(i); }, function () { stopPlay = false; });
            } else {
                $(this).click(function () { go(i); })
            }
        });
        var auto = function () {
            if (!stopPlay) {
                var nextIndex = (curIndex >= $(o.thumbObj).length - 1 ? 0 : curIndex + 1);
                go(nextIndex);
            }
        };

        if (o.botPrev)
            $(o.botPrev).click(function () {
                var nextIndex = (curIndex <= 0 ? $(o.thumbObj).length - 1 : curIndex - 1);
                go(nextIndex)
            }).hover(function () { stopPlay = true; }, function () { stopPlay = false; });

        if (o.botNext)
            $(o.botNext).click(function () {
                var nextIndex = (curIndex >= $(o.thumbObj).length - 1 ? 0 : curIndex + 1);
                go(nextIndex)
            }).hover(function () { stopPlay = true; }, function () { stopPlay = false; });

        if (o.start > 0) {
            curIndex = o.start;
            $(o.thumbObj).removeClass(o.thumbNowClass).eq(curIndex).addClass(o.thumbNowClass);
            if (o.changeType == 'fade')
                _self.find("li").hide().eq(curIndex).show();
            else
                _self.attr(dir, curIndex * o.len);
        }
        var lzyLoad = function () {
            imgLoaded = true;
            if (o.lazyAttr != "") {
                _self.find("img[" + o.lazyAttr + "]").each(function () {
                    if (this.src != this.getAttribute(o.lazyAttr)) this.src = this.getAttribute(o.lazyAttr)
                })
            }
        }

        var init = function () {
            /*update20121101 begin,curIndexImg show immediately*/
            var firstImg = _self.find("li").eq(curIndex).find("img[" + o.lazyAttr + "]");
            if (firstImg) {
                firstImg.attr("src", firstImg.attr(o.lazyAttr));
            }
            //淡入淡出隐藏非当前li
            if (o.changeType == 'fade'){
                _self.find("li").each(function(i){
                    if(i!=curIndex){
                        $(this).hide();
                    }
                });
            }
            /*update20121101 end */
            if (o.auto) {
                autoTimer = window.setInterval(auto, o.interval);
                //提前1秒加载图片
                window.setTimeout(lzyLoad, o.interval > 2000 ? o.interval - 1000 : 1000);
            } else {//推迟1秒加载图片
                window.setTimeout(lzyLoad, 1000);
            }
        }

        //获取元素偏移顶部距离
        var offsettop = function (element) {
            var actualtop = element.offsetTop;
            var current = element.offsetParent;
            while (current !== null) {
                actualtop += current.offsetTop;
                current = current.offsetParent;
            }

            return actualtop;
        }

        //获取浏览器当前可视区域大小
        var clientHeight = function () {
            var pageHeight;
            if (typeof pageHeight != "number") {
                if (document.compatMode == "CSS1Compat") {
                    pageHeight = document.documentElement.clientHeight;
                } else {
                    pageHeight = document.body.clientHeight;
                }
            }

            return pageHeight;
        }

        var offsetTop = offsettop(_selfDom);
        var scroll = function () {
            var scrollTop = document.body.scrollTop | document.documentElement.scrollTop;
            //如果是滚动到滚动图当前屏
            if (offsetTop <= (clientHeight() + scrollTop)) {
                init();
                $(window).off("scroll", scroll);
            }
        }
        //如果是当前屏是滚动图所在屏
        if (offsetTop <= (clientHeight() + (document.body.scrollTop | document.documentElement.scrollTop))) {
            init();
        } else {
            $(window).on("scroll", scroll);
        }

    } 
    });
});

   

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mc67/p/4806331.html