服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|Jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 原生JS实现pc端轮播图效果

原生JS实现pc端轮播图效果

2021-12-15 16:13qq_15198465 js教程

这篇文章主要为大家详细介绍了原生JS实现pc端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下

案例:轮播图需求

布局:ul下有很多li标签;浮动在一行;

原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;

功能需求:

  • 序号轮播
  • 左右按钮的轮播
  • 自动轮播
  • 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播

实现效果:

原生JS实现pc端轮播图效果

html部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="box" id="box">
    <div class="inner" id="inner">
      <ul id="imglist">
        <li>
          <a href="#" ><img src="images/1.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/2.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/3.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/4.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/5.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/6.jpg" alt=""></a>
        </li>
      </ul>
      <div class="list">
        <i class="current">1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
      </div>
      <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
      </div>
    </div>
</div>

css部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
* {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .box {
      width: 730px;
      height: 454px;
      padding: 8px;
      border: 1px solid green;
      margin: 100px auto;
    }
    
    .inner {
      position: relative;
      overflow: hidden;
      height: 454px;
    }
    
    #imglist {
      width: 700%;
      position: absolute;
      left: 0;
      transition: left 300ms linear;
    }
    
    li {
      float: left;
    }
    
    .list {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -85px;
    }
    
    .list i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      color: #333;
      float: left;
      font-style: normal;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }
    
    .list i:last-child {
      margin-right: 0;
    }
    
    .list i.current {
      background-color: skyblue;
      color: #fff;
    }
    
    .arrow {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -30px;
    }
    
    .arrow-left,
    .arrow-right {
      width: 30px;
      height: 60px;
      position: absolute;
      font: 20px/60px "consolas";
      color: #fff;
      background-color: rgba(0, 0, 0, .3);
      text-align: center;
      cursor: pointer;
    }
    
    .arrow-right {
      right: 0;
    }

js部分:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// 获取DOM
 var yuan = document.querySelectorAll("i");
 var li = document.querySelector("ul li");
 var ul = document.querySelector("ul");
 var imgs = document.querySelector("#imglist");
 var right = document.querySelector(".arrow-right");
 var left = document.querySelector(".arrow-left");
 var box = document.querySelector(".box");
 window.onload = function() {
   //------------------------------------这里是点击小圆圈,控制图片的切换
   //循环小圆点 注册小圆点
   for (var i = 0; i < yuan.length; i++) {
     //我们需要这里面的i 必须提前拿出来,要不最后i的值就是最后一个数值了
     yuan[i].num = i;
     //注册事件
     yuan[i].onmouseover = function() {
       // 现在要循环将样式移除
       for (var j = 0; j < yuan.length; j++) {
         yuan[j].classList.remove("current");
       }
       //这里是为了将点击的小圆点 增加上样式
       this.classList.add("current");
       var num = this.num;
       //到这里的思路就是点击小圆点 将图片进行移动,向左面移动,上面css做了相应的定位操作
       //移动的距离就是 n 乘以 一张图片的宽度,
       //n 就是选择的小圆点的 坐标-----i(num)
       //图片的宽度 box.offsetWidth
       var left = num * li.offsetWidth;
       // console.log(num, box.offsetWidth, left);
       imgs.style.left = `-${left}px`;
 
       //这里小原点联动左右按钮
       for (var p = 0; p < yuan.length; p++) {
         //清除全部样式(小圆点)
         yuan[p].classList.remove("current");
       }
       //给当前的小圆点增加样式
       yuan[num].classList.add("current");
       //这里这个位置比较关键,在上面设置完样式之后,记得将此num赋值给全局的index
       index = this.num;
 
 
     }
   }
   //------------------------------------以上是点击小圆圈,控制图片的切换
   //------------------------------------下面是开始右面轮播,控制图片的切换
   //首先定义一个全局的index,这个index的作用依旧是控制图片的切换
   var index = 0;
   right.onclick = function() {
     index++;
     //这里要对index做一下判断,如果不做判断,可以试想一下,
     //只要你一点击,index就会无限的增大,增大到你“无法自拔”
     if (index == ul.children.length) {
       //如果坐标为6的话,显示应该显示第1张图片,所以要复位 即index=0
       index = 0;
     }
     var left = index * li.offsetWidth;
     // console.log(index, box.offsetWidth, left);
     imgs.style.left = `-${left}px`;
 
     //点击右面增加联动小圆点的效果
     for (var n = 0; n < yuan.length; n++) {
       //清除全部样式(小圆点)
       yuan[n].classList.remove("current");
     }
     //给当前的小圆点增加样式
     yuan[index].classList.add("current");
   };
   //------------------------------------以上是结束右面轮播,控制图片的切换
 
   //------------------------------------下面是开始左面轮播,控制图片的切换
   left.onclick = function() {
     index--;
     //这里同右点击一样,需要做一下判断,
     console.log(index);
     if (index == -1) {
       index = ul.children.length - 1;
     }
     var left = index * li.offsetWidth;
     // console.log(index, box.offsetWidth, left);
     // console.log(left);
     imgs.style.left = `-${left}px`;
 
     //这个位置做的是 左面点击联动小圆点
     for (var m = 0; m < yuan.length; m++) {
       //清除全部样式(小圆点)
       yuan[m].classList.remove("current");
     }
     //给当前的小圆点增加样式
     yuan[index].classList.add("current");
   };
   //------------------------------------上面是结束左面轮播,控制图片的切换
   //------------------------------------开始设置自动轮播
   var timer = setInterval(function() {
     right.onclick();
   }, 1000);
   //------------------------------------以上是自动轮播结束
   //------------------------------------设置鼠标进来就停止开始
   box.onmouseover = function() {
     clearInterval(timer);
   };
   //------------------------------------设置鼠标进来就停止结束
   //------------------------------------设置鼠标出去就停止开始
   box.onmouseout = function() {
     timer = setInterval(function() {
       right.onclick();
     }, 1000);
   };
   //------------------------------------设置鼠标出去就停止结束
 }

未完待续,本篇文章做的PC端的处理,目前从6页-1页,1页到6页还有点小瑕疵,会及时更新上的,其他功能一切正常,欢迎大家评论

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_15198465/article/details/99004090

延伸 · 阅读

精彩推荐
  • js教程js事件模型与自定义事件实例解析

    js事件模型与自定义事件实例解析

    JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。本文将对其具体实现代码进行解析,需要的朋友一起来看下吧...

    caihg5472021-12-15
  • js教程原生JS实现pc端轮播图效果

    原生JS实现pc端轮播图效果

    这篇文章主要为大家详细介绍了原生JS实现pc端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    qq_151984659912021-12-15
  • js教程微信小程序学习之自定义滚动弹窗

    微信小程序学习之自定义滚动弹窗

    这篇文章主要给大家介绍了关于微信小程序学习之自定义滚动弹窗的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考...

    юноша8942021-12-15
  • js教程微信小程序自定义支持图片的弹窗

    微信小程序自定义支持图片的弹窗

    这篇文章主要为大家详细介绍了微信小程序自定义支持图片的弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    岁末Zzz7982021-12-15
  • js教程Javascript实现汉字和拼音互转的终极方案

    Javascript实现汉字和拼音互转的终极方案

    网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,有的不支持多音字、不支持声调或者字典文件太大,无法根据实际需要满足需求。这篇文章给...

    我是小茗同学9972021-12-15
  • js教程JavaScript中arguments的使用方法详解

    JavaScript中arguments的使用方法详解

    这篇文章主要给大家介绍了关于JavaScript中arguments的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    等待的L先生3512021-12-15
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡8902021-12-15
  • js教程js实现移动端轮播图滑动切换

    js实现移动端轮播图滑动切换

    这篇文章主要为大家详细介绍了js实现移动端轮播图滑动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    浪漫前端11142021-12-15