html轮播器代码_怎么样才能原生手写一个轮播图——渐隐渐显版

<div>
<p></p>
<div style="text-align:center;">
  <img alt="0df1933d66ee9697e9260ab39b361745.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a06c3c71742824401713cec9d1b42a34.png">
</div>
<p>今天我们自己手写一个渐隐渐显版的轮播图，先上效果图 </p>
<p></p>
<div style="text-align:center;">
  <img alt="f3b15ba3e48f307c315b23efaef01130.gif" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e3c09f59fedd77b703fa40798bc3baa2.gif">
</div>
<p>由于文件太大，只能压缩成这样给大家看了 </p>
<h2>一、需求</h2>
<blockquote>
  1、实现渐隐渐显自动轮播效果；
  <br>
</blockquote>
<p>就如上面效果图一样；</p>
<blockquote>
  2、鼠标划上：
</blockquote>
<ul><li>显示左右切换箭头</li><li>停止自动轮播；</li></ul>
<p></p>
<p></p>
<div style="text-align:center;">
  <img alt="e63de44820db224b9aa6cb3a6cbe69da.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3f6a2adbd2c5898a36544b19a4a9e340.png">
</div>
<blockquote>
  3、鼠标离开:
</blockquote>
<ul><li>隐藏左右切换箭头</li><li>继续自动轮播；</li></ul>
<p></p>
<p>与效果图一致</p>
<blockquote>
  4、点击左右箭头实现上下切换图片
  <br>
</blockquote>
<p>如图： </p>
<p></p>
<div style="text-align:center;">
  <img alt="4f72679238f8d24e8b7eb55f2bca054c.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-bda6358315e9433dd22001c1f38e6422.png">
</div>
<blockquote>
  5、点击分页器跳转相应图片
  <br>
</blockquote>
<p>点击分页器可显示图片</p>
<p></p>
<div style="text-align:center;">
  <img alt="471252a8e8eb3cb32283e303f818efcb.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-6915270ceb72395721915b5b3632b7f2.png">
</div>
<p>好了现在需求已经提完了，开始我们表演的时候到了</p>
<p></p>
<div style="text-align:center;">
  <img alt="baee9ac3c7fdd9aed7efafa7aaf066e5.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9e3edbc273c13ac38b5edc03a309e8c3.png">
</div>
<h2>二、代码实现</h2>
<h2>HTML</h2>
<p>结构中我们需要：</p>
<ul><li>图片容器
<ul><li>这里小芝麻放了6张图片着实有点多，但看见哪一张都舍不得删所以看着有些乱；</li><li>小伙伴们可根据自己的需求调整</li></ul></li><li>分页器容器</li><li>左右按钮容器</li></ul>
<div class="blockcode">
  <pre class="blockcode"><code><!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>金色小芝麻—渐隐渐显版轮播图-原生</title>

<link rel="stylesheet" href="css/index.css">
</head>

<body>

<div class="container">
      
      <div class="wrapper">
         
         <div class="slider">
            <img src="images/banner1.jpg" alt="">
         </div>
         <div class="slider">
            <img src="images/banner2.jpg" alt="">
         </div>
         <div class="slider">
            <img src="images/banner3.jpeg" alt="">
         </div>
         <div class="slider">
            <img src="images/banner4.jpeg" alt="">
         </div>
         <div class="slider">
            <img src="images/banner5.jpeg" alt="">
         </div>
         <div class="slider">
            <img src="images/banner6.jpg" alt="">
         </div>
      </div>

      
      <ul class="pagination">
         <li class="active"></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>

      
      <a href="javascript:;" class="arrow changeLeft"></a>
      <a href="javascript:;" class="arrow changeRight"></a>
</div>


<script src="js/index.js"></script>
</body>

</html></code></pre>
</div>
<p> 现在是这样的： </p>
<p></p>
<div style="text-align:center;">
  <img alt="785ba29c081f4bd124b99f32c9f710e3.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-875e697387c93373d0325ff38df80aa9.png">
</div>
<p> 接下来我们开始调整样式</p>
<h2>CSS</h2>
<p>样式这里小伙伴们可根据自己的需求和审美尽情的创作 </p>
<div class="blockcode">
  <pre class="blockcode"><code>.container {
position: relative;
margin: 50px auto;
width: 800px;
height: 400px;
overflow: hidden;
}

.container .wra

html轮播器代码_怎么样才能原生手写一个轮播图——渐隐渐显版

浏览过的版块