JS+HTML+CSS实现轮播效果

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

1.lunbo.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>大轮播</title>
  <link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/>
  <script src="JS/lunbo.js" type="text/javascript"></script>
</head> 

<body>
<div id="container">
  <div id="list" style="left: -1350px;">
    <img src="image/banner_3.jpg"/>
    <img src="image/banner_1.jpg"/>
    <img src="image/banner_2.jpg"/>
    <img src="image/banner_3.jpg">
    <img src="image/banner_1.jpg"/></div>
  <div id="buttons">
    <span index="1"></span>
    <span index="2"></span>
    <span index="3"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a>
  <a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></div>
</body> 

</html>

2.CSS/lunbo.css代码：

body {
  margin: 0px;
  padding: 0px;
  width: 1350px;
  height: 618px;
} 

a {
  text-decoration: none;
} 

#container {
  width: 1350px;
  height: 618px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid #ac6a0a;
} 

#list {
  width: 6750px;
  height: 618px;
  position: absolute;
  z-index: 1;
} 

#list img {
  float: left;
  width: 1350px;
  height: 618px;
} 

#buttons {
  position: absolute;
  height: 20px;
  width: 60px;
  z-index: 2;
  bottom: 20px;
  left: 50%;
} 

#buttons span {
  cursor: pointer;
  float: left;
  border: 1px solid #ad6a0a;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin-right: 5px;
} 

#buttons .on {
  background: orangered;
} 

.arrow {
  cursor: pointer;
  display: none;
  line-height: 100px;
  text-align: center;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 180px;
  background-color: RGBA(0, 0, 0, 0);
  color: #fff;
} 

.arrow:hover {
  background-color: RGBA(0, 0, 0, 0);
} 

#container:hover .arrow {
  display: block;
} 

#prev {
  left: 10px;
  color: #ffffff;
} 

#next {
  right: 10px;
  color: #ffffff;
}

3.JS/lunbo.js代码：

window.onload = function () {
  var container = document.getElementById('container');
  var list = document.getElementById('list');
  var buttons = document.getElementById('buttons').getElementsByTagName('span');
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  var index = 1;
  var len = 3;
  var animated = false;
  var interval = 3000;
  var timer;
  var size = 1350; 

  function animate(offset) {
    if (offset == 0) {
      return;
    }
    animated = true;
    var time = 300;
    var inteval = 10;
    var speed = offset / (time / inteval);
    console.log("speed:" + speed);
    var left = parseInt(list.style.left) + offset; 

    var go = function () {
      if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
        list.style.left = parseInt(list.style.left) + speed + 'px';
        console.log(list.style.left);
        setTimeout(go, inteval);
      } else {
        list.style.left = left + 'px';
        if (left > -200) {
          list.style.left = -size * len + 'px';
        }
        if (left < ( -size * len)) {
          list.style.left = '-' + size + 'px';
        }
        animated = false;
        console.log("left:" + list.style.left);
      }
    }
    go();
  } 

  function showButton() {
    for (var i = 0; i < buttons.length; i++) {
      if (buttons[i].className == 'on') {
        buttons[i].className = '';
        break;
      }
    }
    buttons[index - 1].className = 'on';
  } 

  function play() {
    timer = setTimeout(function () {
        next.onclick();
        play();
      },
      interval);
  } 

  function stop() {
    clearTimeout(timer);
  } 

  next.onclick = function () {
    if (animated) {
      return;
    }
    if (index == len) {
      index = 1;
    } else {
      index += 1;
    }
    animate(-size);
    showButton();
  }
  prev.onclick = function () {
    if (animated) {
      return;
    }
    if (index == 1) {
      index = len;
    } else {
      index -= 1;
    }
    animate(size);
    showButton();
  }
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      if (animated) {
        return;
      }
      if (this.className == 'on') {
        return;
      }
      var myIndex = parseInt(this.getAttribute('index'));
      var offset = -size * (myIndex - index); 

      animate(offset);
      index = myIndex;
      showButton();
    }
  }
  container.onmouseover = stop;
  container.onmouseout = play;
  play();
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。