devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

网页特效之轮播图_实现网页中的常见轮播图效果,包含图片列表、控制点列表、左右箭头!

作者：爱喝兽奶帝天荒 | 2024-07-17 10:14:58

赞

踩

实现网页中的常见轮播图效果,包含图片列表、控制点列表、左右箭头!

第一步：静态布局
轮播图组成部分：图片，底部圆点，左右箭头
思路：
整体容器为box盒子,用ul包含七张图片(注意ul宽度需略大于等于七张图片总宽度，第一张和第七张用于替换),使用浮动横向排列;
使用定位布局底部圆点和左右箭头
具体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图案例</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul,ol {
  12.             list-style: none;
  13.         }
  14.         a {
  15.             text-decoration: none;
  16.             color: #fff;
  17.         }
  18.         .box,.box li,.box img {
  19.             width: 600px;
  20.             height: 400px;
  21.         }
  22.         .box {
  23.             margin: 100px auto;
  24.             position: relative;
  25.             overflow: hidden;
  26.         }
  27.         .box .slider {
  28.             width: 700%;
  29.             position: absolute;
  30.             left: -600px;
  31.             top: 0;
  32.         }
  33.         .box ul li {
  34.             float: left;
  35.         }
  36.         .circle {
  37.             position: absolute;
  38.             height: 20px;
  39.             left: 280px;
  40.             bottom: 10px;
  41.         }
  42.         .circle li{
  43.             width: 16px;
  44.             height: 16px;
  45.             background-color: #fff;
  46.             border-radius: 8px;
  47.             line-height: 16px;
  48.             text-align: center;
  49.             margin-left: 5px;
  50.             cursor: pointer;
  51.         }
  52.         .arrow {
  53.             position: absolute;
  54.             top: 50%;
  55.             width: 30px;
  56.             height: 30px;
  57.             background: rgba(0,0,0,.5);
  58.             color: #fff;
  59.             font-size: 24px;
  60.             text-align: center;
  61.             line-height: 30px;
  62.         }
  63.         .arrow:hover {
  64.             background: rgba(0,0,0,.3);
  65.         }
  66.         .prev {
  67.             left: 10px;
  68.         }
  69.         .next {
  70.             right: 10px;
  71.         }
  72.         .circle .current {
  73.             background-color: red;
  74.             color: #fff;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="box">
  80.         <!-- 轮播图片 -->
  81.         <ul id="slider" class="slider">
  82.             <li><img src="images/5.jpg" alt="pitture"></li>
  83.             <li><img src="images/1.jpg" alt="pitture"></li>
  84.             <li><img src="images/2.jpg" alt="pitture"></li>
  85.             <li><img src="images/3.jpg" alt="pitture"></li>
  86.             <li><img src="images/4.jpg" alt="pitture"></li>
  87.             <li><img src="images/5.jpg" alt="pitture"></li>
  88.             <li><img src="images/1.jpg" alt="pitture"></li>
  89.         </ul>
  90.         <!-- 底部小圆点 -->
  91.         <ol id="circle" class="circle">
  92.             <li class="current">1</li>
  93.             <li>2</li>
  94.             <li>3</li>
  95.             <li>4</li>
  96.             <li>5</li>
  97.         </ol>
  98.         <!-- 左右按钮 -->
  99.         <a href="javascript:;" id="prev" class="arrow prev">&lt;</a>
  100.         <a href="javascript:;" id="next" class="arrow next">&gt;</a>
  101.     </div>
  102. </body>
  103. </html>

第二步：给左右小箭头添加滑动(切换)图片效果
动画效果原理参见JavaScript之动画原理
具体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图案例</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul,ol {
  12.             list-style: none;
  13.         }
  14.         a {
  15.             text-decoration: none;
  16.             color: #fff;
  17.         }
  18.         .box,.box li,.box img {
  19.             width: 600px;
  20.             height: 400px;
  21.         }
  22.         .box {
  23.             margin: 100px auto;
  24.             position: relative;
  25.             overflow: hidden;
  26.         }
  27.         .box .slider {
  28.             width: 700%;
  29.             position: absolute;
  30.             /* left: -600px; */
  31.             top: 0;
  32.         }
  33.         .box ul li {
  34.             float: left;
  35.         }
  36.         .circle {
  37.             position: absolute;
  38.             height: 20px;
  39.             left: 280px;
  40.             bottom: 10px;
  41.         }
  42.         .circle li{
  43.             width: 16px;
  44.             height: 16px;
  45.             background-color: #fff;
  46.             border-radius: 8px;
  47.             line-height: 16px;
  48.             text-align: center;
  49.             margin-left: 5px;
  50.             cursor: pointer;
  51.             float: left;
  52.         }
  53.         .arrow {
  54.             position: absolute;
  55.             top: 50%;
  56.             width: 30px;
  57.             height: 30px;
  58.             background: rgba(0,0,0,.5);
  59.             color: #fff;
  60.             font-size: 24px;
  61.             text-align: center;
  62.             line-height: 30px;
  63.         }
  64.         .arrow:hover {
  65.             background: rgba(0,0,0,.3);
  66.         }
  67.         .prev {
  68.             left: 10px;
  69.         }
  70.         .next {
  71.             right: 10px;
  72.         }
  73.         .circle .current {
  74.             background-color: red;
  75.             color: #fff;
  76.         }
  77.     </style>
  78. </head>
  79. <body>
  80.     <div class="box">
  81.         <!-- 轮播图片 -->
  82.         <ul id="slider" class="slider" style="left:-600px;">
  83.             <li><img src="images/5.jpg" alt="pitture"></li>
  84.             <li><img src="images/1.jpg" alt="pitture"></li>
  85.             <li><img src="images/2.jpg" alt="pitture"></li>
  86.             <li><img src="images/3.jpg" alt="pitture"></li>
  87.             <li><img src="images/4.jpg" alt="pitture"></li>
  88.             <li><img src="images/5.jpg" alt="pitture"></li>
  89.             <li><img src="images/1.jpg" alt="pitture"></li>
  90.         </ul>
  91.         <!-- 底部小圆点 -->
  92.         <ol id="circle" class="circle">
  93.             <li class="current">1</li>
  94.             <li>2</li>
  95.             <li>3</li>
  96.             <li>4</li>
  97.             <li>5</li>
  98.         </ol>
  99.         <!-- 左右按钮 -->
  100.         <a href="javascript:;" id="prev" class="arrow prev">&lt;</a>
  101.         <a href="javascript:;" id="next" class="arrow next">&gt;</a>
  102.     </div>
  103. </body>
  104. <script>
  105.     var slider = document.getElementById("slider");
  106.     var circle = document.getElementById("circle");
  107.     var prev = document.getElementById("prev");
  108.     var next = document.getElementById("next");
  109.     var lis = circle.children;//小圆点
  110.     var iNow = 1;//记录当前是第几个小圆点;
  111.  
  112.     //滑动函数
  113.     function animate(obj,offset){//对象，移动距离
  114.         clearInterval(obj.timer);
  115.         var timer = null;//用于存放定时器名称
  116.         var move = 15;//滑动(位移)次数
  117.         var speed = offset/move;//每次位移量，即步长
  118.         var target = slider.offsetLeft + offset;//目标值
  119.         var value = 0;//用于存放差值
  120.         obj.timer = setInterval(function(){
  121.             // console.log(slider.offsetLeft);
  122.             slider.style.left = slider.offsetLeft + speed + "px";
  123.             value = target - slider.offsetLeft;
  124.             if(Math.abs(value) < Math.abs(speed)){
  125.                 //差值小于步长,直接移动差值的数值
  126.                 slider.style.left = slider.offsetLeft + value + "px";
  127.                 // console.log("animate:"+slider.offsetLeft);
  128.                 if(slider.offsetLeft < -3000){//第七张图时跳转到第二张
  129.                     slider.style.left = -600 + "px";
  130.                 }else if(slider.offsetLeft > -600){//第一张图时跳转到第六张
  131.                     slider.style.left = -3000 + "px";
  132.                 }
  133.                 clearInterval(obj.timer);//清空定时器
  134.             }
  135.         },20);
  136.     }
  137.  
  138.     //左右小箭头切换
  139.     prev.onclick = function(){
  140.         animate(slider,600);//整个ul.slider盒子右移
  141.     }
  142.     next.onclick = function(){
  143.         animate(slider,-600);//整个ul.slider盒子左移
  144.     }
  145. </script>
  146. </html>

第三步：添加点击底部小圆点图片切换事件，和当前小圆点背景移动效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图案例</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul,ol {
  12.             list-style: none;
  13.         }
  14.         a {
  15.             text-decoration: none;
  16.             color: #fff;
  17.         }
  18.         .box,.box li,.box img {
  19.             width: 600px;
  20.             height: 400px;
  21.         }
  22.         .box {
  23.             margin: 100px auto;
  24.             position: relative;
  25.             overflow: hidden;
  26.         }
  27.         .box .slider {
  28.             width: 700%;
  29.             position: absolute;
  30.             /* left: -600px; */
  31.             top: 0;
  32.         }
  33.         .box ul li {
  34.             float: left;
  35.         }
  36.         .circle {
  37.             position: absolute;
  38.             height: 20px;
  39.             left: 280px;
  40.             bottom: 10px;
  41.         }
  42.         .circle li{
  43.             width: 16px;
  44.             height: 16px;
  45.             background-color: #fff;
  46.             border-radius: 8px;
  47.             line-height: 16px;
  48.             text-align: center;
  49.             margin-left: 5px;
  50.             cursor: pointer;
  51.             float: left;
  52.         }
  53.         .arrow {
  54.             position: absolute;
  55.             top: 50%;
  56.             width: 30px;
  57.             height: 30px;
  58.             background: rgba(0,0,0,.5);
  59.             color: #fff;
  60.             font-size: 24px;
  61.             text-align: center;
  62.             line-height: 30px;
  63.         }
  64.         .arrow:hover {
  65.             background: rgba(0,0,0,.3);
  66.         }
  67.         .prev {
  68.             left: 10px;
  69.         }
  70.         .next {
  71.             right: 10px;
  72.         }
  73.         .circle .current {
  74.             background-color: red;
  75.             color: #fff;
  76.         }
  77.     </style>
  78. </head>
  79. <body>
  80.     <div class="box">
  81.         <!-- 轮播图片 -->
  82.         <ul id="slider" class="slider" style="left:-600px;">
  83.             <li><img src="images/5.jpg" alt="pitture"></li>
  84.             <li><img src="images/1.jpg" alt="pitture"></li>
  85.             <li><img src="images/2.jpg" alt="pitture"></li>
  86.             <li><img src="images/3.jpg" alt="pitture"></li>
  87.             <li><img src="images/4.jpg" alt="pitture"></li>
  88.             <li><img src="images/5.jpg" alt="pitture"></li>
  89.             <li><img src="images/1.jpg" alt="pitture"></li>
  90.         </ul>
  91.         <!-- 底部小圆点 -->
  92.         <ol id="circle" class="circle">
  93.             <li class="current">1</li>
  94.             <li>2</li>
  95.             <li>3</li>
  96.             <li>4</li>
  97.             <li>5</li>
  98.         </ol>
  99.         <!-- 左右按钮 -->
  100.         <a href="javascript:;" id="prev" class="arrow prev">&lt;</a>
  101.         <a href="javascript:;" id="next" class="arrow next">&gt;</a>
  102.     </div>
  103. </body>
  104. <script>
  105.     var slider = document.getElementById("slider");
  106.     var circle = document.getElementById("circle");
  107.     var prev = document.getElementById("prev");
  108.     var next = document.getElementById("next");
  109.     var lis = circle.children;//小圆点
  110.     var iNow = 1;//记录当前是第几个小圆点;
  111.  
  112.     //滑动函数
  113.     function animate(obj,offset){//对象，移动距离
  114.         clearInterval(obj.timer);
  115.         var timer = null;//用于存放定时器名称
  116.         var move = 15;//滑动(位移)次数
  117.         var speed = offset/move;//每次位移量，即步长
  118.         var target = slider.offsetLeft + offset;//目标值
  119.         var value = 0;//用于存放差值
  120.         obj.timer = setInterval(function(){
  121.             // console.log(slider.offsetLeft);
  122.             slider.style.left = slider.offsetLeft + speed + "px";
  123.             value = target - slider.offsetLeft;
  124.             if(Math.abs(value) < Math.abs(speed)){
  125.                 //差值小于步长,直接移动差值的数值
  126.                 slider.style.left = slider.offsetLeft + value + "px";
  127.                 // console.log("animate:"+slider.offsetLeft);
  128.                 if(slider.offsetLeft < -3000){//第七张图时跳转到第二张
  129.                     slider.style.left = -600 + "px";
  130.                 }else if(slider.offsetLeft > -600){//第一张图时跳转到第六张
  131.                     slider.style.left = -3000 + "px";
  132.                 }
  133.                 clearInterval(obj.timer);//清空定时器
  134.             }
  135.         },20);
  136.     }
  137.  
  138.     //左右小箭头切换
  139.     prev.onclick = function(){
  140.       if(iNow == 1){//当在第一个小圆点slider盒子右移时
  141.         iNow = 5;
  142.       }else{
  143.         iNow--;
  144.       }
  145.       showButton(iNow);
  146.       animate(slider,600);//整个ul.slider盒子右移
  147.     
  148.     }
  149.     next.onclick = function(){
  150.       if(iNow == 5){
  151.         iNow = 1;
  152.       }else{
  153.         iNow++;
  154.       }
  155.       showButton(iNow);
  156.       animate(slider,-600);//整个ul.slider盒子左移
  157.     }
  158.     // 点击小圆点切换图片
  159.     for(var i=0;i<lis.length;i++){
  160.       lis[i].index = i+1;//赋予每个小圆点对应的索引值(从1~5)
  161.       lis[i].onclick = function(){
  162.         if(this.className == "current"){
  163.           return;//点击当前图片对应的小圆点无效
  164.         }
  165.         var offset = (iNow - this.index)*600;//通过当前小圆点的小圆点和鼠标经过的索引差值，得到移动距离,注意图片向右切换则slider盒子左移，反之同理；
  166.         animate(slider,offset);
  167.         iNow = this.index;//把鼠标经过的小圆点的索引赋给iNow
  168.         showButton(iNow);
  169.       }
  170.     }
  171.     //当前小圆点背景移动
  172.     function showButton(index){
  173.       for(var j=0;j<lis.length;j++){
  174.         lis[j].className = "";
  175.       }
  176.       lis[index-1].className = "current";//因为lis是伪数组，索引从0开始
  177.     }
  178. </script>
  179. </html>

第四步：添加鼠标经过轮播容器左右小箭头出现，鼠标离开隐藏效果
ccs部分添加：

.arrow {display:none;}


js部分添加：

  1. //左右小箭头淡入淡出
  2. box.onmouseover = function(){
  3.     prev.style.display = "block";
  4.     next.style.display = "block";
  5. }
  6. box.onmouseout = function(){
  7.     prev.style.display = "none";
  8.     next.style.display = "none";
  9. }

第五步：添加自动轮播和鼠标经过停止轮播，离开继续轮播效果
最终代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图案例</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul,ol {
  12.             list-style: none;
  13.         }
  14.         a {
  15.             text-decoration: none;
  16.             color: #fff;
  17.         }
  18.         .box,.box li,.box img {
  19.             width: 600px;
  20.             height: 400px;
  21.         }
  22.         .box {
  23.             margin: 100px auto;
  24.             position: relative;
  25.             overflow: hidden;
  26.         }
  27.         .box .slider {
  28.             width: 700%;
  29.             position: absolute;
  30.             /* left: -600px; */
  31.             top: 0;
  32.         }
  33.         .box ul li {
  34.             float: left;
  35.         }
  36.         .circle {
  37.             position: absolute;
  38.             height: 20px;
  39.             left: 280px;
  40.             bottom: 10px;
  41.         }
  42.         .circle li{
  43.             width: 16px;
  44.             height: 16px;
  45.             background-color: #fff;
  46.             border-radius: 8px;
  47.             line-height: 16px;
  48.             text-align: center;
  49.             margin-left: 5px;
  50.             cursor: pointer;
  51.             float: left;
  52.         }
  53.         .arrow {
  54.             position: absolute;
  55.             top: 50%;
  56.             width: 30px;
  57.             height: 30px;
  58.             background: rgba(0,0,0,.5);
  59.             color: #fff;
  60.             font-size: 24px;
  61.             text-align: center;
  62.             line-height: 30px;
  63.             display: none;
  64.         }
  65.         .arrow:hover {
  66.             background: rgba(0,0,0,.3);
  67.         }
  68.         .prev {
  69.             left: 10px;
  70.         }
  71.         .next {
  72.             right: 10px;
  73.         }
  74.         .circle .current {
  75.             background-color: red;
  76.             color: #fff;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <div class="box">
  82.         <!-- 轮播图片 -->
  83.         <ul id="slider" class="slider" style="left:-600px;">
  84.             <li><img src="images/5.jpg" alt="pitture"></li>
  85.             <li><img src="images/1.jpg" alt="pitture"></li>
  86.             <li><img src="images/2.jpg" alt="pitture"></li>
  87.             <li><img src="images/3.jpg" alt="pitture"></li>
  88.             <li><img src="images/4.jpg" alt="pitture"></li>
  89.             <li><img src="images/5.jpg" alt="pitture"></li>
  90.             <li><img src="images/1.jpg" alt="pitture"></li>
  91.         </ul>
  92.         <!-- 底部小圆点 -->
  93.         <ol id="circle" class="circle">
  94.             <li class="current">1</li>
  95.             <li>2</li>
  96.             <li>3</li>
  97.             <li>4</li>
  98.             <li>5</li>
  99.         </ol>
  100.         <!-- 左右按钮 -->
  101.         <a href="javascript:;" id="prev" class="arrow prev">&lt;</a>
  102.         <a href="javascript:;" id="next" class="arrow next">&gt;</a>
  103.     </div>
  104. </body>
  105. <script>
  106.     var slider = document.getElementById("slider");
  107.     var box = slider.parentNode;//整个轮播容器
  108.     var circle = document.getElementById("circle");
  109.     var prev = document.getElementById("prev");
  110.     var next = document.getElementById("next");
  111.     var lis = circle.children;//小圆点
  112.     var iNow = 1;//记录当前是第几个小圆点;
  113.     var timerTwo = null;//用于存放定时器（自动轮播)名称
  114.  
  115.     //滑动函数
  116.     function animate(obj,offset){//对象，移动距离
  117.         clearInterval(obj.timer);
  118.         var timer = null;//用于存放定时器名称
  119.         var move = 15;//滑动(位移)次数
  120.         var speed = offset/move;//每次位移量，即步长
  121.         var target = slider.offsetLeft + offset;//目标值
  122.         var value = 0;//用于存放差值
  123.         obj.timer = setInterval(function(){
  124.             // console.log(slider.offsetLeft);
  125.             slider.style.left = slider.offsetLeft + speed + "px";
  126.             value = target - slider.offsetLeft;
  127.             if(Math.abs(value) < Math.abs(speed)){
  128.                 //差值小于步长,直接移动差值的数值
  129.                 slider.style.left = slider.offsetLeft + value + "px";
  130.                 // console.log("animate:"+slider.offsetLeft);
  131.                 if(slider.offsetLeft < -3000){//第七张图时跳转到第二张
  132.                     slider.style.left = -600 + "px";
  133.                 }else if(slider.offsetLeft > -600){//第一张图时跳转到第六张
  134.                     slider.style.left = -3000 + "px";
  135.                 }
  136.                 clearInterval(obj.timer);//清空定时器
  137.             }
  138.         },20);
  139.     }
  140.  
  141.     //左右小箭头切换
  142.     prev.onclick = function(){
  143.       if(iNow == 1){//当在第一个小圆点slider盒子右移时
  144.         iNow = 5;
  145.       }else{
  146.         iNow--;
  147.       }
  148.       showButton(iNow);
  149.       animate(slider,600);//整个ul.slider盒子右移
  150.  
  151.     }
  152.     next.onclick = function(){
  153.       if(iNow == 5){
  154.         iNow = 1;
  155.       }else{
  156.         iNow++;
  157.       }
  158.       showButton(iNow);
  159.       animate(slider,-600);//整个ul.slider盒子左移
  160.     }
  161.     // 点击小圆点切换图片
  162.     for(var i=0;i<lis.length;i++){
  163.       lis[i].index = i+1;//赋予每个小圆点对应的索引值(从1~5)
  164.       lis[i].onclick = function(){
  165.         if(this.className == "current"){
  166.           return;//点击当前图片对应的小圆点无效
  167.         }
  168.         var offset = (iNow - this.index)*600;//通过当前小圆点的小圆点和鼠标经过的索引差值，得到移动距离,注意图片向右切换则slider盒子左移，反之同理；
  169.         animate(slider,offset);
  170.         iNow = this.index;//把鼠标经过的小圆点的索引赋给iNow
  171.         showButton(iNow);
  172.       }
  173.     }
  174.     //当前小圆点背景移动
  175.     function showButton(index){
  176.       for(var j=0;j<lis.length;j++){
  177.         lis[j].className = "";
  178.       }
  179.       lis[index-1].className = "current";//因为lis是伪数组，索引从0开始
  180.     }
  181.  
  182. //左右小箭头淡入淡出
  183. box.onmouseover = function(){
  184.     prev.style.display = "block";
  185.     next.style.display = "block";
  186.     stopPlay();
  187. }
  188. box.onmouseout = function(){
  189.     prev.style.display = "none";
  190.     next.style.display = "none";
  191.     autoPlay();
  192. }
  193.  
  194. //自动轮播
  195. function autoPlay(){
  196.     timerTwo = setInterval(function(){
  197.         next.onclick();//每3秒执行一次点击右箭头效果
  198.     },3000);
  199. }
  200. function stopPlay(){
  201.     clearInterval(timerTwo);
  202. }
  203. autoPlay();//默认执行自动轮播
  204. </script>
  205. </html>

具体效果可见：轮播图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/839363
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号