HTML实现图片切换

最新推荐文章于 2024-04-24 21:17:45 发布
最新推荐文章于 2024-04-24 21:17:45 发布
阅读量5.2k 收藏 46
点赞数 5
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58144335/article/details/125552626
版权

代码实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="../swiper8/swiper-bundle.min.css" rel="stylesheet"/>

    <script src="../swiper8/swiper-bundle.min.js" type="text/javascript"></script>

    <style>

        .swiper{

            width: 600px;

            height: 400px;

        }

        img{

            width: 400px;

            height: 200px;

            margin: 0 auto;

            position: relative;

            top:50%;

            left: 50%;

            transform: translate(-50%,-50%);

        }

    </style>

</head>

<body>

    <div class="swiper">

        <div class="swiper-wrapper">

            <div class="swiper-slide">

                <img src="../动画/图片排列/m1.jpg" alt="">

            </div>

            <div class="swiper-slide">

                <img src="../动画/图片排列/m2.jpg" alt="">

            </div>

            <div class="swiper-slide">

                <img src="../动画/图片排列/m3.jpg" alt="">

            </div>

        </div>

        <!-- 分页器 -->

        <div class="swiper-pagination"></div>

        <!-- 导航按钮 -->

        <div class="swiper-button-prev"></div>

        <div class="swiper-button-next"></div>

        <!-- 滚动条 -->

        <div class="swiper-scroller"></div>

    </div>

</body>

<script>

    var mySwiper = new Swiper(".swiper",{

        direction:"horizontal",

        loop:true,

        pagination:{

            el:".swiper-pagination"

        },

        navigation: {

            prevEl:".swiper-button-prev",

            nextEl:".swiper-button-next"

        },

        scrollbar:{

            el:".swiper-scroller"

        },

    })

</script>

</html>

效果图：

 

大学生努力学习
关注
  • 5
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在html中三个图片切换,轻松搞定网页中的图片切换
weixin_34646820的博客
06-09 1万+
生活中经常看到，像新浪等很多门户网站的首页都有滚动图片的展示，如下图所示：某网站首页滚动切换图片这样不但可以减少文字的单一、乏味，而且可以直观内容，更好的吸引用户。那在我们做软件系统时，是否也可以首页中加入滚动图片呢？答案是肯定的。今天就给大家介绍三种类似的展现方式。实现方式这些滚动展现方式，主要用到了我们平常学习到的网页HTML、样式CSS和JavaScript等知识。在具体实现时，需要结合实际...
html+css+jquery实现轮播图自动切换、左右切换、点击切换
打代码是一天，不打代码也是一天
02-20 3290
代码如下： 效果如下图： 需要引入jquery； 定时器实现4s自动切换轮播图 步骤3：左右切换，左右点击事件手动切换 实现代码如下： 到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。优化后，自动切换和左右切换js代码如下： 步骤4：点击切换，点击圆点事件手动切换 代码如下： html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：
用纯CSS+HTML实现图片点击切换背景
清砾的博客
09-10 9226
1.实现了点击圆图片，切换对应的背景图片 2.主要技术：css3的背景设置，边框圆角，定位，盒模型，选择器，浮动，锚点，由:target实现切换 一、效果图如下 二、代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片背景切换</title> <link rel="shortcut icon" type="image/x-ic
如何使用html+CSS+JS实现图片轮播
最新发布
m0_74220769的博客
04-24 144
【代码】如何使用html+CSS+JS实现图片轮播。
html+js实现切换图片（点击按钮切换）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-02 1万+
效果图 实现点击按钮切换图片的效果 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca..
html5 bootstrap图片垂直滑动切换幻灯片特效.zip
07-11
这是一款带有上下箭头控制，使用bootstrap的布局实现的幻灯片切换代码，jQuery图片垂直滑动切换幻灯片特效。 引入js文件 [removed][removed] [removed][removed] [removed][removed] [removed][removed]
web前端炫酷实用的HTML5应用和jQuery插件
weixin_33985679的博客
06-10 441
又开始了新的一天，我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件，作为前端开发者来说，这些资源可以帮助你在项目开发上派上用场。下面一起来看看这些炫酷而实用的HTML5应用和jQuery插件吧。 1、jQuery/CSS3图片洗牌切换动画特效 这是一款基于jQuery和CSS3的图片动画特效，该图片动画是洗牌的效果，我们只需点击切换按钮，即可一张张切换图片。另外，如果你长按住按...
JavaScript html js图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
黑色头发
03-20 213
新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative， 滑动对象会设置为绝对定位： [code="js"]var p = CurrentStyle(this._...
基于Bootstrap框架实现图片切换
08-31
基于Bootstrap框架实现图片切换 Bootstrap是一款流行的前端框架，广泛应用于Web开发中。图片切换是Bootstrap框架中一个常见的特性，通过Bootstrap框架可以轻松地实现图片切换功能。本文将详细介绍基于Bootstrap框架...
jquery手风琴实现图片切换
06-10
在压缩包中，"juqery手风琴实现图片切换"文件可能包含了完整的HTML、CSS和JavaScript代码，供你参考和学习。通过实践这个案例，你不仅能掌握jQuery的基本用法，还能了解到如何结合CSS和JavaScript实现动态交互效果。
JS实现图片切换特效
10-15
在JavaScript中实现图片切换特效是一项常见的任务，尤其在网页设计和开发中。下面将详细讲解这个过程中的关键知识点，以及如何使用JS实现图片切换。 首先，我们要了解的是`window.onload`事件。这是一个JavaScript...
HTML5响应式多种切换效果轮播大图切换js特效代码.zip
07-11
特效简介： HTML5响应式多种切换效果轮播大图切换js特效代码
HTML5+CSS3实现的图片左右切换弹性动画特效源码
08-31
点击左右按钮即可将图片进行弹性切换，图片在被切换时，都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用，看上起十分大气。
HTML5实现CSS滤镜图片切换
04-06
在本案例中，我们探讨的是如何使用HTML5与CSS结合来实现一种独特的图片切换效果——“CSS滤镜图片切换”，这是一种具有不同视觉效果的百叶窗切换特效。 首先，我们要理解HTML5中的`<img>`标签，这是用来在网页上...
ES6实现图片切换特效代码
10-15
在CSS部分，我们看到了一些定义样式的选择器，这些样式将用于实现图片切换的动画效果。例如： 1. `.__Img__container .__Img__img-container figure`: 这个选择器定义了单个图片容器的样式，包括宽度、高度、定位...
html 轮播图左右切换代码,js实现左右轮播图
weixin_34138397的博客
06-09 8429
本文实例为大家分享了js实现左右轮播图的具体代码，供大家参考，具体内容如下我的轮播图功能有：自动播放、点击焦点切换和点击左右按钮切换效果图：自动轮播点击焦点切换点击左右按钮切换注意：本文用带背景颜色的li标签指代图片，有需要的话可以将图片插入li标签内思路：基础布局和css样式(1) 给盛放要轮播的图片的盒子绝对定位js中的代码(2) 复制第一张图片放在盒子最后，复制最后一张图片放在盒子最前，以保...
HTML 中添加视频
qq_34870529的博客
11-21 1346
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html照片自动切换效果模板,html5教你做炫酷的碎片式图片切换 (canvas)
weixin_42471893的博客
05-31 1003
前言老规矩，先上源码。图片区域是可以点击的，动画会从点击的位置开始发生。本来这个效果是我3年前做的，只是当是是用无数个 div 标签完成的，性能比较成问题，在移动端完全跑不动。最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现，无奈功力不够只能放弃，最终选择用 canvas 来完成了。准备工作1. 首先准备相同尺寸的图片若干张，本例中图片尺寸均为 1920 * 1080(注意：这...
仅用css+HTML实现图片切换效果
热门推荐
东东不在家
04-08 4万+
备注：最好在firefox或chrome运行，在IE效果没出现  -。- 效果图： -----images.html----- How to Create An Image Slider With Pure CSS3 CSS3 Image Slider
html实现图片切换功能
06-03
要实现图片切换功能，可以使用HTML和JavaScript来完成。以下是一种常见的实现方式： 首先，在HTML中需要定义一个容器，用来显示图片。可以使用`<img>`标签来显示图片，例如： ```html <div id="image-container"> <img src="image1.jpg" alt="Image 1"> </div> ``` 接下来，需要定义一个按钮，用来触发切换图片的事件。可以使用`<button>`标签来定义按钮，例如： ```html <button onclick="changeImage()">切换图片</button> ``` 在按钮中使用`onclick`属性来指定点击事件触发的JavaScript函数。在这个例子中，我们指定了`changeImage()`函数来处理点击事件。 最后，实现`changeImage()`函数来切换图片。可以使用JavaScript来实现，例如： ```javascript function changeImage() { var imageElement = document.querySelector('#image-container img'); var currentImage = imageElement.getAttribute('src'); var newImage = (currentImage === 'image1.jpg') ? 'image2.jpg' : 'image1.jpg'; imageElement.setAttribute('src', newImage); } ``` 在这个函数中，我们首先获取图片元素，然后获取当前显示的图片路径。根据当前图片的路径，判断应该显示哪张图片。最后，更新图片元素的`src`属性来切换图片。 完整的HTML代码如下： ```html <!DOCTYPE html> <html> <head> <title>图片切换</title> </head> <body> <div id="image-container"> <img src="image1.jpg" alt="Image 1"> </div> <button onclick="changeImage()">切换图片</button> <script> function changeImage() { var imageElement = document.querySelector('#image-container img'); var currentImage = imageElement.getAttribute('src'); var newImage = (currentImage === 'image1.jpg') ? 'image2.jpg' : 'image1.jpg'; imageElement.setAttribute('src', newImage); } </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大学生努力学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值