js实现图片的点击滚动效果

来源：互联网发布：加密软件对比编辑：程序博客网时间：2024/04/29 09:58

前台页面代码：

.conC_content_top_c

{

width:268px;

height:105px;

padding:0px; margin:0px;

}

#img ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 268000px;
        }
        #img ul li
        {
            padding: 0px 2px;
            width: 130px;
            height: 105px;
            display: block;
            float: left;
            background: #fff;
            margin: 0px;
        }
        #img
        {
            width: 268px;
            height: 105px;
            background: #ccc;
            overflow: hidden;
            float: left;
            border: 0px;
            margin: 0px;
            padding: 0px;
        }
        #img ul li img
        {
            width: 130px;
            height: 105px;
        }

</style>

js脚本：

function $(obj) { return document.getElementById(obj) }
                            var maxWidth = $("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length * 134; //所有图片的占用宽；134为单张图片占用位置的宽度
                            //                            var isScroll = false;
                            //                            var modiLeft;
                            var targetx = 268; //一次滚动距离【一次滚动两张图片】
                            var dx; //滚动后距左/右边距的距离
                            var a = null;

                            //向左滚动图片
                            function moveLeft() {
                                $("pageDown").alt = " 下一页";
                                var le = parseInt($("img").scrollLeft);
                                if (le == 0 || le == 268) {
                                    $("pageUp").alt = "最前页";
                                }
                                else {
                                    $("pageUp").alt = "上一页";
                                }

                                if (le == 0) {
                                    return;
                                }
                                else {
                                    targetx = parseInt($("img").scrollLeft) - 268;
                                    scLeft();
                                }

}
function scLeft() {

                                dx = parseInt($("img").scrollLeft) - targetx;
                                if (dx == 6) {
                                    $("img").scrollLeft = targetx;
                                } else {
                                    $("img").scrollLeft -= dx * .3 - 2;
                                }

clearScroll = setTimeout(scLeft, 50);
if (dx * .3 < 2) { clearTimeout(clearScroll); }

}

                            //向右滚动图片
                            function moveRight() {
                                $("pageUp").alt = "上一页";
                                var le = parseInt($("img").scrollLeft) + 268 > 804 ? 804 : parseInt($("img").scrollLeft) + 268;

                                if (le == maxWidth - 268) {
                                    $("pageDown").alt = "最后页";
                                }
                                if (le == 804) {

                                    return;
                                }
                                else {
                                    targetx = parseInt($("img").scrollLeft) + 268;
                                    scRight();
                                }
                            }
                            function scRight() {
                                dx = targetx - parseInt($("img").scrollLeft);

                                if (dx == 0) {
                                    return;
                                }
                                else {
                                    $("img").scrollLeft += dx * .3 + 2;
                                }

a = setTimeout(scRight, 50);
if (dx * .3 < 1) { clearTimeout(a) }

                            }

                        </script>