jquery全屏滑块拖动横向图片滚动js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery全屏滑块拖动横向图片滚动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" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jquery全屏滑块拖动横向图片滚动</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="js/jquery.mCustomScrollbar.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
    <!--made-->
    <script>
        (function ($) {
            $(window).load(function () {

                $.mCustomScrollbar.defaults.theme = "light-2"; //set "light-2" as the default theme

                $("#ho").mCustomScrollbar({
                    axis: "x",
                    advanced: { autoExpandHorizontalScroll: true }
                });

            });
        })(jQuery);
    </script>
    <div class="made scrollbox" id="horizontal">
        <div class="madegame">
            <ul class="clearfix" id="ho">
                <li>

                    <img src="img/1.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/2.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/3.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/4.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/5.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/3.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/2.jpg" class="gameImg" />

                </li>
                <li>

                    <img src="img/5.jpg" class="gameImg" />

                </li>
                <li>
                    <img src="img/1.jpg" class="gameImg" />
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin:0;padding:0;}
body{font:12px "微软雅黑",arial;background-size:100% auto;background:#f6f6f6;}
a{text-decoration:none;}
img{border:none;}
ul,li{list-style:none;list-style-type:none;}
/*clearfix清除浮动*/
.clearfix:after{visibility:hidden;display:block;content:" ";clear:both;height:0;line-height:0;}
.clearfix{zoom:1;}
/*made*/
.made{background:#FFF;}
.madegame{width:100%;overflow:hidden;}
#ho{position:relative !important;}
#ho li{float:left;width:320px;position:relative;}

附件:下载该文件资源,减少时间成本(增值服务)