js缩略图控制大图上下滚动特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 js缩略图控制大图上下滚动特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!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=utf-8" />
    <title>js缩略图片控制大图上下滚动特效</title>
</head>
<body>
    <style type="text/css">
        /* iFocus style */
        #ifocus {
            width: 510px;
            height: 520px;
            margin: 40px auto 0 auto;
            border: solid 1px #ddd;
            padding: 10px 0 0 0;
        }

        #ifocus ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #ifocus li {
            list-style: none;
        }

        #ifocus_btn {
            display: inline;
            float: left;
            width: 91px;
            margin-right: 20px;
        }

        #ifocus_btn li {
            width: 100px;
            height: 103px;
            cursor: pointer;
            opacity: 0.5;
            -moz-opacity: 0.5;
            filter: alpha(opacity=50);
        }

        #ifocus_btn img {
            width: 75px;
            height: 90px;
            margin: 7px 0 0 5px;
        }

        #ifocus_btn .current {
            background: url(images/ifocus_btn_bg.gif) no-repeat;
            opacity: 1;
            -moz-opacity: 0.5;
            filter: alpha(opacity=100);
        }

        #ifocus_pic {
            position: relative;
            float: left;
            width: 380px;
            height: 513px;
            overflow: hidden;
        }

        #ifocus_piclist {
            position: absolute;
            float: right;
            display: inline;
        }
    </style>

    <div id="ifocus">
        <div id="ifocus_btn">
            <ul style="margin-left:8px;">
                <li class="current"><img src="images/x1.jpg" height="513" width="380" /></li>
                <li class="normal"><img src="images/x2.jpg" height="513" width="380" /></li>
                <li class="normal"><img src="images/x3.jpg" height="513" width="380" /></li>
                <li class="normal"><img src="images/x4.jpg" height="513" width="380" /></li>
                <li class="normal"><img src="images/x5.jpg" height="513" width="380" /></li>
            </ul>
        </div>
        <div id="ifocus_pic">
            <div style="left: 0px; top: 0px;" id="ifocus_piclist">
                <ul>
                    <li><a><img src="images/d1.jpg" height="513" width="380" /></a></li>
                    <li><a><img src="images/d2.jpg" height="513" width="380" /></a></li>
                    <li><a><img src="images/d3.jpg" height="513" width="380" /></a></li>
                    <li><a><img src="images/d4.jpg" height="513" width="380" /></a></li>
                    <li><a><img src="images/d5.jpg" height="513" width="380" /></a></li>
                </ul>
            </div>
            <div id="ifocus_opdiv"></div>
            <div id="ifocus_tx">
                <ul>
                    <li class="current"></li>
                    <li class="normal"> </li>
                    <li class="normal"> </li>
                    <li class="normal"> </li>
                    <li class="normal"> </li>
                </ul>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function $(id) { return document.getElementById(id); }
        function addLoadEvent(func) {
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function () {
                    oldonload();
                    func();
                }
            }
        }
        function moveElement(elementID, final_x, final_y, interval) {
            if (!document.getElementById) return false;
            if (!document.getElementById(elementID)) return false;
            var elem = document.getElementById(elementID);
            if (elem.movement) {
                clearTimeout(elem.movement);
            }
            if (!elem.style.left) {
                elem.style.left = "0px";
            }
            if (!elem.style.top) {
                elem.style.top = "0px";
            }
            var xpos = parseInt(elem.style.left);
            var ypos = parseInt(elem.style.top);
            if (xpos == final_x && ypos == final_y) {
                return true;
            }
            if (xpos < final_x) {
                var dist = Math.ceil((final_x - xpos) / 10);
                xpos = xpos + dist;
            }
            if (xpos > final_x) {
                var dist = Math.ceil((xpos - final_x) / 10);
                xpos = xpos - dist;
            }
            if (ypos < final_y) {
                var dist = Math.ceil((final_y - ypos) / 10);
                ypos = ypos + dist;
            }
            if (ypos > final_y) {
                var dist = Math.ceil((ypos - final_y) / 10);
                ypos = ypos - dist;
            }
            elem.style.left = xpos + "px";
            elem.style.top = ypos + "px";
            var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
            elem.movement = setTimeout(repeat, interval);
        }
        function classNormal(iFocusBtnID, iFocusTxID) {
            var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
            var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
            for (var i = 0; i < iFocusBtns.length; i++) {
                iFocusBtns[i].className = 'normal';
                iFocusTxs[i].className = 'normal';
            }
        }
        function classCurrent(iFocusBtnID, iFocusTxID, n) {
            var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
            var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
            iFocusBtns[n].className = 'current';
            iFocusTxs[n].className = 'current';
        }
        function iFocusChange() {
            if (!$('ifocus')) return false;
            $('ifocus').onmouseover = function () { atuokey = true };
            $('ifocus').onmouseout = function () { atuokey = false };
            var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
            var listLength = iFocusBtns.length;
            iFocusBtns[0].onmouseover = function () {
                moveElement('ifocus_piclist', 0, 5, 0);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 0);
            }
            if (listLength >= 2) {
                iFocusBtns[1].onmouseover = function () {
                    moveElement('ifocus_piclist', 0, -513, 0);
                    classNormal('ifocus_btn', 'ifocus_tx');
                    classCurrent('ifocus_btn', 'ifocus_tx', 1);
                }
            }
            if (listLength >= 3) {
                iFocusBtns[2].onmouseover = function () {
                    moveElement('ifocus_piclist', 0, -1032, 0);
                    classNormal('ifocus_btn', 'ifocus_tx');
                    classCurrent('ifocus_btn', 'ifocus_tx', 2);
                }
            }
            if (listLength >= 4) {
                iFocusBtns[3].onmouseover = function () {
                    moveElement('ifocus_piclist', 0, -1550, 5);
                    classNormal('ifocus_btn', 'ifocus_tx');
                    classCurrent('ifocus_btn', 'ifocus_tx', 3);
                }
            }
            if (listLength >= 5) {
                iFocusBtns[4].onmouseover = function () {
                    moveElement('ifocus_piclist', 0, -2068, 5);
                    classNormal('ifocus_btn', 'ifocus_tx');
                    classCurrent('ifocus_btn', 'ifocus_tx', 4);
                }
            }

        }
        setInterval('autoiFocus()', 10000);
        var atuokey = false;
        function autoiFocus() {
            if (!$('ifocus')) return false;
            if (atuokey) return false;
            var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
            var listLength = focusBtnList.length;
            for (var i = 0; i < listLength; i++) {
                if (focusBtnList[i].className == 'current') var currentNum = i;
            }
            if (currentNum == 0 && listLength != 1) {
                moveElement('ifocus_piclist', 0, -530, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 1);
            }
            if (currentNum == 1 && listLength != 2) {
                moveElement('ifocus_piclist', 0, -1060, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 2);
            }
            if (currentNum == 2 && listLength != 3) {
                moveElement('ifocus_piclist', 0, -1590, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 3);
            }
            if (currentNum == 3 && listLength != 4) {
                moveElement('ifocus_piclist', 0, -2120, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 4);
            }
            if (currentNum == 4 && listLength != 5) {
                moveElement('ifocus_piclist', 0, -2650, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 5);
            }
            if (currentNum == 5) {
                moveElement('ifocus_piclist', 0, 0, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 0);
            }
            if (currentNum == 1 && listLength == 2) {
                moveElement('ifocus_piclist', 0, 0, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 0);
            }
            if (currentNum == 2 && listLength == 3) {
                moveElement('ifocus_piclist', 0, 0, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 0);
            }
            if (currentNum == 3 && listLength == 4) {
                moveElement('ifocus_piclist', 0, 0, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 0);
            }
            if (currentNum == 4 && listLength == 5) {
                moveElement('ifocus_piclist', 0, 0, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 0);
            }
        }
        addLoadEvent(iFocusChange);
    </script>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)