耀极客论坛

 找回密码
 立即注册
查看: 731|回复: 0

JavaScript实现六种网页图片轮播效果详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 00:55:35 | 显示全部楼层 |阅读模式
  在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?本文将为大家详细介绍一下六种不同的轮播效果的实现,需要的可以参考一下
  在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片。
  功能需求:
  鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
  点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理。
  图片播放的同时,下面小圆圈模块跟随一起变化。
  点击小圆圈,可以播放相应图片。
  鼠标不经过轮播图, 轮播图也会自动播放图片。
  鼠标经过,轮播图模块, 自动播放停止。
  我们页面布局如下所示:

  接下来就一步步的实现功能
  先创建HTML页面
  实现流程是:先给定一个大盒子,为了方便后面盒子的定位操作,再给它一个相对定位,把图片通过无序列表的形式添加进大盒子中,因为我们要实现的轮播图效果是横向的,所以我们可以给图片添加float:left属性,又因为图片所在的ul不够大,所以其他的图片会被挤到下面,所以我们可以手动修改图片所在的ul的大小;接下来写一个无序列表用于放置小圆圈,通过绝对定位的方式将其定位到大盒子的下面,在将小圆圈加进去,方便我们实现点击对应的小圆圈,就跳转到相应图片的效果。然后将左右箭头通过绝对定位分别定到大盒子两侧合适位置。最后,我们再将大盒子外面的内容隐藏掉。
  1. ‹!DOCTYPE html>
  2. ‹html lang="en">
  3. ‹head>
  4.     ‹meta charset="UTF-8">
  5.     ‹meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     ‹meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     ‹title>Document‹/title>
  8.     ‹link rel="stylesheet" href="index.css" rel="external nofollow" >
  9. ‹/head>
  10. ‹body>
  11.     ‹div class="box">
  12.         ‹a href="" class = 'left jiantou'><‹/a>
  13.         ‹a href="" class = 'right jiantou'>>‹/a>
  14.         ‹ul class = 'pic'>
  15.             ‹li>
  16.                 ‹a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >‹img src="./images/1.jpg" alt="">‹/a>
  17.             ‹/li>
  18.             ‹li>
  19.                 ‹a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >‹img src="./images/2.jpg" alt="">‹/a>
  20.             ‹/li>
  21.             ‹li>
  22.                 ‹a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >‹img src="./images/3.jpg" alt="">‹/a>
  23.             ‹/li>
  24.             ‹li>
  25.                 ‹a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >‹img src="./images/4.jpg" alt="">‹/a>
  26.             ‹/li>
  27.              ‹li>
  28.                 ‹a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >‹img src="./images/5.jpg" alt="">‹/a>
  29.             ‹/li>
  30.         ‹/ul>
  31.         ‹ul class="lis">
  32.             ‹li>‹/li>
  33.             ‹li class = 'selected'>‹/li>
  34.             ‹li>‹/li>
  35.             ‹li>‹/li>
  36.             ‹li>‹/li>
  37.         ‹/ul>
  38.     ‹/div>
  39. ‹/body>
  40. ‹/html>
复制代码
  css文件
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. li{
  6.     list-style: none;
  7. }
  8. .box{
  9.     position: relative;
  10.     overflow: hidden;
  11.     margin: 100px auto;
  12.     width: 520px;
  13.     height: 280px;
  14.     background-color: red;
  15. }
  16. .jiantou{
  17.     font-size: 24px;
  18.     text-decoration: none;
  19.     display: block;
  20.     text-align: center;
  21.     width: 20px;
  22.     height: 30px;
  23.     line-height: 30px;
  24.     background: rgba(158, 154, 154, 0.7);
  25.     color: white;
  26.     z-index: 999;
  27. }
  28. .left{
  29.     position: absolute;
  30.     top: 125px;
  31.     left: 0px;
  32.     border-top-right-radius: 15px;
  33.     border-bottom-right-radius: 15px;
  34. }
  35. .right{
  36.     position: absolute;
  37.     top:125px;
  38.     left: 500px;
  39.     border-top-left-radius: 15px;
  40.     border-bottom-left-radius: 15px;
  41. }
  42. img{
  43.     width: 520px;
  44.     height: 280px;
  45. }
  46. .box .pic{
  47.     width: 600%;
  48. }
  49. .pic li {
  50.     float: left;
  51. }
  52. .lis{
  53.    position: absolute;
  54.    bottom: 15px;
  55.    left: 50%;
  56.    margin-left: -35px;
  57.    width: 70px;
  58.    height:13px;
  59.    border-radius: 7px;
  60.    background: rgba(158, 154, 154, 0.7);
  61. }
  62. .lis li {
  63.     float: left;
  64.     width: 8px;
  65.     height: 8px;
  66.     margin: 3px;
  67.     border-radius: 50%;
  68.     background-color: #fff;
  69.    
  70. }
  71. .lis .selected{
  72.     background-color: cyan;
  73. }
复制代码
  此时页面效果为:

  再实现js部分的功能。

1、当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
  首先,我们先通过display:none让我们初始的两个箭头隐藏;然后获取两个箭头和大盒子,在给大盒子添加鼠标经过和鼠标离开事件。如下所示:
  1. var left = document.querySelector('.left');
  2.     var right = document.querySelector('.right');
  3.     var box = document.querySelector('.box');
  4.     box.addEventListener('mouseenter',function(){
  5.         left.style.display = 'block';
  6.         right.style.display = 'block';
  7.     })
  8.     box.addEventListener('mouseleave',function(){
  9.         left.style.display = 'none';
  10.         right.style.display = 'none';
  11.     })
复制代码
  实现效果为:


2、动态生成小圆圈
  先删除掉所有的小圆圈的li,如图所示:

  因为我们创建的小圆圈是根据图片的张数决定的,所以我们的核心思路就是:小圆圈的个数要跟图片张数一致,先得到ul里面图片的张数(图片放入li里面,所以就是li的个数),然后利用循环动态通过创建节点createElement(‘li')和插入节点 ul. appendChild(li)生成小圆圈(这个小圆圈要放入ul里面)要注意第一个小圆圈需要添加selected类。
  实现代码为:
  1. var pic = document.querySelector('.pic');
  2.     var lis = document.querySelector('.lis');
  3.     for(var i = 0;i‹pic.children.length;i++){
  4.         var li = document.createElement('li');
  5.         lis.appendChild(li);
  6.     }
  7.     lis.children[0].className = 'selected';
复制代码
  实现效果为:


3、点击小圆圈,小圆圈变色
  在生成小li的同时,根据排他思想,给小圆圈添加点击事件,当点击对应的小圆圈时,让其添加selected类,其余的小圆圈删除selected类。
  代码为:
  1. li.addEventListener('click',function(){
  2.             for(var i =0;i‹lis.children.length;i++){
  3.                 lis.childern[i].className = '';
  4.             }
  5.             this.className = 'selected';
  6.         })
复制代码
  实现效果为:


4、点击小圆圈滚动图片
  这里就用到动画函数,前面已经讲过怎样封装动画函数,这里不在赘述,直接引用。但是要注意将动画函数的js文件放在我们index.js的上面。又因为只有添加了定位了元素才可以使用动画函数,我们还需要给pic这个ul添加定位。然后根据规律发现: 点击某个小圆圈 ,ul滚动的距离为: 小圆圈的索引号乘以图片的宽度。(因为图片是向左走,所以为负值)所以需要知道小圆圈的索引号, 我们就可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定义属性。
  先在生成li的时候设置索引:
  1. li.setAttribute('index',i);
复制代码
  然后在给li添加点击事件的时候获得索引,并得到图片宽度,调用动画函数:
  1. li.addEventListener('click',function(){
  2.     var boxWidth = box.offsetWidth;
  3.     //获得索引号
  4.     var index = this.getAttribute('index');
  5.     for(var i = 0;i‹lis.children.length;i++){
  6.         lis.children[i].className = '';
  7.     }
  8.     this.className = 'selected';
  9.     animate(pic,-index*boxWidth)
  10. })
复制代码
  实现效果为:


5、点击右侧按钮一次,就让图片滚动一张。
  可以直接给右侧按钮添加点击事件,声明一个变量num, 点击一次,自增1, 让这个变量乘以图片宽度,就是 ul 的滚动距离。
  1. var num = 0;
  2.     right.addEventListener('click',function(){
  3.         num++;
  4.         animate(pic,-num*boxWidth);
  5.     })
复制代码
  实现效果为:

  我们发现,当点击右侧按钮时,可以实现图片的切换效果,但是当点击到最后一张图片的时候,就会停留在显页面初始背景,并不美观,所以我们就可以通过图片无缝滚动原理让图片无缝滚动,操作方法为。将.pic列表里的第一个li通过cloneNode(true)添加一份,然后通过appendChild()复制到该列表的末尾,然后再在js页面中给num添加一个判断条件,即当num的值等于这个列表里面元素的个数-1的时候,让ul移动的距离变为0,并让num等于0。
  代码为:
  1. var first = pic.children[0].cloneNode(true);
  2.     pic.appendChild(first);
  3.     //右侧按钮的功能
  4.     var num = 0;
  5.     right.addEventListener('click',function(){
  6.         if(num == pic.children.length-1){
  7.             pic.style.left = 0;
  8.             num = 0;
  9.         }
  10.         num++;
  11.         animate(pic,-num*boxWidth);
  12.     })
复制代码
  实现效果为:

  成功实现。

6、点击右侧按钮, 小圆圈跟随变化
  需要进行的操作是:再声明一个变量circle,每次点击右侧按钮时自增1,因为当我们左侧按钮点击时也会实现该效果,也需要这个变量,因此要声明全局变量。但是图片有5张,我们小圆圈只有4个少一个,必须加一个判断条件,如果circle == 4就 从新复原为 0。
  1. var num = 0;
  2. var circle = 0;
  3.   right.addEventListener('click',function(){
  4.       if(num == pic.children.length-1){
  5.           pic.style.left = 0;
  6.           num = 0;
  7.       }
  8.       num++;
  9.       animate(pic,-num*boxWidth);
  10.       circle++;
  11.       if(circle == lis.children.length){
  12.           circle = 0;
  13.       }
  14.       for(var i =0;i‹lis.children.length;i++){
  15.           lis.children[i].className = '';
  16.       }
  17.       lis.children[circle].className = 'selected';
  18.   })
复制代码
  运行结果为:

  但是这样还是有点小问题的,当我们让小圆圈和右侧按钮结合起来使用的时候,就会发现错误,如下:

  当我们点击小圆点时,也可以跳转到相应的图片页,但当我们继续点击右侧按钮时,就会发现下面的小圆点和对应的图片不对应了。这是我们我们的右侧按钮点击事件时通过变量num来控制的,而num变量和小圆圈的点击事件没有任何关系,所以就存在差异。
  我们的解决方案就是每次点击小li时,获得它的索引号,然后把num和circle的值改为得到的索引号的值,代码为:
  1. var index = this.getAttribute('index');
  2. num = index;
  3. circle = index;
复制代码
  实现效果为:


7、左侧按钮功能制作
  和右侧按钮做法类似,不在赘述,代码如下:
  1. left.addEventListener('click',function(){
  2.         if(num == 0){
  3.             num = pic.children.length-1;
  4.             pic.style.left = -num*boxWidth+'px';
  5.             
  6.         }
  7.         num--;
  8.         animate(pic,-num*boxWidth);
  9.         circle--;
  10.         if(circle ‹0){
  11.             circle = lis.children.length-1;
  12.         }
  13.         for(var i =0;i‹lis.children.length;i++){
  14.             lis.children[i].className = '';
  15.         }
  16.         lis.children[circle].className = 'selected';
  17.     })
复制代码
  实现效果为:


8、自动播放功能
  其实添加一个定时器自动播放轮播图,就类似于点击了右侧按钮,此时我们使用手动调用右侧按钮点击事件 right.click(),鼠标经过图片就停止定时器 ,鼠标离开图片就开启定时器。
  1. var timer = this.setInterval(function(){
  2.   right.click();
  3. },2000)
复制代码
  实现效果为:

  完整index.js的代码为:
  1. window.addEventListener('load',function(){
  2.     var left = document.querySelector('.left');
  3.     var right = document.querySelector('.right');
  4.     var box = document.querySelector('.box');
  5.     box.addEventListener('mouseenter',function(){
  6.         left.style.display = 'block';
  7.         right.style.display = 'block';
  8.     })
  9.     box.addEventListener('mouseleave',function(){
  10.         left.style.display = 'none';
  11.         right.style.display = 'none';
  12.     })
  13.     var pic = document.querySelector('.pic');
  14.     var lis = document.querySelector('.lis');
  15.     var boxWidth = box.offsetWidth;
  16.     for(var i = 0;i‹pic.children.length;i++){
  17.         
  18.         var li = document.createElement('li');
  19.         lis.appendChild(li);
  20.         //设置索引号
  21.         li.setAttribute('index',i);
  22.         li.addEventListener('click',function(){
  23.             //获得索引号
  24.             var index = this.getAttribute('index');
  25.             num = index;
  26.             circle = index;
  27.             for(var i = 0;i‹lis.children.length;i++){
  28.                 lis.children[i].className = '';
  29.             }
  30.             this.className = 'selected';
  31.             animate(pic,-index*boxWidth)
  32.         })
  33.     }
  34.     lis.children[0].className = 'selected';
  35.     //克隆第一个li
  36.     var first = pic.children[0].cloneNode(true);
  37.     pic.appendChild(first);
  38.     var num = 0;
  39.     var circle = 0;
  40.     //右侧按钮的功能
  41.     right.addEventListener('click',function(){
  42.         if(num == pic.children.length-1){
  43.             pic.style.left = 0;
  44.             num = 0;
  45.         }
  46.         num++;
  47.         animate(pic,-num*boxWidth);
  48.         circle++;
  49.         if(circle == lis.children.length){
  50.             circle = 0;
  51.         }
  52.         for(var i =0;i‹lis.children.length;i++){
  53.             lis.children[i].className = '';
  54.         }
  55.         lis.children[circle].className = 'selected';
  56.     })
  57.     //左侧按钮功能
  58.     left.addEventListener('click',function(){
  59.         if(num == 0){
  60.             num = pic.children.length-1;
  61.             pic.style.left = -num*boxWidth+'px';
  62.             
  63.         }
  64.         num--;
  65.         animate(pic,-num*boxWidth);
  66.         circle--;
  67.         if(circle ‹0){
  68.             circle = lis.children.length-1;
  69.         }
  70.         for(var i =0;i‹lis.children.length;i++){
  71.             lis.children[i].className = '';
  72.         }
  73.         lis.children[circle].className = 'selected';
  74.     })
  75.     var timer = this.setInterval(function(){
  76.         right.click();
  77.     },2000)
  78. })
复制代码
  至此,我们轮播图的全部功能都实现了,你学会了吗? 
  以上就是JavaScript实现六种网页图片轮播效果详解的详细内容,更多关于JavaScript网页图片轮播的资料请关注脚本之家其它相关文章!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:44 , Processed in 0.070573 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表