图片轮播

时间：2018-08-22 12:41:34 阅读：263 评论：0 收藏：0 [点我收藏+]

标签：viewport 需要自己 apc htm 用户 pch asc time

图片轮播的大概功能：

图片是以滑动的方式出现的
可以点击按钮来滑动到上一张和下一张
当下一张没有了，就左滑到下一张。当上一张没有了，就右滑到最后一张
可以点击导航小圆点来跳转到指定的某一张
鼠标在图片外时，图片可以自动滑动
鼠标停留在图片上停止滑动

　　其中的难点，核心就是第一点和第三点，做完这两点图片轮播就做了一半了。滑动给人的感觉就是图片在一排，每次整排移动一张图片大小的位置。当最后一张图片滑动时，先将前面所有图片按照原顺序依次排在后面，然后滑动，滑动动画结束后再将最后一张图片还原到最后位置上。我按照这种方式做完后发现图片很混乱，特别是在端点处的照片，不能按照自己的预期滑动。

　　然后就有了第二种方法，图片的滑动是给用户看的，每次滑动用户最多看见两张照片，所以我们不必考虑所有图片的排序，我们只需要将这两张排个序，在一起滑个动就行了。左滑到下一张就先把下一张图片移动到当前图片的后面，并一起左滑给用户看。右滑同理也一样。

　　查看效果：https://oleolema.github.io/blog/%E5%9B%BE%E7%89%87%E8%BD%AE%E6%92%AD/

贴上代码：

js:

(function () {
    var img4 = [
        "http://ww2.sinaimg.cn/large/6834b4ddjw1f5yf4s5c3kj21jk1117wh.jpg", "http://ww3.sinaimg.cn/large/6834b4ddjw1f5yf5cjkcnj21jk2bce82.jpg", "http://ww3.sinaimg.cn/large/6834b4ddjw1f5yf29ywgzj21jk2bc4qq.jpg", "http://ww1.sinaimg.cn/large/6834b4ddjw1f5yf1jk9a6j21jk1nd1kx.jpg", "http://ww4.sinaimg.cn/large/6834b4ddjw1f5yf1ap491j21jk111kg9.jpg", "http://ww3.sinaimg.cn/large/6834b4ddjw1f5yf12bw82j21jk10m7te.jpg", "http://ww1.sinaimg.cn/large/6834b4ddjw1f5yf0uc0dsj21jk2bckjl.jpg", "http://ww1.sinaimg.cn/large/6834b4ddjw1f5yf0fs65vj21jk1gi7wh.jpg", "http://ww2.sinaimg.cn/large/6834b4ddjw1f5yeyqzzu3j21jk2bce81.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlfhfw7hj20kd0ukaph.jpg", "http://ww3.sinaimg.cn/large/679865b1gw1ehrlfgckajj20kd0uk46i.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlf95v9uj20kd0uk101.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlf95v9uj20kd0uk101.jpg", "http://ww3.sinaimg.cn/large/679865b1gw1ehrlf55rx6j20kd0ukahs.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlf46olyj20uk0kdtgh.jpg", "http://ww2.sinaimg.cn/large/679865b1gw1ehrlf3a784j20kd0ukdnq.jpg", "http://ww1.sinaimg.cn/large/679865b1gw1ehrlf2atjfj20kd0uktg6.jpg", "http://ww1.sinaimg.cn/large/679865b1gw1ehrlf1b3wxj20uk0kdgqb.jpg",  "http://ww3.sinaimg.cn/large/679865b1gw1ehrlezufszj20uk0kd7bh.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrleyz61dj20uk0kd794.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrleya5qaj20uk0kdgr1.jpg",

    ];

    var imgBox = document.getElementsByClassName(‘imgBox‘)[0];      //获取盒子
    var imgBoll = document.createElement(‘div‘);            //创建一个图片导航点
    var imgBoxWidth = imgBox.offsetWidth;   //盒子宽度
    var img = [];                //所有图片
    var imgIndex = 0;           //当前显示的图片下标
    var isRotate = false;       //防止多个定时器同时执行
    var timer;
    createLabel();      //创建标签
    init();             //初始化

    function createLabel() {
        for (var i = 0; i < img4.length; i++) {
            img.push({
                img: document.createElement(‘img‘),
                boll: document.createElement(‘div‘),
                src: img4[i],
                a: document.createElement(‘a‘),
                herf: "javascript:void(0);"
            });
            img[img.length - 1].img.src = img[img.length - 1].src;          //设置图片来源
            img[img.length - 1].img.style.width = imgBoxWidth + ‘px‘;       //图片大小和盒子一样大

            img[img.length - 1].a.style.top = ‘0px‘;                        //初始化位置      
            img[img.length - 1].a.style.left = imgBoxWidth * i + ‘px‘;      //初始化位置

            img[img.length - 1].boll.className = "smallBoll"                //命名className
            img[img.length - 1].boll.style.bottom = ‘10%‘;              //下面间隔
            img[img.length - 1].boll.style.left = (imgBoxWidth - 20 * img4.length) / 2 + i * 20 + ‘px‘;         //中间对齐
            img[img.length - 1].boll.onclick = function () {            //绑定点击
                if (isRotate) {
                    return;
                }
                img[imgIndex].boll.className = "smallBoll";
                this.className = "selectBoll";
                var thatIndex;
                //找到当前的下标
                for (var i = 0; i < img.length; i++) {
                    if (this == img[i].boll) {
                        thatIndex = i;
                        break;
                    }
                }
                if (thatIndex > imgIndex) {
                    var step = thatIndex - imgIndex;
                    var timer = setInterval(function () {
                        nextImg(step * 10);         //距离越远切换越快
                        if (thatIndex == imgIndex + 1) {
                            clearInterval(timer);
                            return;
                        }
                    }, 1);
                }
                else if (thatIndex < imgIndex) {
                    var step = imgIndex - thatIndex;
                    var timer = setInterval(function () {
                        preImg(step * 10);
                        if (thatIndex == imgIndex - 1) {
                            clearInterval(timer);
                            return;
                        }
                    }, 1);
                }
            }
            //插入
            imgBoll.appendChild(img[img.length - 1].boll);
            img[img.length - 1].a.appendChild(img[img.length - 1].img);     //图片插入到a标签中
            imgBox.appendChild(img[img.length - 1].a);                      //a标签插入到盒子中
        }
    }
    function init() {
        imgBoll.className = ‘imgbollBox‘;
        imgBox.appendChild(imgBoll);
        img[imgIndex].boll.className = "selectBoll";
        img[0].img.onload = function () {       //第一张图片加载完成
            imgBox.style.height = img[0].img.offsetHeight + ‘px‘;       //调整盒子大小为第一张图片的大小
            var preImgButton = document.getElementsByClassName(‘preImg‘)[0];
            var nextImgButton = document.getElementsByClassName(‘nextImg‘)[0];
            nextImgButton.style.height = img[0].img.offsetHeight + ‘px‘;
            nextImgButton.onclick = function () { nextImg() };          //绑定点击
            document.getElementsByClassName(‘nextImgShell‘)[0].style.height = img[0].img.offsetHeight + ‘px‘;
            preImgButton.style.height = img[0].img.offsetHeight + ‘px‘;
            preImgButton.onclick = function () { preImg() };
            document.getElementsByClassName(‘preImgShell‘)[0].style.height = img[0].img.offsetHeight + ‘px‘;
            timer = setInterval(function () {
                nextImg();
            }, 3000);
        }
        imgBox.onmouseover = function () {          //鼠标放在图片上不自动滑动图片
            clearInterval(timer);
        }
        imgBox.onmouseout = function () {           //离开图片重新开始滑动图片
            timer = setInterval(function () {
                nextImg();
            }, 3000);
        }
    }




    function nextImg(setStep) {
        if (isRotate) {
            return;
        }
        isRotate = true;
        var that = imgIndex % img.length;           //当前图片
        var next = (imgIndex + 1) % img.length;     //下一张图片
        img[that].boll.className = "smallBoll";
        img[next].boll.className = "selectBoll";
        //将下一张图片移动到当前图片后，并一起滑动
        img[next].a.style.left = imgBox.offsetWidth + ‘px‘;
        //滑动动画
        (function () {
            var step = setStep || 10;
            var count = 0;
            var timer = setInterval(function () {
                if (++count * step >= imgBoxWidth) {
                    img[that].a.style.left = -imgBoxWidth + ‘px‘;       //对齐盒子
                    img[next].a.style.left = ‘0px‘;
                    clearInterval(timer);
                    imgIndex = next;
                    isRotate = false;
                    return;
                }
                img[next].a.style.left = img[next].a.offsetLeft - step + ‘px‘;
                img[that].a.style.left = img[that].a.offsetLeft - step + ‘px‘;
            }, 1);
        }());
    }

    function preImg(setStep) {
        if (isRotate) {
            return;
        }
        isRotate = true;
        var that = imgIndex % img.length;           //当前图片
        var pre = (imgIndex + img.length - 1) % img.length;     //下一张图片
        img[that].boll.className = "smallBoll";
        img[pre].boll.className = "selectBoll";
        //将上一张图片移动到当前图片前，并一起滑动
        img[pre].a.style.left = -imgBox.offsetWidth + ‘px‘;
        //滑动动画
        (function () {
            var step = setStep || 10;
            var count = 0;
            var timer = setInterval(function () {
                if (++count * step >= imgBoxWidth) {
                    img[that].a.style.left = imgBoxWidth + ‘px‘;       //对齐盒子
                    img[pre].a.style.left = ‘0px‘;
                    clearInterval(timer);
                    imgIndex = pre;
                    isRotate = false;
                    return;
                }
                img[pre].a.style.left = img[pre].a.offsetLeft + step + ‘px‘;
                img[that].a.style.left = img[that].a.offsetLeft + step + ‘px‘;
            }, 1);
        }());
    }
}());

css:

* {
    margin: 0px;
    padding: 0px;
}

.imgBox {
    width: 800px;
    overflow: hidden;
    position: relative;
}

.imgBox a {
    position: absolute;
}

.smallBoll, .selectBoll {
    width: 12px;
    height: 12px;
    position: absolute;
    background: #eee;
    user-select: none;
    border-radius: 50%;
    opacity: 0.618;
}

div.selectBoll {
    background: rgb(0, 255, 0);
}

.preImgShell, .nextImgShell {
    width: 60px;
    user-select: none;
    position: absolute;
    z-index: 8888;
}

.preImgShell {
    left: 0px;
}

.nextImgShell {
    right: 0px;
}

.preImg, .nextImg {
    width: 80px;
    user-select: none;
    background: #eee;
    line-height: 50px;
    text-align: center;
    position: absolute;
    z-index: 9999;
    transition: all 0.5s;
}

.preImg {
    left: -80px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAI27AACNuwGddYGAAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAVxQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJDo9JgAAAHN0Uk5TAAECAwYHCAkKCw0PEBESExUWFxgZGx0gIycoLS4vMDIzNDU2Nzg/QEFDREZISUpLTE1OUlNUWGFiaGtsbXF5e3x/g4WHiYqQk5SXmJudn6KssLS3uLu8vsPGx8rR1dfc3uHj5OXm7O3u7/Dz9PX2+Pn7/vWanfgAAAU0SURBVHja7dxZc1QFFIVR5imIgswGQSEgBEiACDSDQBQFFMI8hiHMIEknnP9f5YsvWtDpVKWK9N1r/YTz7Ye+dW/1okUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHfVt2zvYv36JQwRaM3Lt6VRVVdXMy5utzS6SZHnrznT91/joRncJsfTERH3C5G9fuU2CkSf1Ge9+Wek8TbdirDoY3+JCzbbpUXX0+ic3arKBVzWLmdOu1FxH2zW7C+7U2P7TXfSvj8dcKrl/1Yfv3KqJjnTZv+rZ166V3L/qunNF96/a7WDR/euui0X3r9rvZtH966GjRfev8lIgu3+dcrfo/nXL4aL7V3u10yX3rxp0u+j+ddLxovvXOdeL7l+XnC+6vxdC4f3rtgNG968xF4zuX787YXT/OuuG0f3ruCNG968drhjd/7krRvevP50xun8Nu2OvGp6P/lOrHDK5vzcB4f0/bHDJ5P71q0tG93+71imT+1fLKaP7X3XK6P4Plrllcv8X37plcv/3u9wyuv8et9Qf/dEf/dEf/dEf/dEf/dEf/dGfL21If/31119//fXXX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/99ddff/3RH/3pnf5t/fXXX3/9Ex3WX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/0R3/0R38WvEP666+//vrrr7/++uuvv/7666+//vrrr7/++uuvv/7666+//vrrr7/++uuvv/7664/+6I/+6I/+LGgH9ddff/31119//fXXX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/99dcf/dEf/dEf/TEALAALoPEL2O2WFoAFYAFYABaABWABWAAWgAVgAVgAFoAFYAFYABaABWABWAANXcCPbtmbDlmABViABViABViABViABViABViABViABViABViABViABczZOwuwACwAC8ACsAAsAAvAArAAshbwg1taABaABdBrDluABViABViABViABViABViABViABViABViABViABViABViABViABViABViABViABViABViABXSzgF1uaQFYABaABWAB9JIhC7AAC7CAefDWAnp1AdMWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAFzWMBOt7QALAALwAKwACwAC6BXDFuABViABViABViABViABViABViABViABViABViABViABViABViABViABcxlAf1umb2AifVumb2A+8vcMnsBfzll+AJaTpm9gDd9Tpm9gFGXzF7A354Ewhfwh0NmL2BypUP2rCPzsYAhd8xewBVnzF7Ac1cMX8AOV8xewHFHzF7AWTfMXsBFJ8xewJgLZi/gtgNmL+C6+2Uv4LLzZS/gnOtlL+Ck42UvYNDtohfQXu100Qu45XDZCzjlbtkL2OJs0Qt46GjZCzjgZtELuOdi2QsYcLDoBdxwrugF+IeAZjra5QImv3er5AV8/NmlGruAdhcDuOBOzTXwarb8M2dcqck2Perc/81+N2q2FWOd+j/e6kKNN/Lkc/nfn/cRQIKlJyY+lX/q4jq3CbG8def/T4TjoxvdJcmakWtPp/794f/iZmuziyTq275vsP+bxQ4BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC84/qncrXYnHpX0AAAAASUVORK5CYII=) 100px 0px;
    background-size: 120px 200px;
    background-position: center;
    background-repeat: no-repeat;
}

.nextImg {
    right: -80px;
    background: url(data:image/png;base64,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) 100px 0px;
    background-size: 120px 200px;
    background-position: center;
    background-repeat: no-repeat;
}

.preImgShell:hover .preImg {
    left: 0px;
}

.nextImgShell:hover .nextImg {
    right: 0px;
}

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="imgRotate.css">
</head>

<body>
    <div class="imgBox">
        <div class="preImgShell">
            <div class="preImg"></div>
        </div>
        <div class="nextImgShell">
            <div class="nextImg"></div>
        </div>
    </div>

</body>
<script src="imgRotate.js"></script>

</html>

图片轮播

标签：viewport 需要自己 apc htm 用户 pch asc time

原文地址：https://www.cnblogs.com/oleolema/p/9516888.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行