JavaScript |创建自定义图像滑块-yiteyi-C++库

什么是图像滑块？

null

图像滑块 或 图像传送带 是一种在网站上显示多张图片的便捷方式。吸引人的浮华图片可以吸引很多访问者。下图显示了一个示例图像滑块：图片[1]-JavaScript |创建自定义图像滑块-yiteyi-C++库

在本文中，我们将使用HTML、CSS和JavaScript创建上面的图像滑块。让我们从创建图像滑块开始。

第1步 ：使用HTML创建图像滑块的结构，并插入来自各个源的图像。下面是完成此操作的完整HTML代码：

                       <!--HTML Code-->                     
                       <!-- Slideshow Container Div -->                     
                       <                                  div                                  class                                  =                                  "container"                                  >                     
                                
                                             <!-- Full-width images with caption text -->                     
                                             <                                  div                                  class                                  =                                  "image-sliderfade fade"                                  >                     
                                             <                                  img                                  src                                  =                                  "img1.jpg"                                  style                                  =                                  "width:100%"                                  >                     
                                             <                                  div                                  class                                  =                                  "text"                                  >Image caption 1</                                  div                                  >                     
                                             </                                  div                                  >                     
                                
                                             <                                  div                                  class                                  =                                  "image-sliderfade fade"                                  >                     
                                             <                                  img                                  src                                  =                                  "img2.jpg"                                  style                                  =                                  "width:100%"                                  >                     
                                             <                                  div                                  class                                  =                                  "text"                                  >Image caption 2</                                  div                                  >                     
                                             </                                  div                                  >                     
                                
                                             <                                  div                                  class                                  =                                  "image-sliderfade fade"                                  >                     
                                             <                                  img                                  src                                  =                                  "img3.jpg"                                  style                                  =                                  "width:100%"                                  >                     
                                             <                                  div                                  class                                  =                                  "text"                                  >Image caption 3</                                  div                                  >                     
                                             </                                  div                                  >                     
                                
                                             <                                  div                                  class                                  =                                  "image-sliderfade fade"                                  >                     
                                             <                                  img                                  src                                  =                                  "img3.jpg"                                  style                                  =                                  "width:100%"                                  >                     
                                             <                                  div                                  class                                  =                                  "text"                                  >Image caption 4</                                  div                                  >                     
                                             </                                  div                                  >                     
                                
                       </                                  div                                  >                     
                       <                                  br                                  >                     
                                
                       <!-- The dots/circles -->                     
                       <                                  div                                  style                                  =                                  "text-align:center"                                  >                     
                                             <                                  span                                  class                                  =                                  "dot"                                  ></                                  span                                  >                     
                                             <                                  span                                  class                                  =                                  "dot"                                  ></                                  span                                  >                     
                                             <                                  span                                  class                                  =                                  "dot"                                  ></                                  span                                  >                     
                       </                                  div                                  >                     

第2步 ：为图像滑块创建HTML结构后，下一步是使用CSS设置滑块样式。我们将为图像、背景等添加样式。我们还将为点设置样式，并使用CSS使图像具有响应性和浏览器友好性。下面是用于设置图像滑块样式的完整CSS代码：

                       // CSS                                  code                     
                       *                     
                       {                     
                                             box-sizing: border-box;                     
                       }                     
                       body                     
                       {                     
                                             font-family                                  :                                  Verdana                                  ,                                  sans-serif                                  ;                     
                       }                     
                                
                       .image-sliderfade                     
                       {                     
                                             display                                  :                                  none                                  ;                     
                       }                     
                                
                       img                     
                       {                     
                                             vertical-align                                  :                                  middle                                  ;                     
                       }                     
                                
                       /* Slideshow container */                     
                       .container                     
                       {                     
                                             max-width                                  :                                  1000px                                  ;                     
                                             position                                  :                                  relative                                  ;                     
                                             margin                                  :                                  auto                                  ;                     
                       }                     
                                
                       /* Caption text */                     
                       .text                     
                       {                     
                                             color                                  :                                  #f2f2f2                                  ;                     
                                             font-size                                  :                                  15px                                  ;                     
                                             padding                                  :                                  20px                                  15px                                  ;                     
                                             position                                  :                                  absolute                                  ;                     
                                             right                                  :                                  10px                                  ;                     
                                             bottom                                  :                                  10px                                  ;                     
                                             width                                  :                                  40%                                  ;                     
                                             background                                  : rgba(                                  0                                  ,                                  0                                  ,                                  0                                  , .                                  7                                  );                     
                                             text-align                                  :                                  left                                  ;                     
                       }                     
                                
                       /* The dots/bullets/indicators */                     
                       .dot                     
                       {                     
                                             height                                  :                                  15px                                  ;                     
                                             width                                  :                                  15px                                  ;                     
                                             margin                                  :                                  0                                  2px                                  ;                     
                                             background-color                                  :                                  transparent                                  ;                     
                                             border-color                                  :                                  #ddd                                  ;                     
                                             border-width                                  :                                  5                                  px;                     
                                             border-style                                  :                                  solid                                  ;                     
                                             border-radius:                                  50%                                  ;                     
                                             display                                  : inline-                                  block                                  ;                     
                                             transition: border-color                                  0.6                                  s ease;                     
                       }                     
                                
                       .active                     
                       {                     
                                             border-color                                  :                                  #666                                  ;                     
                       }                     
                                
                       /* Animation */                     
                       .fade                     
                       {                     
                                             -webkit-animation-name: fade-image;                     
                                             -webkit-animation-duration:                                  1.5                                  s;                     
                                             animation-name: fade-image;                     
                                             animation-duration:                                  1.5                                  s;                     
                       }                     
                                
                       @-webkit-keyframes fade-image                     
                       {                     
                                             from {opacity: .                                  4                                  }                     
                                             to {opacity:                                  1                                  }                     
                       }                     
                                
                       @keyframes fade-image                     
                       {                     
                                             from {opacity: .                                  4                                  }                     
                                             to {opacity:                                  1                                  }                     
                       }                     
                                
                       /* On smaller screens, decrease text size */                     
                       @media only                                  screen                                  and (                                  max-width                                  :                                  300px                                  )                     
                       {                     
                                             .text {                                  font-size                                  :                                  11px                                  }                     
                       }                     

第3步 ：将样式添加到滑块后，剩下的最后一件事是使用javascript添加在特定时间间隔后自动更改图像的功能。在下面的代码片段中，从一开始，我们将所有类名为“image sliderfade”的div元素放入一个数组中，并使用getElementByClassName（）listener对类名为“dots”的div元素执行相同的操作。之后，我们为所有包含图像的div设置显示。在最后一个for循环中，我们删除了数组dots[]中每个元素的类名。完成这些操作后，我们将显示设置为要显示的图像块，并将类名附加到dots[]数组的相应元素。函数setTimeout用于每隔2秒调用函数showslides（）。

下面是完整的JavaScript代码：

                       var                                  slideIndex = 0;                     
                       showSlides();                                  // call showslide method                     
                                
                       function                                  showSlides()                     
                       {                     
                                             var                                  i;                     
                                
                                             // get the array of divs' with classname image-sliderfade                     
                                             var                                  slides = document.getElementsByClassName(                                  "image-sliderfade"                                  );                     
                                
                                             // get the array of divs' with classname dot                     
                                             var                                  dots = document.getElementsByClassName(                                  "dot"                                  );                     
                                
                                             for                                  (i = 0; i < slides.length; i++) {                     
                                             // initially set the display to                     
                                             // none for every image.                     
                                             slides[i].style.display =                                  "none"                                  ;                     
                                             }                     
                                
                                             // increase by 1, Global variable                     
                                             slideIndex++;                     
                                
                                             // check for boundary                     
                                             if                                  (slideIndex > slides.length)                     
                                             {                     
                                             slideIndex = 1;                     
                                             }                     
                                
                                             for                                  (i = 0; i < dots.length; i++) {                     
                                             dots[i].className = dots[i].className.                     
                                             replace(                                  " active"                                  ,                                  ""                                  );                     
                                             }                     
                                
                                             slides[slideIndex - 1].style.display =                                  "block"                                  ;                     
                                             dots[slideIndex - 1].className +=                                  " active"                                  ;                     
                                
                                             // Change image every 2 seconds                     
                                             setTimeout(showSlides, 2000);                     
                       }                     

完成上述所有步骤后，我们将向上滑动并按如下所示工作：图片[1]-JavaScript |创建自定义图像滑块-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END