【图片切换】♣一

（原）原生js封装的焦点图（幻灯片）效果一
http://www.cnblogs.com/hongru/archive/2010/09/23/1833441.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0}
        body{font:12px/1.5 arial}
        ul{list-style:none}
        #slider{position:relative;width:470px;height:150px;overflow:hidden}
        #content li{float:left;width:470px;height:150px}
        #nav{position:absolute;right:5px;bottom:5px}
        #nav li{display:inline;float:left;width:15px;height:15px;margin-left:4px;background:#fff;color:#d94b01;text-align:center;line-height:15px}
        #nav .nav{background:#ffb442}
    </style>
</head>
<body>
    <div id="slider">
        <ul id="content">
            <li><img src="1.jpg" width="470" height="150" alt="" /></li>
            <li><img src="1.jpg" width="470" height="150" alt="" /></li>
            <li><img src="1.jpg" width="470" height="150" alt="" /></li>
            <li><img src="1.jpg" width="470" height="150" alt="" /></li>
        </ul>
        <ul id="nav">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        var Hongru = {};
        var H$ = function(id) {
            return document.getElementById(id);
        };
        var H$$ = function(c, p) {// c child p parent
            return p.getElementsByTagName(c);
        };
        Hongru.slider = function() {
            return {
                init: function(id, options) {
                    var ul = this.u = H$$('ul', H$(id))[0];
                    var li = H$$('li', ul);
                    this.l = li.length;
                    this.index = 0;
                    if (options.navId && options.curClass) {
                        this.nav = H$$('li', H$(options.navId));
                        this.c = options.curClass;
                    }
                    this.a = options.auto || 0;
                    this.v = options.vertical || 0;
                    H$(id).style.overflow = 'hidden';
                    H$(id).style.position = 'relative';
                    ul.style.position = 'absolute';
                    if (this.v) {
                        ul.style.top = 0;// 一开始没值必须要赋值
                        this.h = options.height || li[0].offsetHeight;
                        ul.style.height = (this.l * this.h) + 'px';
                    } else {
                        ul.style.left = 0;
                        this.w = options.width || li[0].offsetWidth;
                        ul.style.width = (this.l * this.w) + 'px';
                    }
                    this.pos(options.index || 0, this.a ? 1 : 0);// 切换到options.index
                    for (var i = 0; i < this.l; i++) {
                        (function(_i) {
                            H$$('li', H$('nav'))[_i].onmouseover = function() {
                                setTimeout(function() {
                                    Hongru.slider.pos(_i);// 切换到_i
                                }, 300);
                            };
                        } (i));
                    }
                },
                pos: function(pos, a) {
                    clearInterval(this.u.posAnim);
                    clearInterval(this.u.auto);
                    var curPos = this.v ? parseInt(this.u.style.top) : parseInt(this.u.style.left);// 当前位置
                    var correctPos = this.v ? pos * this.h : pos * this.w;// 目标位置
                    var direction = correctPos > Math.abs(curPos) ? 1 : -1;// 切换方向
                    correctPos *= -1;// 0 -1 -2必然是负值
                    this.index = pos;
                    if (this.nav) {
                        for (var i = 0; i < this.l; i++) {
                            this.nav[i].className = i == pos ? this.c : '';
                        }
                    }
                    this.u.posAnim = setInterval(function() {
                        Hongru.slider.anim(correctPos, direction, a);
                    }, 10);
                },
                anim: function(des, dir, a) {
                    var curPos = this.v ? parseInt(this.u.style.top) : parseInt(this.u.style.left);
                    if (curPos == des) {
                        clearInterval(this.u.posAnim);
                        if (a || this.a) {
                            Hongru.slider.auto();
                        }
                    } else {
                        var v = curPos - Math.ceil(Math.abs(des - curPos) * .07) * dir + 'px';
                        this.v ? this.u.style.top = v : this.u.style.left = v;
                    }
                },
                auto: function() {
                    this.u.auto = setInterval(function() {
                        Hongru.slider.move(1, 1);// 方向指的是，0到1往右即1，4到0往左即-1
                    }, this.a * 1000);
                },
                move: function(n, a) {// n是方向 a是自动
                    var num = this.index + n;
                    var i = (n == 1 ? ((num == this.l) ? 0 : num) : ((num < 0) ? (this.l - 1) : num));
                    // 以上确定切换到第几个
                    Hongru.slider.pos(i, a);
                }
                // 悬浮、自动2样
                // 悬浮就是，nav每个li绑定悬浮事件，指定切换到第几个图片，用pos去做切换，再配合anim最终实现带动画效果的切换
                // 自动就是，初始化后，启动自动auto，再配合move来指定切换到第几个，再用pos去做切换，再用anim最终实现带动画效果的切换
            };
        }();
        Hongru.slider.init('slider', {
            auto: 3,
            vertical: 1,
            navId: 'nav',
            curClass: 'nav',
            index: 0
        });
    </script>
</body>
</html>

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