原生JavaScript实现轮播图

本文实例为大家分享了JavaScript实现轮播图的具体代码，供大家参考，具体内容如下

效果：

代码：

!DOCTYPE htML>
    html>
     head>
     meta charset="UTF-8">
     tITle>
    /title>
     style>
 * {
     margin: 0;
     padding: 0;
 }
  ul, li {
     list-style: none;
 }
  .banner {
     width: 1200px;
     height: 535px;
     border: 1px solid red;
     margin: 0 auto;
     position: relative;
 }
  .slider li {
     position: absolute;
     left: 0;
     top: 0;
 }
  a {
     width: 40px;
     height: 50px;
     background-color: rgba(0, 0, 0, 0.1);
     font-Size: 50px;
     text-align: center;
     line-height: 50px;
     position: absolute;
     text-decoration: none;
     color: gray;
 }
  .BTnl {
     left: 0;
     top: 50%;
     margin-top: -15px;
 }
  .btnr {
     right: 0;
     top: 50%;
     margin-top: -25px;
 }
  .tabs {
     position: absolute;
     bottom: 20px;
     left: 50%;
     margin-left: -75px;
 }
  .tabs li {
     width: 15px;
     height: 15px;
     background-color: #ccc;
     border-radius: 50%;
     float: left;
     margin-right: 10px;
 }
     /style>
     /head>
     body>
     div class="banner">
     ul class="slider">
     li>
    img src="img/b1.jpg" alt="" />
    /li>
     li>
    img src="img/b2.jpg" alt="" />
    /li>
     li>
    img src="img/b3.jpg" alt="" />
    /li>
     li>
    img src="img/b4.jpg" alt="" />
    /li>
     li>
    img src="img/b5.jpg" alt="" />
    /li>
     li>
    img src="img/b6.jpg" alt="" />
    /li>
     /ul>
     a href="javascript:void(0);
    " class="btnl">
     /a>
     a href="javascript:void(0);
    " class="btnr">
    >
    /a>
     ul class="tabs">
     li>
    /li>
     li>
    /li>
     li>
    /li>
     li>
    /li>
     li>
    /li>
     li>
    /li>
     /ul>
     /div>
     script type="text/javascript">
     VAR banner = document.getElementsByclassname("banner")[0];
     var slider = document.getElementsByClassName("slider")[0];
     var li = slider.getelementsbytagname("li");
     var btnl = document.getElementsByClassName("btnl")[0];
     var btnr = document.getElementsByClassName("btnr")[0];
     var tabs = document.getElementsByClassName("tabs")[0];
     var btns = tabs.getElementsByTagName("li");
     //初始化 btns[0].style.backgroundColor = "red";
     for(var i = 0;
     i  li.length;
 i++) {
 if(i == 0) {
     continue;
 }
 else {
     li[i].style.opacity = 0;
 }
 }
     var timer = setInterval(mover, 1000);
     //声明一个变量，代表当前图片的下标 var num = 0;
 function mover() {
     num++;
 if(num == li.length) {
     num = 0;
 }
     for(var i = 0;
     i  li.length;
 i++) {
     li[i].style.opacity = 0;
     btns[i].style.backgroundColor = "#ccc";
 }
     li[num].style.opacity = 1;
     btns[num].style.backgroundColor = "red";
 }
 function movel() {
     num--;
 if(num == -1) {
     num = li.length - 1;
 }
     for(var i = 0;
     i  li.length;
 i++) {
     li[i].style.opacity = 0;
     btns[i].style.backgroundColor = "#ccc";
 }
     li[num].style.opacity = 1;
     btns[num].style.backgroundColor = "red";
 }
 banner.onmouseover = function() {
 clearInterval(timer) }
 banner.onmouseout = function() {
 timer = setInterval(mover, 1000) }
 btnl.onclick = function(e) {
     movel();
 }
 btnr.onclick = function(e) {
     mover();
 }
     // 小圆点效果 for(var i = 0;
     i  btns.length;
 i++) {
     btns[i].index = i;
 btns[i].onmouseover = function() {
 if(this.index == num) {
     return;
 }
 else {
     for(var i = 0;
     i  li.length;
 i++) {
     li[i].style.opacity = 0;
     btns[i].style.backgroundColor = "#ccc";
 }
     li[this.index].style.opacity = 1;
     btns[this.index].style.background="red";
     num=this.index;
 }
 }
 }
     /script>
     /body>
    /html>
    

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

• js实现轮播图的完整代码
• 原生js实现轮播图的示例代码
• js实现支持手机滑动切换的轮播图片效果实例
• js实现点击左右按钮轮播图片效果实例
• JS轮播图实现简单代码
• JS实现左右无缝轮播图代码
• JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
• 原生js实现无限循环轮播图效果
• 使用html+js+css 实现页面轮播图效果(实例讲解)
• 基于vue.js轮播组件vue-awesome-swiper实现轮播图

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！