搜索
  • 用JS手写一个图片轮播功能组件
  • 发布于 2个月前
  • 464 热度
    0 评论
本示例主要综合应用了Html，JavaScript，CSS样式，实现轮播图功能。主要如下所示：
Html代码，如下所示：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>堆代码 duidaima.com</title>
  </head>
  <link href="./css/index.css" type="text/css" rel="stylesheet" />
  <body>
    <div class="container">
      <ul>
        <li><img src="imgs/one.jpg"></li>
        <li><img src="imgs/two.jpg"></li>
        <li><img src="imgs/three.jpg"></li>
        <li><img src="imgs/four.jpg"></li>
        <li><img src="imgs/five.jpg"></li>
      </ul>
      <div class="dot">
        <span class="circle"></span>
        <span class="circle"></span>
        <span class="circle"></span>
        <span class="circle"></span>
        <span class="circle"></span>
      </div>
    </div>
    <div class="bottom">
      <button id="prev">上一个</button>
      <button id="next">下一个</button>
    </div>
    <script src="./js/index.js" type="text/javascript"></script>
  </body>
</html>
CSS样式代码
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
 
.container {
  width: 100%;
  height: 50%;
  text-align: center;
  margin-bottom: 10px;
}
 
.container ul {
  width: 50%;
  height: 100%;
  position: relative;
  left: 25%;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
 
.container ul li {
  width: 100%;
  height: 100%;
  list-style: none;
  position: absolute;
}
 
.container ul li img {
  width: 100%;
  height: 100%;
  transition: all 2s;
  opacity: 0;
}
 
.container ul li .active {
  opacity: 1;
}
 
.bottom {
  text-align: center;
}
 
.container .dot {
  width: 100%;
  height: 15px;
  position: relative;
  margin-top: -40px;
  z-index: 5;
  opacity: 1;
}
 
.container .dot .circle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid greenyellow;
  background-color: white;
  display: inline-block;
  opacity: 1;
 
}
JavaScript代码
console.log("----------begin-----------");
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = -1;
prev.addEventListener('click', function() {
  var images = document.querySelectorAll('.container ul li img');
  var circles = document.querySelectorAll('.container .dot .circle');
  var len = images.length;
  if (index <= 0) {
    index = len;
  }
  images.forEach(function(item, index) {
    item.className = '';
  });
  circles.forEach(function(item, index) {
    item.style.backgroundColor = 'white';
  });
  images[index - 1].className = 'active';
  circles[index - 1].style.backgroundColor = 'red';
  index = index - 1;
});
 
next.addEventListener('click', function() {
  var images = document.querySelectorAll('.container ul li img');
  var circles = document.querySelectorAll('.container .dot .circle');
  var len = images.length;
  if (index >= len - 1) {
    index = -1;
  }
  images.forEach(function(item, index) {
    item.className = '';
  });
  circles.forEach(function(item, index) {
    item.style.backgroundColor = 'white';
  });
  images[index + 1].className = 'active';
  circles[index + 1].style.backgroundColor = 'red';
  index = index + 1;
});
setInterval(function() {
  next.click();
}, 3000);
console.log("----------end-----------");

示例效果图，如下所示：

用户评论
可能感兴趣的话题