jquery realizes fade in and fade out carousel effect

2021-10-13 06:19:08
OfStack

In this paper, we share the specific code of jquery to realize fade-in and fade-out carousel diagram for your reference. The specific contents are as follows

As described in the title, go directly to the code


<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 * {
 padding: 0px;
 margin: 0px;
 }

 /*  Box  */
 .box {
 position: relative;
 }

 /* banner Figure  */
 .box,
 .banner {
 width: 1000px;
 height: 500px;
 margin: 50px auto;
 }

 .box .banner {
 position: relative;
 list-style: none;
 }

 .banner li {
 display: none;
 }

 .box ul li img {
 position: absolute;
 }

 .banner .b1 {
 display: block;
 }

 span {
 background: rgb(0, 0, 0, 0.5);
 width: 40px;
 height: 50px;
 display: block;
 position: absolute;
 left: 0px;
 top: 50%;
 z-index: 3;
 line-height: 50px;
 text-align: center;
 cursor: pointer;
 font-family: " Song Style ";
 font-size: 20px;
 color: white;
 }

 .right {
 left: auto;
 right: 0px;
 }

 .bottom {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 list-style: none;
 }

 .bottom li {

 width: 10px;
 height: 10px;
 background: rgb(255, 255, 255);
 float: left;
 border-radius: 50%;
 margin: 0px 5px;
 /*  Ghost  */
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 cursor: pointer;
 }

 .bottom .on {
 background: rgb(255, 153, 0);
 }
</style>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<body>
 <div class="box">
 <!--  Carousel chart  -->
 <ul class="banner">
  <li class="b1">
  <img src="../img/timg.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg1.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg2.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg3.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg4.jpg" alt="">
  </li>
 </ul>
 <!--  Switch left and right  -->
 <span class="left">
  < </span> <span class="right">&gt;
 </span>
 <!--  Bottom button  -->
 <ol class="bottom">
  <li class="on"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 </div>
</body>
<script>
 var $box = $(".box");
 var $bli = $(".box ul li");
 var $bleft = $(".box .left");
 var $bright = $(".box .right");
 var $dot = $(".box .bottom li");
 var timer = null;
 var num = 0;
 //  Because a few lines of code 1 Sample   So code encapsulation 
 function play() {
 num = num % $bli.length;
 $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
 $dot.eq(num).addClass("on").siblings().removeClass("on");
 }

 function autoplay() {
 timer = setInterval(function () {
  num++;
  play();
 }, 2000);
 };
 autoplay();
 //  When the mouse is put up,   Timer stop   Timer works when removed 
 // $box.hover(function() {
 // clearInterval(timer); 
 // },function() {
 // autoplay(); 
 // });
 //  The following is the same effect   Another 1 Kinds of writing 
 $box.mouseover(function () {
 clearInterval(timer);
 });
 $box.mouseout(function () {
 autoplay();
 });
 $bleft.click(function () {
 num--;
 play();
 });
 $bright.click(function () {
 num++;
 play();
 });
 $dot.click(function (event) {
 var index = $(this).index();
 num = index;
 $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
 $dot.eq(num).addClass("on").siblings().removeClass();
 });
</script>

</html>

In fact, the core idea of fade-in and fade-out carousel is to get the current index, find out the index of pictures according to the index, and then change the index to 1 picture, show that other pictures disappear and then take turns to alternate. The main core idea in sibinling () above is to let the current element fade in but let other elements fade out, so the effect is formed by taking turns one by one.

For more wonderful articles about carousel, please click on "jquery Picture Carousel" to learn