JavaScript实现轮播图案例

 更新时间:2021-09-30 20:48:33   作者:佚名   我要评论(0)

本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下
运用定时器所写成的一个简单的轮播图,直接看代码,如

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

运用定时器所写成的一个简单的轮播图,直接看代码,如下:

1.css代码

<style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           font-size: 14px;
           font-family: Arial, Helvetica, sans-serif;
       }
       .slider-box{
          width: 1226px;
          height: 460px;
          margin: 10px auto;
          overflow: hidden;
          position: relative;
       }
      .slider-box .images a{
        width: 100%;
        height: 460px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: all 2s;
       }
 
       .slider-box .images a.active{
           opacity: 1;
       }
 
       .slider-box .images a img{
           width: 100%;
           height: 100%;
           display: block;
       }
       .slider-box .nav{
           position: absolute;
           left: 0;
           top: 195px;
           width: 100%;
           /* background-color: red; */
           padding: 0 10px;
           /* height: 100px; */
       }
       .slider-box .nav a{
           background-image: url(img/icons.png);
           width: 41px;
           height: 69px;
           display: inline-block;
           background-repeat: no-repeat;
       }
       .slider-box .nav .prev{
           background-position: -84px 0;
       }
       .slider-box .nav .prev:hover{
           background-position: 0 0;
       }
       .slider-box .nav .next{
           background-position: -125px 0;
           float: right;
       }
       .slider-box .nav .next:hover{
           background-position: -42px 0;
       }
       .slider-box .pages{
           position: absolute;
           right: 20px;
           bottom: 25px;
           font-size: 0;
           width: 1186px;
           text-align: center;
           /* background-color: rebeccapurple; */
       }
       .slider-box .pages .dot{
           display: inline-block;
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background-color: rgba(0,0,0,0.4);
           margin-right: 10px;
       }
       .slider-box .pages .dot:hover{
        background-color: yellow;
       }
       .slider-box .pages .dot.active{
        background-color: yellow;
       }
 
</style>

2.html代码

<div class="slider-box">
        <div class="images">
            <!-- 以后哪张图片要想显示了,只需要添加一个
            active类就行 -->
            <a href="#" class="active">
                <img src="img/1.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/2.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/3.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/4.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/5.jpg" alt="">
            </a>
        </div>
        <div class="nav">
            <a href="javascript:;" class="prev" title="前一张"></a>
            <a href="javascript:;" class="next" title="下一张"></a>
        </div>
        <div class="pages">
            <a href="javascript:;" class="dot active"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
        </div>
</div>

3.js代码

<script>
        // 定时器切换图片的功能
        var images = document.querySelectorAll('.images a')
        var index = 0 //定义要播放的图片的索引
        var pages = document.querySelectorAll(".dot")
        var prev = document.querySelector(".prev")
        var next = document.querySelector(".next")
        // 根据索引值切换图片
        // 找到images的a标签,添加active这个类
        function showImage(idx){
            images.forEach(function(v,i){
                // idx = 1
                // i = 0 1 2 3 4
                if(i===idx){
                  v.classList.add('active')
                //控制对应点高亮
                  pages[i].classList.add("active")
 
                }else{
                    v.classList.remove('active')
                    pages[i].classList.remove("active")
                }
            })
        }
    //   showImage(3)
 
    prev.onclick = function(){
        if(index===0){
            index = images.length - 1// 4
        }else{
            index = index - 1
        }
        showImage(index)
    }
    next.onclick = function(){
        if(index===images.length-1){
            index = 0
        }else{
            index+=1
        }
        showImage(index)
    }
    var timer = setInterval(function(){
        // 定时器控制图片的切换和点击下一张的功能一样
        // 调用下一张的点击操作
        next.click()// 模拟next的点击操作
    },3000)
</script>

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

您可能感兴趣的文章:
  • JS实现多重选项卡切换轮播图
  • 原生JavaScript实现轮播图效果
  • js实现简单轮播图效果
  • JavaScript实现简易轮播图最全代码解析(ES6面向对象)
  • JavaScript实现简易轮播图最全代码解析(ES5)
  • js实现轮播图的完整代码
  • 原生js实现轮播图的示例代码
  • js实现支持手机滑动切换的轮播图片效果实例
  • JS轮播图实现简单代码
  • js实现点击左右按钮轮播图片效果实例

相关文章

  • JavaScript实现轮播图案例

    JavaScript实现轮播图案例

    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 运用定时器所写成的一个简单的轮播图,直接看代码,如
    2021-09-30
  • python学习字符串驻留与常量折叠隐藏特性详解

    python学习字符串驻留与常量折叠隐藏特性详解

    下面是Python字符串的一些微妙的特性,绝对会让你大吃一惊。 案例一: 案例二: 案例三: 很好理解, 对吧&#63; 说明: 这些行为是由于 Cpy
    2021-09-30
  • 纯JS将table表格导出到excel的方法

    纯JS将table表格导出到excel的方法

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">IE导出Excel方法</button> <button type="bu
    2021-09-30
  • Python装饰器的两种使用心得

    Python装饰器的两种使用心得

    装饰器的基础使用(装饰带参函数) def decorator(func): def inner(info): print('inner') func(info) return i
    2021-09-30
  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    目录1. 页面布局2. 图片上传和展示3. 初始化画布4. 切换模板5. 输出图片 这里用到的技术: HTML+ CSS+ JavaScript; download.js库
    2021-09-30
  • vue与react详细

    vue与react详细

    目录一、全景图二、背景1、react:专业 2、vue:传奇 三、技术思想1、key的异同为例1.1 react 1.2 vue2、diff的宏观比较2.1 react2.2 vue
    2021-09-30
  • JavaScript实现密码框输入验证

    JavaScript实现密码框输入验证

    有时需要在前端页面,用户输入时先进行简单的验证,减少服务器压力 例如,限定了字段的输入长度: 输入框后有输入范围提示信息 输入错误长
    2021-09-30
  • Java杂谈之重复代码是什么

    Java杂谈之重复代码是什么

    目录方法为何要有参数?长参数列表的问题解决方案聚沙成塔动静分离告别标记总结有经验的程序员应该都见过,一个方法坐拥几十上百个参数。 方
    2021-09-30
  • 话费API接口

    话费API接口

    ―、引言1.1 文档概述本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成接口开发与联调,实现与话费充值
    2021-09-29
  • 话费充值API接口,三网可充,支持快充慢充

    话费充值API接口,三网可充,支持快充慢充

    微客云地址: http://www.wikeyun.cn/ ―、引言1.1 文档概述本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快
    2021-09-29

最新评论