原生JS实现轮播图

最新推荐文章于 2023-09-17 14:12:21 发布

丑摸样

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量79

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_50109437/article/details/110912971

版权

这是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>轮播图</title>
    <link rel="stylesheet" href="./css/css.css" />
  </head>
  <body>
    <div id="banner">
      <img src="./imgs/1.jpg" alt="" id="carousel" />

      <div class="left"><a href="javascript:;" class="link"><</a></div>
      <div class="right"><a href="javascript:;" class="link">></a></div>

      <ul class="slide-nav">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
  <script src="./js/index.js"></script>

CSS

*{
    margin: 0;
    padding: 0;
}
#banner{
    width: 450px;
    height: 250px;
    margin: 100px auto;
    border: 1px solid black;
    position: relative;
}
a{
    text-decoration: none;
   
}
ul{
    list-style: none;
}
img{
    width: 100%;
    height: 100%;
}
.left,.right{
    width: 50px;
    height:50px;
    background: black;
    position: absolute;
    margin-top: -25px;
    text-align: center;
}
.link{
    color: #fff;
    font-size: 20px;
    line-height: 50px;
}
.left{
    left:0;
    top: 50%;    
}
.right{
    right: 0;
    top: 50%;
}
.slide-nav{
    position: absolute;
    left: 40%;
    bottom: 10px;
}
.slide-nav li{
    float: left;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin:0 5px;
}
.slide-nav .active{
    background: red;
}

JS

var banner = document.getElementById("banner");
var carousel = document.getElementById("carousel");
var li = document.getElementsByTagName("li");
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
var arr = ["./imgs/1.jpg", "./imgs/2.jpg", "./imgs/3.jpg", "./imgs/4.jpg"];

// 定义一个全局的索引
var index = 0;
var timer = null;
var flag = true;
timer = setInterval(slide, 1000);
function slide() {
  index++;
  if (index == arr.length) {
    index = 0;
  }
  carousel.src = arr[index];

  //   底部导航却换
  change();
}
function change() {
  for (var i = 0; i < li.length; i++) {
    li[i].classList.remove("active");
  }
  li[index].classList.add("active");
}
// 鼠标移入事件
banner.onmouseover = function() {
  clearInterval(timer);
};
// 鼠标移出事件
banner.onmouseout = function() {
  timer = setInterval(slide, 1000);
};

// 左边单击事件
left.onclick = function() {
  index--;
  if (index < 0) {
    index = arr.length - 1;
  }
  carousel.src = arr[index];
  change();
};
right.onclick = function() {
  slide();
};

// 点击小圆点
for (var i = 0; i < li.length; i++) {
  li[i].index = i;
  li[i].onclick = function() {
    index = this.index;
    carousel.src = arr[index];
    change();
  };
}

丑摸样

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现轮播图

这是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" />
复制链接

扫一扫