教你做一个滑块浏览

单先生
单先生 发布于 2016-12-31 12:53:27 浏览:1978 类型:原创 - 教程 分类:JavaScript - 代码参考 二维码: 作者原创 版权保护
亲爱的观众朋友们大家好,今天给大家带来的是一个滑动浏览的demo。多图预警

滑块浏览还是很常见的。今天就教一下像我一样的小菜鸟们。先看看这个demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 800px;
            height: 230px;
            border: 1px solid #000;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            margin: 100px auto;

        }
        .box ul{
            width: 1950px;
            height: 200px;
            background-color: green;
            position: absolute;
            left:0;
            top: 0px;
        }
        .box ul li{
            width: 130px;
            height: 100%;
            background-color: goldenrod;
            border: 1px solid #000;
            box-sizing: border-box;
            float: left;
            text-align: center;
            font-size: 28px;
        }
        .box .bottom{
            width: 100%;
            height: 30px;
            background-color: gainsboro;
            position: absolute;
            left: 0px;
            bottom:0px;
        }
        .box span{
            width: 100px;
            height: 30px;
            border-radius: 15px;
            background-color: green;
            position: absolute;
            left: 0;
            bottom: 0px;
        }
    </style>
</head>
<body>


<div id="fatherBox" class="box">
    <ul id="picBox">
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
        <li>假装有图片</li>
    </ul>
    <div class="bottom"></div>
    <span id="slider"></span>
</div>

<script>
    window.onload = function () {
        var fatherBox  = document.getElementById('fatherBox');
        var picBox     = document.getElementById('picBox')
        var sliderSpan = document.getElementById('slider');
        var sRatio     = (fatherBox.offsetWidth-sliderSpan.offsetWidth)/(picBox.offsetWidth-fatherBox.offsetWidth);

        sliderSpan.onmousedown = function (event) {
            var event = event || window.event;
            //clientX1-liderSpan.offsetLeft1
            var startX = event.clientX-sliderSpan.offsetLeft;

            document.onmousemove = function (event) {
                var event = event || window.event;
               //var spanLeft = event.clientX-fatherBox.offsetLeft;//代码可行
                var spanLeft = event.clientX-startX;
                //边界检测
                if (spanLeft<=0){
                    spanLeft = 0;
                }else if (spanLeft>=(fatherBox.offsetWidth-sliderSpan.offsetWidth)){
                    spanLeft=fatherBox.offsetWidth-sliderSpan.offsetWidth;
                }
                sliderSpan.style.left = spanLeft+'px';
                picBox.style.left     = -spanLeft/sRatio+'px';

                return false;
            }

            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup   = null;
            }

            return false;
        }
    }
</script>
</body>
</html>


1.第一步我们要把界面先布局好,外层一个div,里面是ul标签和一个span滑动标签。

如图:
教你做一个滑块浏览

2.我们第一步做的就是,先让滑块动起来。
图片滑动的距离s就是,鼠标点击到slider上后,然后鼠标移动多少滑块就移动多少。知道这个道理我们就开始做了。根据上图我们得到下图是推倒公式:


教你做一个滑块浏览

3.如果你看不懂图1的距离s为啥相等,那么就看这个图,这个意思就是鼠标初始位置就是滑块的左边位置:

教你做一个滑块浏览

4.接下来就是联动了,让picBox跟着滑块动,请看图:

教你做一个滑块浏览
标签:
z
给个赞 18 人点赞
收藏 47 人收藏
评论 已有 14 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
ddvbbk
ddvbbk2017-01-04 12:51:035F
你用的什么开发工具
举报 支持 (1) 回复 (1)
最新评论
965174016
9651740163 天前14F
请求 //@hd564964:假装点个赞
举报 支持 (0) 回复 (0)
lwmehb
lwmehb2017-01-04 21:15:1313F
恩,如果不用减去偏移量的话,每次鼠标移动的时候,span标签的left总是 clientX的值减去父级元素的left,会获取不到鼠标在span标签上的位置,鼠标会一直都在span标签的最左边吧,我可能表达会不清楚吧。。。 //@单先生:这个用不到偏移量,只是你鼠标走多少,他就走多少 //@lwmehb:如果用父级盒子的left的话应该还要计算鼠标点击span标签上的位置偏移量吧。。。
举报 支持 (0) 回复 (0)
单先生
单先生2017-01-04 18:35:4712F
这个用不到偏移量,只是你鼠标走多少,他就走多少 //@lwmehb:如果用父级盒子的left的话应该还要计算鼠标点击span标签上的位置偏移量吧。。。
举报 支持 (0) 回复 (1)
lwmehb
lwmehb2017-01-04 17:46:4011F
如果用父级盒子的left的话应该还要计算鼠标点击span标签上的位置偏移量吧。。。
举报 支持 (0) 回复 (1)
chenyi_web
chenyi_web2017-01-04 17:19:4410F
假装没看到
举报 支持 (0) 回复 (0)
Queen_5200
Queen_52002017-01-04 16:23:039F
假装我看懂了的样子。
举报 支持 (0) 回复 (0)
ilz
ilz2017-01-04 14:42:128F
假装没看到
举报 支持 (0) 回复 (0)
ddvbbk
ddvbbk2017-01-04 14:14:557F
不习惯用那个,虽然很好看,我用hbuilder //@单先生:webstroe //@ddvbbk:你用的什么开发工具
举报 支持 (0) 回复 (0)
单先生
单先生2017-01-04 13:23:286F
webstroe //@ddvbbk:你用的什么开发工具
举报 支持 (0) 回复 (1)
ddvbbk
ddvbbk2017-01-04 12:51:035F
你用的什么开发工具
举报 支持 (1) 回复 (1)
单先生
单先生2017-01-04 12:50:104F
好的。我试试 //@红达:加上鼠标滚轮就更完美了。
举报 支持 (0) 回复 (0)
红达
红达2017-01-04 12:00:553F
加上鼠标滚轮就更完美了。
举报 支持 (0) 回复 (1)
单先生
单先生2017-01-03 18:31:292F
假装回复一下 //@hd564964:假装点个赞
举报 支持 (0) 回复 (0)
hd564964
hd5649642017-01-03 13:57:371F
假装点个赞
举报 支持 (0) 回复 (2)
单先生 单先生 作者

行有不得,反求诸己。

作者最新