欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS+HTML+CSS实现轮播效果

程序员文章站 2022-03-20 21:53:10
本文实例为大家分享了android九宫格图片展示的具体代码，供大家参考，具体内容如下 1.lunbo.html代码：

本文实例为大家分享了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(); 
};

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

上一篇： 解析Vue 2.5的Diff算法

下一篇： 基于vue2.0实现简单轮播图

推荐阅读