JS实现容器模块左右拖动效果

JS实现容器模块左右拖动效果

实际效果是 鼠标点击上方颜色模块，左右拖动，根据拖动的距离来显示模块
一共有7个颜色块

---

代码如下

CSS

#box {
                /*margin: 0 auto;*/
                width: 1750px;
                border: 1px solid black;
                display: block;
                position: relative;
                left: 0;
            }

            #box>div {
                width: 250px;
                height: 50px;
                display: inline-block;
                text-align: center;
                float: left;
            }

            h1 {
                padding: 0;
                margin: 0;
            }

Html

<div style="width: 1000px;overflow: hidden;margin: auto;position: relative;">
            <div id="box">
                <div style="background: lemonchiffon;">
                    <h1>oneh1>div>
                <div style="background: lightblue;">
                    <h1>towh1>div>
                <div style="background: gold;">
                    <h1>threeh1>div>
                <div style="background: blue;">
                    <h1>fourh1>div>
                <div style="background: orange;">
                    <h1>fiveh1>div>
                <div style="background: aqua;">
                    <h1>sixh1>div>
                <div style="background: brown;">
                    <h1>seveenh1>div>
            div>
            <h1>拖动上面的颜色模块h1>
            <p>实际原理还是轮播图p>
        div>

<div style="width: 1000px;overflow: hidden;margin: auto;position: relative;">

注意：最大容器的DIV中宽度设置为1000px 表示展示的内容为1000，超出的被隐藏，根据自己想展示的模块来设计id为‘box’的DIV则为超大宽度的容器，里面模块以浮动形式布局，原理跟轮播图一样’**。

JS

OK了。应该能看的懂了，溜了溜了