JavaScript实现简单的图片轮播（通过点击左右焦点切换）

最新推荐文章于 2023-06-14 14:56:13 发布
最新推荐文章于 2023-06-14 14:56:13 发布
阅读量1.8k 收藏 14
点赞数 2
分类专栏： javascript 文章标签： javascript 图片轮播 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Makenzie/article/details/77471312
版权

最终实现效果图

这里写图片描述

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, ul, ol, li, img {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 490px;
            height: 270px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
        }

        .ad {
            width: 490px;
            height: 270px;
            overflow: hidden;
            position: relative;
        }

        #box img {
            width: 490px
最低0.47元/天 解锁文章
lettle_redhat
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js点击切换的轮播图
猿码互联
06-12 543
通过上述代码，我们实现了一个简单的点击切换的轮播图。其中，点击上一张按钮会切换到前一张图片，点击下一张按钮会切换到下一张图片。当切换到第一张图片时，再点击上一张按钮会切换到最后一张图片；当切换到最后一张图片时，再点击下一张按钮会切换到第一张图片。
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84091243的博客
04-08 817
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-1dn13Oug-1712560281045)][外链图片转存中…(img-EJot8hfC-1712560281046)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
JavaScript简单点击切换效果——轮播图
YIC020920的博客
12-03 3159
如何实现一个简单轮播图效果，通过点击切换图片？在JavaScript内容的实现是使用点击触发事件，改变src图片路径。直接展示JS代码哈！ 以下是大致的效果图>>>下面是我的HTML布局和css样式，还可以继续美化得更好看哦~ 感谢你的观看~
原生js 之 轮播图 （多功能）
qq_53165476的博客
06-14 667
1）右侧按钮点击，变量++，如果大于等于最后一张，则复原0。4）处理图片自动复原从头播放 (放到变量++后面，紧挨)2）左侧按钮点击，变量--，如果小于0，则复原最后一张。1）准备一个数组对象，里面包含详细信息 (素材包含)2）底部盒子背景颜色和文字内容会变换。3）小圆点随机一个高亮显示。3）鼠标经过暂停定时器。4）鼠标离开开启定时器。
用js实现点击切换+自动切换的轮播图
Free_Ya的博客
02-15 6759
用js实现点击切换+自动切换的轮播图 之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能。那么这些功能用js该如何实现呢？我们一起来看下吧！ (ps:博主在用js写轮播图的过程中,在网上查阅了很多篇文章,但是没有一篇是博主能彻底理解的[笨蛋QAQ]，所以这篇博客用来帮助像博主一样没有头绪,看不懂网上部分教程的伙伴)。 首先我们要明白轮播图的滑动原理,假设我们有装着3张图片的大盒子pic,那么我们可以采用定位或者浮动让这3张图片横向排成一排,那么大家想一想我们是不是
JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)
李某人的博客
12-15 1250
JS无缝轮播图
jQuery焦点图片轮播切换代码
04-09
2. **手动切换**：提供左右箭头按钮，用户点击可以向前或向后切换图片，增加交互性。 3. **动画效果**：通过CSS3或jQuery的动画方法实现图片的淡入淡出、滑动等切换效果，使页面更具视觉吸引力。 4. **指示器**：...
基于JavaScript实现焦点图轮播效果
12-02
【基于JavaScript实现焦点图轮播效果】 焦点图轮播是一种常见的...以上代码实现了基本的焦点图轮播功能，包括图片自动切换、底部指示点和箭头切换。根据实际需求，还可以添加自动轮播、触摸滑动、过渡效果等增强功能。
jQuery焦点图片轮播切换代码.zip
07-11
jQuery焦点图片轮播切换代码是一种常见的网页动态效果，用于展示一组图片并自动或手动进行循环播放，常用于网站的首页、产品展示等区域，以吸引用户的注意力。在本压缩包中，"jiaoben5070"可能是示例代码或者一个...
jQuery手风琴图片轮播切换
04-07
图片轮播通常由一系列图片组成，通过定时或用户触发来自动或手动切换显示的图片。jQuery提供了多种实现轮播的方法，如使用`.fadeIn()`和`.fadeOut()`实现淡入淡出效果，或者使用`.slideToggle()`实现滑动切换。例如...
jQuery带标题的焦点图片轮播切换代码
11-13
在这个主题中，“jQuery 带标题的焦点图片轮播切换代码”涉及到如何利用 jQuery 实现一个具有标题功能的图片轮播效果。 首先，我们需要理解基本的 HTML 结构，这通常包括一个容器元素来承载轮播，每个图片和对应的...
js控制div左右切换带左右箭头
11-05
js控制div左右切换带左右箭头
用 JS 点击左右按钮 使图片切换
weixin_33995481的博客
04-27 1063
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; ..
html实现图片轮播切换箭头,Vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）_鹿岛_前端开发者...
weixin_39785723的博客
06-07 2107
1.效果图如下2.indicator-position="none" :autoplay="false"> class="deleteStyle"> {{items.b_nickname}}3.修改的样式.el-carousel__item.el-carousel__item--card.is-in-stage {text-align: center;}/*修改高度*/....
JS图片切换
linqunbin的博客
05-24 1295
<!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-U...
带左右切换的简单的轮播
Jovan的博客
06-04 1097
前言 ：好久没有写东西了，最近帮朋友写了一个官网的静态页面，才发现，自己写代码的速度又慢了，10个页面写了一天，所以自己还是要多学习，多学习，多学习，和看到这篇文章的各位共勉！
原生js轮播图--点击左右轮播几张图片
weixin_43221240的博客
12-23 509
自己尝试用原生js写，但是比较麻烦，自己封装了my$方法，最后还是用了jquery 想法： 1.外面的盒子有一个可视区域，里面的盒子大，点击移动(运用了定位，每次点击left改变) 2.当到达一定条件时，点击事件不可用 3.给ul加过渡属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
焦点图片切换效果
weixin_30549657的博客
06-05 275
css代码： 代码 /* Reset style */* { margin:0; padding:0; word-break:break-all; }body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }h1, h2, h3, h4, h5, h6 { font-size:1em...
JS 首页图片简单切换 焦点图代码
jiidd的专栏
05-13 662
    imgUrl1="images/img01.jpg";//图片路径    imgtext1="11"    imgLink1=escape("链接");    //imgLink1="";        imgUrl2="images/img02.jpg";    imgtext2="22"    imgLink2=escape("");    //imgLin
运用JavaScript制作图片的滚动和轮换，通过点击左右两侧的箭头可以实现焦点图按顺序切换，当鼠标滑动到下方的小圆点时，也可以实现图片的切换效果，通过for循环及条件语句的使用来制作一款多功能的焦点图轮播效果。实现五张图的轮播
06-07
可以使用以下代码实现五张图片的轮播： HTML代码： ``` <div class="slideshow-container"> <div class="slideshow"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div> <a class="prev">❮</a> <a class="next">❯</a> <div class="dots-container"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> ``` CSS代码： ``` .slideshow-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; } .slideshow { display: flex; overflow: hidden; } .slideshow img { width: 100%; height: auto; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: bold; color: white; cursor: pointer; z-index: 1; } .prev { left: 0; } .next { right: 0; } .dots-container { display: flex; justify-content: center; margin-top: 10px; } .dot { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: gray; cursor: pointer; } .active-dot { background-color: white; } ``` JavaScript代码： ``` var slideshow = document.querySelector('.slideshow'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var dots = document.querySelectorAll('.dot'); var index = 0; var timer; function showSlide(n) { if (n < 0) { index = slideshow.children.length - 1; } else if (n >= slideshow.children.length) { index = 0; } else { index = n; } slideshow.style.transform = 'translateX(-' + index + '00%)'; for (var i = 0; i < dots.length; i++) { dots[i].classList.remove('active-dot'); } dots[index].classList.add('active-dot'); } function autoSlide() { timer = setInterval(function() { showSlide(index + 1); }, 3000); } prev.addEventListener('click', function() { clearInterval(timer); showSlide(index - 1); autoSlide(); }); next.addEventListener('click', function() { clearInterval(timer); showSlide(index + 1); autoSlide(); }); for (var i = 0; i < dots.length; i++) { dots[i].addEventListener('click', function() { clearInterval(timer); showSlide(Array.prototype.indexOf.call(dots, this)); autoSlide(); }); } autoSlide(); ``` 注释： - `slideshow`: 轮播图容器 - `prev`, `next`: 左右箭头 - `dots`: 小圆点容器 - `index`: 当前显示图片的索引 - `timer`: 自动轮播的计时器 `showSlide`函数用于显示指定索引的图片，同时更新小圆点的选中状态。`autoSlide`函数用于自动轮播，每隔3秒切换到下一张图片。点击左右箭头或小圆点时，先清除自动轮播的计时器，然后调用`showSlide`函数切换到指定图片，最后重新启动自动轮播计时器。最后调用`autoSlide`函数启动自动轮播。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值