SoFunction
Updated on 2025-03-06

JavaScript realizes large-picture carousel effect

This article has shared the specific code of the js picture carousel effect for your reference. The specific content is as follows

<head>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Large picture carousel</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: "Microsoft Yahei";
   }
  </style>
 </head>

 <body>
  <div >
   <div  class="btn">
    <</div>
     <div  class="btn">></div>
     <div >
      <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 = ("right-btn");
 var leftBtn = ("left-btn");
 var n = 1;
/* var count = 1*/;
 var arr = new Array();
/* var m=1;
*/  = function() {
  var x = ("to_right()", 20);
  (x);
 }

 function clear() {
  for(var i in arr) {
   (arr[i]);
  }
 }

 function to_right() {

  var adContainer = ("ad-container");
  if(n == 5) {
   clear();
  } else if( != n * (-500)) {
    =  - 25 + "px";
  } else {
   n++;
   clear();
  }
 }
 var arr1 = new Array();

  = function() {
  var y = ("to_left()", 20);
  (y);
 }

 function clear2() {
  for(var y in arr1) {
   (arr1[y]);
  }
 }

 function to_left() {

  var adContainer = ("ad-container");
  if(n == 1) {
   clear2();
  } else if( != (n-2) * (-500)) {
    =  + 25 + "px";
  } else {
   n--;
   clear2();
  }
 }

 
</script>

Wonderful topic sharing:jQuery picture carousel JavaScript picture carousel

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.