乘风原创程序

  • Javascript幻灯片播放功能实现过程解析
  • 2020/5/13 14:15:26
  • javascript实现幻灯片播放

    实现原理

    • step1 设置容器,包含图片、翻页、下标等元素,通过相对定位来布局。
    • step2 将幻灯片变化,需要改变的元素放在一个字容器内,display设为none,并且采取动画来变化。
    • step3设置js函数,将应该播放的元素样式激活,其他的元素仍为未激活状态或者不展示类的隐藏。

    代码

    html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>insert title here</title>
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="style.css" rel="external nofollow" type="text/css">
    
    </head>
    <body>
    	<!-- 先设置轮播的整体容器 -->
    	<div class="slideshow-container">
    		<!-- 在设置轮播图片、翻页键、数字文本的容器 -->
    		<!-- fade为滑动动画特效 -->
    		<div class="myslides fade">
    			<div class="numbertext">1 / 3</div>
    			<img src="img/1.jpg" style="width: 100%">
    			<div class="text">文本 1</div>
    		</div>
    
    		<div class="myslides fade">
    			<div class="numbertext">2 / 3</div>
    			<img src="img/2.jpg" style="width: 100%">
    			<div class="text">文本 2</div>
    		</div>
    
    		<div class="myslides fade">
    			<div class="numbertext">3 / 3</div>
    			<img src="img/3.jpg" style="width: 100%">
    			<div class="text">文本 3</div>
    		</div>
    		
    		<a class="prev" onclick="plusslides(-1)">❮</a> 
    		<a class="next" onclick="plusslides(1)">❯</a>
    	</div>
    	<br>
    	<!-- 设置下方按钮 -->
    	<div style="text-align: center">
    		<span class="dot" onclick="currentslide(1)"></span>
    		<span class="dot" onclick="currentslide(2)"></span>
    		<span class="dot" onclick="currentslide(3)"></span>
    	</div>
      <!-- 引入js文件,注意js文件应该在下方,否则将无法出现错误,个人觉得错误原因应该是元素未加载而去执行js文件导致错误,具体原因还需探究-->
    	<script src="show.js" type="text/javascript"></script>
    </body>
    
    </html>

    css

    @charset "utf-8";
    * {box-sizing:border-box}
    body {font-family: verdana,sans-serif;}
    .myslides {
    	display:none;
      /*display 为none的含义是不展示元素,但是且不占用空间*/
    }
    /* 幻灯片容器 */
    .slideshow-container {
     max-width: 1000px;
     position: relative;
     margin: auto;
    }
    
    /* 下一张 & 上一张 按钮 */
    .prev, .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     margin-top: -22px;
     padding: 16px;
     color: white;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
    }
    
    /* 定位 "下一张" 按钮靠右 */
    .next {
     right: 0;
     border-radius: 3px 0 0 3px;
    }
    
    /* on hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
     background-color: rgba(0,0,0,0.8);
    }
    
    /* 标题文本 */
    .text {
     color: #f2f2f2;
     font-size: 15px;
     padding: 8px 12px;
     position: absolute;
     bottom: 8px;
     width: 100%;
     text-align: center;
    }
    
    /* 数字文本 (1/3 等) */
    .numbertext {
     color: #f2f2f2;
     font-size: 12px;
     padding: 8px 12px;
     position: absolute;
     top: 0;
    }
    
    /* 标记符号 */
    .dot {
     cursor:pointer;
     height: 13px;
     width: 13px;
     margin: 0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;
    }
    
    .active, .dot:hover {
     background-color: #717171;
    }
    
    /* 淡出动画 */
    .fade {
     -webkit-animation-name: fade;
     -webkit-animation-duration: 1.5s;
     animation-name: fade;
     animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
     from {opacity: .4} 
     to {opacity: 1}
    }
    
    @keyframes fade {
     from {opacity: .4} 
     to {opacity: 1}
    }

    js

    var slideindex = 1;
    
    function plusslides(n) {
     showslides(slideindex += n);
    }
    
    function currentslide(n) {
     showslides(slideindex = n);
    }
    
    function showslides(n) {
     var i;
     var slides = document.getelementsbyclassname("myslides");
     var dots = document.getelementsbyclassname("dot");
     if (n > slides.length) {slideindex = 1} 
     if (n < 1) {slideindex = slides.length}
     for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
     }//class为myslides下的元素,即不展示项目的图片元素、数字元素和文本元素
     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";//轮播图片对应下标样式激活
    }
    showslides(slideindex);