js实现图片轮播

来源：互联网发布：网络营销模拟软件编辑：程序博客网时间：2024/05/21 01:50

原生js代码实现图片轮播功能

html代码：

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>轮播图</title>  <link rel="stylesheet" href="style.css"></head><body>  <div class="container">    <div class="wrap" style="left: -600px;">      <img src="./image/img_road.jpg" alt="5">      <img src="./image/img_fjords.jpg" alt="1">      <img src="./image/img_forest.jpg" alt="2">      <img src="./image/img_lights.jpg" alt="3">      <img src="./image/img_mountains.jpg" alt="4">      <img src="./image/img_road.jpg" alt="5">      <img src="./image/img_fjords.jpg" alt="1">    </div>    <div class="buttons">      <span class="on"></span>      <span></span>      <span></span>      <span></span>      <span></span>    </div>    <a href="javascript:void (0);" rel="external nofollow" class="arrow arrow_left"><</a>    <a href="javascript:void (0);" rel="external nofollow" class="arrow arrow_right">></a>  </div>  <script src="carousel.js"></script></body></html>

css代码：

* {    margin:0;    padding:0;  }  a{    text-decoration: none;  }  .container {    position: relative;    width: 600px;    height: 400px;    margin:100px auto 0 auto;    box-shadow: 0 0 5px rgb(180, 182, 180);    overflow: hidden;  }  .container .wrap {    position: absolute;    width: 4200px;    height: 400px;    z-index: 1;  }  .container .wrap img {    float: left;    width: 600px;    height: 400px;  }  .container .buttons {    position: absolute;    right: 5px;    bottom:30px;    width: 120px;    height: 10px;    z-index: 2;  }  .container .buttons span {    margin-left: 5px;    display: inline-block;    width: 12px;    height: 12px;    border-radius: 50%;    background-color: rgb(211, 212, 211);    text-align: center;    color:white;    cursor: pointer;  }  .container .buttons span.on{    background-color: rgb(151, 150, 150);  }  .container .arrow {    position: absolute;    top: 40%;    color: rgb(179, 182, 179);    padding:0px 15px;    border-radius: 50%;    font-size: 50px;    z-index: 2;    display: none;  }  .container .arrow_left {    left: 10px;  }  .container .arrow_right {    right: 10px;  }  .container:hover .arrow {    display: block;  }  .container .arrow:hover {    background-color: rgba(0,0,0,0.2);  }

js代码：

// 下一页function next_pic(wrap) {    index++;    if (index > 4) {        index = 0;    }    showCurrentDot(wrap);    var newLeft;    if (wrap.style.left === "-3600px") {        newLeft = -1200;    } else {        newLeft = parseInt(wrap.style.left) - 600;    }    wrap.style.left = newLeft + "px";}// 上一页function prev_pic(wrap) {    index--;    if (index < 0) {        index = 4;    }    showCurrentDot(wrap);    var newLeft;    if (wrap.style.left === "0px") {        newLeft = -2400;    } else {        newLeft = parseInt(wrap.style.left) + 600;    }    wrap.style.left = newLeft + "px";}// 定时器 --- 自动播放let timer = null;function autoPlay(wrap) {    timer = setInterval(function () {        next_pic(wrap);    }, 2000);}// 圆点导航let index = 0;let dots = document.getElementsByTagName("span");// 显示当前是第几张图片function showCurrentDot(wrap) {    for (var i = 0, len = dots.length; i < len; i++) {        dots[i].className = "";    }    dots[index].className = "on";}//最开始和最后的照片修整for (var i = 0, len = dots.length; i < len; i++) {    (function (i) {        let wrap = document.querySelector(".wrap");        dots[i].onclick = function () {            var dis = index - i;            if (index == 4 && parseInt(wrap.style.left) !== -3000) {                dis = dis - 5;            }            //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可            if (index == 0 && parseInt(wrap.style.left) !== -600) {                dis = 5 + dis;            }            wrap.style.left = (parseInt(wrap.style.left) + dis * 600) + "px";            index = i;            showCurrentDot(wrap);        }    })(i);}function init() {    var wrap = document.querySelector(".wrap");    var next = document.querySelector(".arrow_right");    var prev = document.querySelector(".arrow_left");    // 当鼠标点击上下箭头    next.onclick = function () {        next_pic(wrap);    }    prev.onclick = function () {        prev_pic(wrap);    }    //启动定时器    autoPlay(wrap);    // 鼠标滑过 取消自动播放    var container = document.querySelector(".container");    container.onmouseenter = function () {        clearInterval(timer);    }    container.onmouseleave = function () {        autoPlay(wrap);    }}window.addEventListener('load', init, false);

实现效果如下：

这里写图片描述

参考：原生js实现轮播图的示例代码

阅读全文

0 0