js简单轮播

最新推荐文章于 2024-04-05 01:45:06 发布
最新推荐文章于 2024-04-05 01:45:06 发布
阅读量967 收藏
点赞数
分类专栏： JavaScript 文章标签： html css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanbaoag/article/details/123550801
版权

开发工具与关键技术： Visual Studio Code

作者：欧阳

撰写时间：2022/3/17

一个简单的轮播，代码

 <style type="text/css">

        /*清除边距*/

        div,ul,li{

            margin: 0;

            padding: 0;

        }

        /*首先准备一个放图片的容器*/

        .container{

            width: 500px;

            height: 280px;

            position: relative;

            top: 100px;

            left: 30%;

            /*border: 1px solid #ccc;*/

        }

        /*图片样式*/

        .container img{

            position: absolute;        /*把所有图片放在同一个位置*/

            width: 100%;

            transition-duration: 0.5s;    /*设置过渡时间*/

            opacity: 0;                /*把所有图片变透明*/

        }

        /*图片显示开关*/

        .container img.on{

            opacity: 1;                /*用于显示图片*/

        }

        /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/

        .left, .right{

            position: absolute;

            top: 30%;

            width: 60px;

            height: 100px;

            line-height: 100px;

            background-color: #666;

            opacity: 0.5;

            text-align: center;

            font-size: 60px;

            color: #ccc;

            display: none;    /*先隐藏按钮*/

            cursor: pointer;    /*设置鼠标悬停时的样式*/

        }

        .left{

            left: 0;

        }

        .right{

            right: 0;

        }

        .container:hover .left, .container:hover .right{

            display: block;            /*鼠标悬停才容器范围内时显示按钮*/

        }

        .left:hover, .right:hover{

            color: #fff;

        }

        /*焦点*/

        .container ul{

            position: absolute;

            bottom: 0;

            max-width: 500px;

            padding: 5px 200px;

        }

        .container ul li{

            list-style: none;

            float: left;

            background-color: #ccc;

            width: 10px;

            height: 10px;

            border-radius: 50%;

            margin-left: 10px;

            cursor: pointer;

        }

        .container ul li.active{

            background-color: #282923;        /*焦点激活时的样式*/

        }

    </style>

</head>

<body>

    <div class="container">

        <!-- 先把第一张图片显示出来 -->

        <img class="on" src="../images/xxg.jpg" />

        <img src="../images/heif.jpg" />

        <img src="../images/luo.jpg" />

        <img src="../images/jur.png" />

        <!-- 左右切换 -->

        <div class="left"><</div>

        <div class="right">></div>

        <!-- 焦点 -->

        <ul>

            <li class="active"></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

<!-- js部分 -->

    <script type="text/javascript">

        //1、找到container下的所有img标签,li标签,左右按钮

        var aImgs = document.querySelectorAll('.container img');

        var aLis = document.querySelectorAll('.container li');

        var btnLeft = document.querySelector('.container .left');

        var btnRight = document.querySelector('.container .right');

        //点击事件

        //点击按钮图片切换

        var index = 0;        //当前图片下标

        var lastIndex = 0;

        btnRight.onclick = function(){

            //记录上一张图片的下标

            lastIndex = index;

            //清除上一张图片的样式

            aImgs[lastIndex].className = '';

            aLis[lastIndex].className = '';

            index++;

            index %= aImgs.length;    //实现周期性变化

            //设置当前图片的样式

            aImgs[index].className = 'on';

            aLis[index].className = 'active';

        }

        //左边按钮类似

        btnLeft.onclick = function(){

            //记录上一张图片的下标

            lastIndex = index;

            //清除上一张图片的样式

            aImgs[lastIndex].className = '';

            aLis[lastIndex].className = '';

            index--;

            if (index < 0) {

                index = aImgs.length - 1;

            }

            //设置当前图片的样式

            aImgs[index].className = 'on';

            aLis[index].className = 'active';

        }

    </script>

然后打开你的浏览器看看成功没

sanbaoag
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现简单图片轮播效果
10-19
JavaScript实现简单图片轮播效果的知识点主要包括以下方面： 1. 图片轮播基本原理：图片轮播是一种常见的网页交互效果，主要用于展示多张图片。一般通过定时器或手动触发事件来改变显示图片的位置，从而实现图片的...
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 6万+
javascript dom 查找匹配
JS橱窗特效
凭澜偏偏
07-29 592
效果图 HTML 1、搭建外层div，设置定位 2、添加图片li便签 3、增加底部灰色div 4、灰色div上有进度条 <div id="box"> <ul id="boxtop"> <li><img src="图片/1.jpg"></li> <li><img src="图片/2...
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
DOM扩展之querySelector()和querySelectorAll()
weixin_45147894的博客
10-16 923
在原生的Javascript开发中，查找DOM往往是开发人员的第一个头疼的问题，原生的Javascript所提供的DOM选择方法并不多，仅仅局限于通过tag、name、id等方式来查找，这显然是远远不够的。如果要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。HTML5向Web API 新引入的querySelector()和querySelectorAll()这两个方法能更方便的从DOM选取元素，功能类似于jQuery的选择器。querySelector()和querySelect
js一些案例的使用
weixin_33798152的博客
02-26 83
2019独角兽企业重金招聘Python工程师标准>>> ...
一个简易的js图片轮播效果
10-19
这个简易的图片轮播实现虽然简单，但已经涵盖了基本的逻辑。实际应用中，还可以进一步完善，例如添加左右箭头控制、动态指示器、图片淡入淡出效果等。此外，对于大型项目，通常会使用成熟的库如Bootstrap的carousel...
原生js通过一行代码实现简易轮播图
10-16
原生JavaScript实现简易轮播图的知识点： 1. DOM操作：在给定的代码中，通过`document.querySelector`和`document.querySelector`查询到页面中的元素，进而对这些元素进行操作。此处用到了选择器`.wrap`来选中轮播...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
js简单轮播图实现，圆点随图片数量自动生成
08-22
在这个特定的场景中，我们关注的是如何使用JavaScript、CSS和HTML来实现一个简单的轮播图，并且具有动态生成小圆点的功能，这些圆点的数量会根据图片数量自动调整，同时它们还支持点击交互。 首先，我们需要在HTML...
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
qq_52799985的博客
08-09 1万+
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。
JS轮播图详解
weixin_75154342的博客
09-17 3849
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 5931
JS无缝滚动轮播图案例
简单实现js轮播图
zyzyzouyou的博客
10-09 1791
制作轮播图非常简单,首先我们先准备一下css样式. 1.需求说明 (1).点击上一张会将图片切换成上一张图片,点击下一张会切换成下一张图片. (2).当图片为第一张时无法点击上一张,当图片为第一张时无法点击下一张. (3).点击下面的圆形按钮直接跳转至对应序列的图片. (4)图片区域每隔一段时间间隔会自动切换到下一张 2.代码实现 1.图片之间的动画切换效果 在开始实现各种功能之前,我们需要知道的是每一个功能都伴随着 ...
三种js轮播实现方式详解（看一遍就会）
adminsir0的博客
08-29 1万+
js，轮播，轮播图，滚动，定位，滚动条，src，替换，定时器，
HTML轮播图简易实现
ChyoD1811的博客
08-11 5648
参考链接: https://www.w3cschool.cn/article/30703867.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>chyo-d</title> <!-- --> <!-- 仅用于学习交流, 搬运侵删 --> <!-- css样式 --> <.
JS实现网页轮播图
christmassss的博客
01-12 2014
轮播图也称为焦点图，是网页中比较常见的网页特效。鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图，轮播图也会自动播放图片。 鼠标经过，轮播图模块播放停止。
JavaScript完成轮播图
hongtaochi0464的博客
04-22 591
轮播图的思想 轮播图的思想,最简单的描述就是通过修改不可见框的left值,来实现滑动播放的效果。 这篇文章从三大步骤来写一下轮播图的实现。 (一)完成轮播图界面 (二)完成点击按钮切换图片的功能 (三)使用定时器完成轮播图的功能 完成轮播图的界面 不可见框 不可见框中应该把图片连成横向一排，像胶卷一样。 <body> <!-- #outer为不可见框部分 将所有的图片连成一排...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84097820的博客
04-05 514
点击这里即可免费获取，包括答案解析。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-mZyL1LyZ-1712252662271)]
使用JavaScript实现轮播图效果
本教程将介绍如何使用JavaScript（js）简单实现一个轮播图效果。 首先，我们需要创建HTML结构。在示例代码中，可以看到一个`<div>`元素被赋予类名`.banner`，它是轮播图的容器。在`.banner`内部，有一个绝对定位的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值