简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html轮播图的实现
Blogger Information
Blog 25
fans 0
comment 0
visits 13504
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html轮播图的实现
安超
Original
1253 people have browsed it

1.轮播图的实现途径

实现一个含有图片及图片指示符的轮播图，主要要几个方面：
1.图片的动态加载，从js里调入各种图片的信息，如图片源、图片指向的链接等;
2.实现按钮的动态生成;
3.样式的加载与取消 classList.add()和classList.remove等;
4.图片和按钮的自动显示与隐藏等;
5.图片和按钮的自动轮播，数组的自动循环,shift()和push()的应用
轮播效果图

2.html代码

  1. <body>
  2.     <div class="slidershow">
  3.         <div class="imgs"></div>
  4.         <div class="btns"></div>
  5.     </div>
  6.     <script type="module">
  7.         // 获取图片和按钮容器
  8.         const imgs = document.querySelector('.imgs');
  9.         const btns = document.querySelector('.btns')
  10.         //  从外部导入函数，别名为imagesSlider，注意，使用时要采取 "imagesSlider.xxx"的形式
  11.         import * as imagesSlider from "./js/slider.js";
  12.         // 已有代码加载完成后，加载图片和按钮等
  13.         window.onload = ()=>{
  14.             // 加载图片组
  15.             imagesSlider.createImage(imgs);
  16.             // 加载按钮
  17.             imagesSlider.createBtns(imgs,btns);
  18.             // 创建按钮事件
  19.             [...btns.children].forEach(function(btn){
  20.                 btn.onclick = function(){
  21.                     imagesSlider.switchImg(this,imgs);
  22.                 }
  23.             })
  24.             // [...btns.children].forEach(btn =>(btn.onclick = () => imagesSlider.switchImg(this,imgs)));不能用箭头函数，在箭头函数里，this表示undefiend。
  25.             //自动播放
  26.             // 按钮数组,三个span
  27.             const btnArr = [...btns.children];
  28.             const btnKeys =Object.keys(btnArr);
  30.             setInterval(
  31.                 function(btnArr,btnKeys){
  32.                 imagesSlider.timePlay(btnArr,btnKeys);
  33.                 },2000,btnArr,btnKeys);
  34.         }
  35.     </script>
  36. </body>

3.轮播图的js代码

  1. // the information of the picture
  2. const imgArr = [
  3.     {
  4.         key:1,
  5.         src:"images/item1.jpg",
  6.         url:"https://www.jacgoo.com"
  7.     },
  8.     {
  9.         key:2,
  10.         src:"images/item2.jpg",
  11.         url:"www.php.cn"
  12.     },
  13.     {
  14.         key:3,
  15.         src:"images/item3.jpg",
  16.         url:"www.baidu.com"
  17.      }
  18. ]
  20. // 产生图片的函数
  21. function createImage(imgs){
  22.     // 产生一个文档片段
  23.     console.log("------------------------")
  24.    const frag = new DocumentFragment();
  25.    for (let i = 0;i < imgArr.length;i++){
  26.     console.log(imgArr[i].src);
  27. //    创建图片
  28.    const img = new Image();
  29.    img.src = imgArr[i].src;
  30. //    创建dataset属性
  31.    img.dataset.key = imgArr[i].key;
  32.    if(i === 0) img.classList.add('active');
  33. //  添加事件
  34.     img.onclick = () => (location.href = imgArr[i].url);
  35.     // 添加图片到片段中
  36.     frag.append(img);
  37.    }
  38.        // 片段图片添加到图片容器中
  39.        imgs.append(frag);
  40. }
  41. //产生按钮的函数
  42. function createBtns(imgs,btns){
  43.     // 计算出所有图片的数量，根据这个来创建相同数量的按钮
  44.     const imagesLength = imgs.childElementCount;
  45.     console.log("button---------------")
  46.     for(let i = 0;i < imagesLength;i++){
  47.         const btn = document.createElement('span');
  48.         // 按钮索引：data-key，必须与图片索引一致
  49.         btn.dataset.key = imgs.children[i].dataset.key;
  50.         // 第一个按钮处于激活状态
  51.         if(i === 0 ) btn.classList.add('active')
  52.         btns.append(btn);
  54.     }
  55. }
  56. //更换图片函数
  57. function switchImg(currentbtn,imgs){
  58. //    去掉图片和按钮的激活状态
  59.    [...currentbtn.parentNode.children].forEach(btn => btn.classList.remove('active'));
  60.    [...imgs.children].forEach(img=>img.classList.remove('active'));
  61. //    将当前的按钮处于激活状态
  62.     currentbtn.classList.add('active');
  63. //    根据索引，找到当前图片并显示出来，用链式写法实现。
  64.    const currImg = [...imgs.children].find(img => img.dataset.key === currentbtn.dataset.key).classList.add('active');
  66. }
  68. //自动播放图片
  69. function timePlay(btnArr,btnKeys){
  70.     // 取数组的第一个
  71.     let key = btnKeys.shift();
  72.     // 根据索引找到对应的按钮，再给他自动派发一个点击事件
  73.     btnArr[key].dispatchEvent(new Event('click'));
  74.     // 把刚才导出的按钮再从尾部进入，实现首尾相连
  75.     btnKeys.push(key);
  76. }
  77. 导出四个函数
  78. export {createImage,createBtns,switchImg,timePlay};
  1. /* 图片 */
  2. .slidershow {
  3.     width:240px;
  4.     height:360px;
  5. }
  6. .slidershow img {
  7.     width:100%;
  8.     height:100%;
  9.     border-radius: 10px;
  10.     display: none;
  11. }
  12. .slidershow img.active{
  13.     display: block;
  14. }
  16. /* 按钮容器 */
  17. .slidershow .btns {
  18.     display:flex;
  19.     place-content: center;
  20.     transform:translateY(-40px);
  21. }
  22. .slidershow .btns > span {
  23.     background-color:gold;
  24.     height: 16px;
  25.     width: 16px;
  26.     border-radius: 50%;
  27.     margin:5px;
  28. }
  29. .slidershow .btns > span.active {
  30.     background-color: orangered;
  31. }
  32. .slidershow .btns > span:hover {
  33.     cursor:pointer;
  34. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！