An example of simply realizing the effect of carousel

2021-07-04 17:47:00
OfStack

1. Key points:

1. When the page is loaded, the pictures overlap and stack on 1 [absolute positioning];

2. The first one shows, while others are hidden;

3. Set the subscript, set the color for the subscript to move with the picture;

4. Move the mouse to the picture, display the left and right moving icons, move the mouse away, and continue the carousel;

2. Implementation code:

html code:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title> Carousel chart </title>
  <link href="css/LunBimg.css" rel="stylesheet" />
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/LunBimg.js"></script>
</head>
<body>
  <div id="allswapImg">
    <div class="swapImg"><img src="image/1.jpg" /></div>
    <div class="swapImg"><img src="image/2.jpg" /></div>
    <div class="swapImg"><img src="image/3.jpg" /></div>
    <div class="swapImg"><img src="image/4.jpg" /></div>
    <div class="swapImg"><img src="image/5.jpg" /></div>
    <div class="swapImg"><img src="image/6.jpg" /></div>
  </div>
  <div class="btn btnLeft"><</div>
  <div class="btn btnRight">></div>
  <div id="tabs">
    <div class="tab bg">1</div>
    <div class="tab">2</div>
    <div class="tab">3</div>
    <div class="tab">4</div>
    <div class="tab">5</div>
    <div class="tab">6</div>
  </div>
</body>
</html>

css code:


* {
 padding:0px;
 margin:0px;
}

.swapImg {
  position:absolute;
  
}
.btn {
  position:absolute;
  height:90px;
  width:60px;
  background:rgba(0,0,0,0.5);/* Set the background color to black and the transparency to 50%*/
  color:#ffffff;
  text-align:center;
  line-height:90px;
  font-size:40px;
  top:155px;/* Picture height 400/2-45*/
  cursor:pointer;
  /*display:none;*/
}

.btnRight {
  left:840px;/* Picture width 900- Navigation width 60*/
}
#tabs {
  position:absolute;
  top:370px;
  margin-left:350px;
}
.tab {
  height:20px;
  width:20px;
  background:#05e9e2;
  line-height:20px;
  text-align:center;
  font-size:10px;
  float:left;
  color:#ffffff;
  margin-right:10px;
  border-radius:100%;
  cursor:pointer;
}
.bg {
  background:#00ff21;
}

js code:


/// <reference path="_references.js" />

var i = 0;// Global variable 
// Definition 1 A variable is used to obtain the process of carousel 
var time;
$(function ()
{
  //1. After the page is loaded , Find Class Equal to swapImg The first part of 1 Object, so that it is displayed, and its sibling element is hidden 
  $(".swapImg").eq(0).show().siblings().hide();
  showTime();
  // When the mouse is placed on the subscript to display the picture, the mouse is removed to continue the carousel 
  $(".tab").hover(
    function ()
    {
      // Gets the index of the subscript where the current mouse is located 
      i = $(this).index();
      show();
      // After the mouse is put up, how to stop it? The process of getting variables, clearing carousel and passing variables in 
      clearInterval(time);
    }, function ()
    {
      showTime();
    });

  // Requirements 4 When I click Left and Right Switch 
  $(".btnLeft").click(function ()
  {
    //1. Stop carousel before clicking 
    clearInterval(time);
    // After ordering, -1
    if (i == 0)
    {
      i =6;
    }
    i--;
    show();
    showTime();
  });
  $(".btnRight").click(function () {
    //1. Stop carousel before clicking 
    clearInterval(time);
    // After ordering, -1
    if (i == 5) {
      i = -1;
    }
    i++;
    show();
    showTime();
  });
  

});

function show() {
  //$("#allswapImg").hover(function ()
  //{
  //  $(".btn").show();
  //}, function ()
  //{
  //  $(".btn").hide();
  //});
  //fadeIn(300) Fade in, fadeout(300) Fade-out, filter time 0.3s
  $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
  $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}

function showTime()
{
  time = setInterval(function () {
    i++;
    if (i == 6) {
      // Only 6 A picture, so i Can't exceed 6 , if i Equal to 6 When, we make it equal to the first 1 Zhang 
      i = 0;
    }
    show();
  }, 3000);
}