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

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

服务器之家 - 编程语言 - JavaScript - js教程 - js编写轮播图效果

js编写轮播图效果

2022-02-16 17:09晚咹 js教程

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

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

1、html部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="box">
    <ul>
      <li class="show"><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
      <li><img src="img/6.jpg" alt=""></li>
    </ul>
    <img src="img/l.png" alt="" id="lef">
    <img src="img/r.png" alt="" id="rig">
    <ol>
      <li class="focus" data-i = "0"></li>
      <li data-i = "1"></li>
      <li data-i = "2"></li>
      <li data-i = "3"></li>
      <li data-i = "4"></li>
      <li data-i = "5"></li>
    </ol>
</div>

2、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
<script>
    var liList = document.querySelectorAll("#box ul li")
    var olList = document.querySelectorAll("#box ol li")
    var rig = document.getElementById("rig")
    var lef = document.getElementById("lef")
 
    var index = 0
    function setLi(){
      for(var i = 0;i <liList.length;i++){
        liList[i].className = ""
        olList[i].className = ""
      }
      liList[index].className = "show"
      olList[index].className = "focus"
    }
    // 向右
    rig.onclick = function(){
      if(index !== 5){
        index++
      }
      if(index === 5){
        index = 0
    }
    setLi()
  }
  //向左
  lef.onclick = function(){
      
      if(index !== 0){
        index--
      }
      if(index === 0){
        index = 5
    }
    setLi()
  }
  //圆点
  for(var i = 0;i < olList.length;i++){
    olList[i].onclick = function(){
      index = this.getAttribute("data-i")
      setLi()
    }
  }
  //计时
  var autoPlay = setInterval(
    function(){
      rig.click()
    },3000)
 
  //鼠标划上停止播放
  var box = document.querySelector("div")
  box.onmouseenter = function(){
    clearInterval(autoPlay)
  }
 
  // 鼠标移走继续播放
  box.onmouseleave = function(){
    autoPlay = setInterval(
    function(){
      rig.click()
    },3000)
  }
</script>

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

原文链接:https://blog.csdn.net/weixin_54741536/article/details/114499250

延伸 · 阅读

精彩推荐
  • js教程NestJs使用Mongoose对MongoDB操作的方法

    NestJs使用Mongoose对MongoDB操作的方法

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

    ragga-time3982022-01-22
  • js教程玩转 Mockjs,前端也能跑得很溜

    玩转 Mockjs,前端也能跑得很溜

    mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 mock.js 的语法。...

    前端人4842022-01-05
  • js教程确保JavaScript 安全的五大做法

    确保JavaScript 安全的五大做法

    如果你运行交互式网站或应用程序,JavaScript 安全性是重中之重。 从程序错误和不安全的用户输入到恶意攻击,有很多事情可能会出错。...

    粤嵌教育8752022-01-11
  • js教程JavaScript 中 find() 和 filter() 方法的区别

    JavaScript 中 find() 和 filter() 方法的区别

    JavaScript 在 ES6 上有很多数组方法,每种方法都有独特的用途和好处。...

    锋享前端4792021-12-28
  • js教程不用typsescript如何使用类型增强功能

    不用typsescript如何使用类型增强功能

    这篇文章主要给大家介绍了关于不用typsescript如何使用类型增强功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    小云菜7922022-02-12
  • js教程JS实现页面侧边栏效果探究

    JS实现页面侧边栏效果探究

    这篇文章主要介绍了JS实现页面侧边栏效果探究,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

    行舟客5092021-12-29
  • js教程微信小程序实现下拉加载更多商品

    微信小程序实现下拉加载更多商品

    这篇文章主要为大家详细介绍了微信小程序实现下拉加载更多商品,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    保护我方豆豆8202021-12-22
  • js教程原生js实现下拉框选择组件

    原生js实现下拉框选择组件

    这篇文章主要为大家详细介绍了原生js实现下拉框选择组件的开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    蒲公英芽4432022-01-05