master

分支 (1)

管理

管理

master

slider_plugin
/
test2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>原生js轮播图</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    ul,
    ol {
        list-style: none;
    }
    /*消除图片底部3像素距离*/

    img {
        vertical-align: top;
    }

    .scroll {
        width: 500px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid #ccc;
        padding: 7px;
        /*overflow: hidden;*/
        position: relative;
    }

    .box {
        width: 500px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }

    .box ul {
        width: 600%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .box ul li {
        float: left;
    }

    .scroll ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }

    .scroll ol li {
        float: left;
        width: 20px;
        height: 20px;
        background: pink;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        background-color: pink;
        margin-left: 10px;
        cursor: pointer;
    }

    .scroll ol li.current {
        background-color: purple;
    }
    .btn{
        position: absolute;
        width: 100%;
    }
    .btn .prevBtn,
    .nextBtn {
        width: 50px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.5);
        margin-top: 50px;
        cursor: pointer;
    }

    .prevBtn:hover,.nextBtn:hover{
        background-color: rgba(150,150,150,0.5);
    }
    .btn .prevBtn{
        float: left;
    }
    .btn .prevBtn span{
        display: block;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-top: 40px;
        border-left: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transform: rotate(45deg);
    }
    .btn .nextBtn{
        float: right;
    }
    .btn .nextBtn span{
        display: block;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-top: 40px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transform: rotate(-45deg);
    }
    </style>
    <script type="text/javascript" src="../tab/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/slider2.js"></script>
</head>

<body>
    <div id="scroll" class="scroll js-slider" data-config='{"autoPlay": 3000,"speed": 300}'>
        <div id="box" class="box">
            <ul id="ul">
                <li><img src="images/1.jpg" width="500" height="200"></li>
                <li><img src="images/2.jpg" width="500" height="200"></li>
                <li><img src="images/3.jpg" width="500" height="200"></li>
                <li><img src="images/4.jpg" width="500" height="200"></li>
                <li><img src="images/5.jpg" width="500" height="200"></li>
            </ul>
        <div class="btn">
            <div class="prevBtn"><span></span></div>
            <div class="nextBtn"><span></span></div>
        </div>
        </div>
    </div>
    <script type="text/javascript">
    // var slider2 = new Slider($(".js-slider"));
    // Slider.init($(".js-slider"));
    $(".js-slider").slider();
    // var scroll = document.getElementById("scroll"); // 获得大盒子
    // var ul = document.getElementById("ul"); // 获得ul
    // var ulLis = ul.children; // 获得ul的盒子 以此来生成ol中li的个数
    // var liWidth = ul.children[0].offsetWidth; // 获得每个li的宽度
    // // 操作元素
    // // 因为要做无缝滚动，所以要克隆第一张，放到最后一张后面
    // // 1. 克隆元素
    // ul.appendChild(ul.children[0].cloneNode(true));

    // // 2.创建ol 和li
    // var ol = document.createElement("ol"); //创建ol元素
    // scroll.appendChild(ol); // 把ol放到scroll盒子里面去
    // for (var i = 0; i < ulLis.length - 1; i++) {
    //     var li = document.createElement("li"); // 创建li元素
    //     li.innerHTML = i + 1; // 给li里面添加文字  1 2 3 4 5
    //     ol.appendChild(li); // 将li元素添加到ol里面
    // }
    // ol.children[0].className = "current"; // ol中的第一个li背景色为purple

    // // 动画函数 第一个参数，代表谁动  第二个参数 动多少
    // // 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度  即 offsetLeft + speed

    // function animate(obj, target) {
    //     // 首先清除掉定时器
    //     clearInterval(obj.timer);
    //     // 用来判断 是+ 还是 -  即说明向左走还是向右走
    //     var speed = obj.offsetLeft < target ? 15 : -15;
    //     obj.timer = setInterval(function() {
    //         var result = target - obj.offsetLeft; //它们的差值不会超过speed
    //         obj.style.left = obj.offsetLeft + speed + "px";
    //         // 有可能有小数的存在，所以在这里要做个判断
    //         if (Math.abs(result) <= Math.abs(speed)) {
    //             clearInterval(obj.timer);
    //             obj.style.left = target + "px";
    //         }
    //     }, 10);
    // }

    // var timer = null; // 轮播图的定时器
    // var key = 0; // 控制播放的张数
    // var circle = 0; // 控制小圆点
    // var olLis = ol.children;

    // timer = setInterval(autoplay, 1000); // 自动轮播
    // function autoplay() {
    //     /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
    //     就要重头开始播放.  因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
    //     key++; // 先++
    //     if (key > ulLis.length - 1) { // 后判断

    //         ul.style.left = 0; // 迅速调回
    //         key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放
    //     }
    //     // 动画部分
    //     animate(ul, -key * liWidth);
    //     // 小圆点circle   当显示第几张图片是，对应的小圆点的颜色也发生变化

    //     /*同理,对小圆点也要有一个判断*/
    //     circle++;
    //     if (circle > olLis.length - 1) {
    //         circle = 0;
    //     }
    //     // 小圆点颜色发生变化
    //     for (var i = 0; i < olLis.length; i++) {
    //         // 先清除掉所用的小圆点类名
    //         olLis[i].className = "";
    //     }
    //     // 给当前的小圆点 添加一个类名
    //     olLis[circle].className = "current";

    // }
    </script>
</body>

</html>