js轮播图

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量16 收藏
点赞数
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52840130/article/details/134953417
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    ol,ul{
        list-style: none;
    }
    .text{
        width: 400px;
        height: 400px;
        margin: 50px auto;
        overflow: hidden;
        position: relative;
    }
    ul{
        width: 400px;
        height: 400px;
    
        overflow: hidden;
        position: relative;
    }
    ul li{
        width: 400px;
        height: 400px;
        position: absolute;
        opacity: 0;
    }
    .show{
        opacity: 1;
        z-index: 1;
    }
    img{
        width: 100%;
        height: 100%;

    }
    .btn1{
        position: absolute;
        top:45%;
        left: 0;
        z-index: 2;
        font-size: 30px;
        background-color: aqua;
        opacity: 0.5;
        cursor: pointer;
            }
            .btn2{
                position: absolute;
                top:45%;
                right: 0;
                z-index: 2;
                font-size: 30px;
                background-color: aqua;
                opacity: 0.5;
                cursor: pointer;
                    }
        ol{
            width: 200px;
            height: 50px;
            top: 90%;
            left: 30%;
            position: absolute;
            z-index: 2;
            
        }
        ol li{
            width: 20px;
            height: 20px;
            background-color: hotpink;
            float: left;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
            opacity: 0.8;
            cursor: pointer;
        }
        .active{
            background-color: aquamarine;
        }
    </style>
    </head>
    <body> 
    <div class="text">
     <ul>
         <li  class="show"><img src="img/img1.jpg"/></li>
         <li><img src="img/img2.jpg" /></li>
         <li><img src="img/img3.jpg"/></li>
         <li><img src="img/img4.jpg"/></li>
         <li><img src="img/img5.jpg"/></li>
     </ul>
      <span class="btn1">&lt;</span>
      <span class="btn2">&gt;</span>
      <ol>
           <li class="active">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
      </ol>
      </div>
    <script>
    var img=document.querySelectorAll('ul li')
    var li=document.querySelectorAll('ol li')
    var span=document.querySelectorAll('span')
    var ul=document.querySelector('ul')
    var index=0
    span[0].οnclick=function(){
        if(index==-1){
            index=img.length-1
        }
        for(let i=0;i<img.length;i++){
            img[i].className=''
            li[i].className=''
        }
        img[index].className='show'
        li[index].className='active'
        index--
    }
    span[1].οnclick=function(){
        if(index==img.length){
            index=0
        }
        for(let i=0;i<img.length;i++){
            img[i].className=''
            li[i].className=''
        }
        img[index].className='show'
        li[index].className='active'
        index++
    }
    for(let i=0;i<li.length;i++){
        li[i].οnclick=function(){
            index=i
            for(let j=0;j<li.length;j++){
                li[j].className=''
                img[j].className=''
            }
            li[i].className='active'
            img[i].className='show'
        }
    }
    var timer=null
    function  autoPic(){
    timer=setInterval(function(){
        
        if(index==img.length){
            index=0
        }
        for(let i=0;i<img.length;i++){
            img[i].className=''
            li[i].className=''
        }
        img[index].className='show'
        li[index].className='active'
        index++
    },1000)
    }
     autoPic()
    ul.parentNode.οnmοuseοver=function(){
        clearInterval(timer)
    }
    ul.parentNode.onmouseout = ()=>{
        autoPic()
    }
    </script>
        
    </body>
</html>

- 瑾♛年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JavaScript 轮播图.rar
04-08
JavaScript（可能在javascript文件夹中的script.js）是实现轮播图动态功能的关键。主要功能包括： 1. 初始化：获取DOM元素，如轮播图容器、图片列表、控制按钮等，并设置初始状态，比如第一张图片显示，其他隐藏。 ...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
js轮播图_javascript_
10-03
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 536
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1315
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1086
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 155
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 102
【代码】vue el-select的下拉树形结构。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 658
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 935
el-menu根据多层树形结构递归遍历展示菜单栏
爬虫基本原理入门
RHeng的博客
07-25 841
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 155
【代码】typescript中type和interface有什么区别，如何选择？
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 201
注释很详细，直接上代码……
如何关闭页面报错的遮罩层
karlaofsky的博客
07-25 199
在vue.config.js中添加如下配置，问题：如何关闭页面报错的遮罩层。
刷新当前页面
Garbrielle的博客
07-26 140
相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.
React组件定义
qq_39460057的博客
07-23 303
组件是是构建用户界面（UI）的基础，它可以是一个输入框、按钮、也可以是一整个页面。
【JS逆向课件：第十九课：jQuery】
weixin_50556117的博客
07-24 994
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理等功能。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
JavaScript轮播图
05-27
JavaScript轮播图可以通过以下步骤来实现： 1. 创建一个HTML结构，包含轮播图容器和轮播图项。 2. 使用CSS样式来设置轮播图容器和轮播图项的样式，如宽度、高度、位置、层级等。 3. 在JavaScript中获取轮播图容器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值