JavaScript实现大图轮播效果

2024-05-06 16:34:31

字体：大中小

来源：转载

供稿：网友

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

<head>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>大图轮播</title>    <style type="text/css">      * {        margin: 0px;        padding: 0px;      }            #container {        width: 500px;        height: 300px;        /*border: 1px solid black;*/        position: relative;        overflow: hidden;      }            .btn {        height: 100%;        width: 30px;        /*border: 1px solid red;*/        position: absolute;        text-align: center;        line-height: 300px;        font-size: 40px;        font-weight: 900;        color: black;        opacity: 0.3;        transition: 0.6s;        z-index: 999;        background-color: white;      }            .btn:hover {        cursor: pointer;        opacity: 0.8;      }            #left-btn {        left: 0px;        top: 0px;      }            #right-btn {        right: 0px;        top: 0px;      }            #ad-container {        width: 2500px;        height: 300px;        /*border: 1px solid blue;*/        position: relative;      }            .ad {        width: 500px;        height: 300px;        float: left;        text-align: center;        line-height: 300px;        font-size: 100px;        font-family: "微软雅黑";      }    </style>  </head>  <body>    <div id="container">      <div id="left-btn" class="btn">        <</div>          <div id="right-btn" class="btn">></div>          <div id="ad-container">            <div class="ad" style="background-color: mediumpurple;">1</div>            <div class="ad" style="background-color: yellowgreen;">2</div>            <div class="ad" style="background-color: rosybrown;">3</div>            <div class="ad" style="background-color: salmon;">4</div>            <div class="ad" style="background-color: cyan;">5</div>          </div>      </div>  </body></html><script type="text/javascript">  var rightBtn = document.getElementById("right-btn");  var leftBtn = document.getElementById("left-btn");  var n = 1;/*  var count = 1*/;  var arr = new Array();/*  var m=1;*/  rightBtn.onclick = function() {    var x = window.setInterval("to_right()", 20);    arr.push(x);  }  function clear() {    for(var i in arr) {      window.clearInterval(arr[i]);    }  }  function to_right() {    var adContainer = document.getElementById("ad-container");    if(n == 5) {      clear();    } else if(adContainer.offsetLeft != n * (-500)) {      adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";    } else {      n++;      clear();    }  }  var arr1 = new Array();  leftBtn.onclick = function() {    var y = window.setInterval("to_left()", 20);    arr1.push(y);  }  function clear2() {    for(var y in arr1) {      window.clearInterval(arr1[y]);    }  }  function to_left() {    var adContainer = document.getElementById("ad-container");    if(n == 1) {      clear2();    } else if(adContainer.offsetLeft != (n-2) * (-500)) {      adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";    } else {      n--;      clear2();    }  }  </script>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：canvas 弹幕效果（实例分享）

下一篇：bootstrap按钮插件（Button）使用方法解析