JS——【案例】图片轮播图(自动轮播/手动点击/悬停显示)[技术栈:html、css、JavaScript]

article/2025/11/10 9:05:37

1、效果：

在这里插入图片描述

2、需求：

在这里插入图片描述

3、代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片轮播图(自动/手动)</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.main {width: 700px;margin: auto;background: #000;}.slides {height: 320px;position: relative;}.slides ul li {/* display: none; */position: absolute;top: 0;left: 0;opacity: 0;/* 这里实现淡入淡出的关键 */transition: all .3s;}.slides li.active {/* display: block; */opacity: 1;}.slides .extra {width: 700px;height: 53px;line-height: 53px;position: absolute;bottom: 0px;background-color: rgba(0, 0, 0, 0.8);z-index: 10;}.slides .extra h3 {width: 82%;margin: 0;margin-right: 20px;padding-left: 20px;color: #98E404;font-size: 28px;float: left;font-weight: 500;font-family: "Microsoft Yahei", Tahoma, Geneva;}.slides .extra a {width: 30px;height: 29px;display: block;float: left;margin-top: 12px;margin-right: 3px;background-image: url(./assets/icon_focus_switch.png);}.slides .extra .prev {background-position: 0 0;}.slides .extra .prev:hover {background-position: -30px 0;}.slides .extra .next {background-position: -60px 0;}.slides .extra .next:hover {background-position: -90px 0;}.indicator {padding: 10px 0;}.indicator ul {list-style-type: none;margin: 0 0 0 4px;padding: 0;overflow: hidden;}.indicator ul li {position: relative;float: left;width: 60px;margin: 0 4px 0 5px;text-align: center;cursor: pointer;}.indicator li img {display: block;border: 0;text-align: center;width: 60px;}.indicator li .mask {width: 60px;height: 60px;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.4);}.indicator li .border {display: none;width: 54px;position: absolute;bottom: 0;left: 0;z-index: 20;border: 3px solid #98E404;}/* li里面的mask 和 border 刚开始都是显示的 *//* 我们写一个样式css */.indicator .active .mask {display: none;}.indicator .active .border {display: block;}</style>
</head><body><div class="main"><div class="slides"><ul><li class="active"><a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息"></a></li><li><a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息"></a></li></ul><div class="extra"><h3>第1张图的描述信息</h3><a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a></div></div><div class="indicator"><ul><li class="active"><img src="assets/s_01.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_02.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_03.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_04.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_05.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_06.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_07.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_08.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_09.jpg"><span class="mask"></span><span class="border"></span></li><li><img src="assets/s_10.jpg"><span class="mask"></span><span class="border"></span></li></ul></div></div></body>
<script>let lis = document.querySelectorAll('.indicator li') //获取元素(小图片小li)let piclis = document.querySelectorAll('.slides ul li') //大图片中小lilet text = document.querySelector('.extra h3') //获取当前图片描述信息元素let next = document.querySelector('.next') //获取点击按钮所在位置元素let prev = document.querySelector('.prev') //获取点击按钮所在位置元素let main= document.querySelector('.main') //获取大盒子元素//需求1：//鼠标经过图片，当前图片高亮，其余图片变暗;——>移除、添加类for (let i = 0; i < lis.length; i++) {  lis[i].addEventListener('mouseenter',function(){ //给元素绑定事件document.querySelector('.indicator .active').classList.remove('active') //选出高亮的图片移除类this.classList.add('active')  //再为当前图片添加类//需求2：//大图片跟随小图片变化(若想要过渡的效果，可使用opacity(不透明度)效果，css淡入淡出效果，也是添加移除类实现)//大图片显示隐藏，实则也是((大图片盒子中小li的))添加移除类document.querySelector('.slides ul .active').classList.remove('active') //选出唯一active,删除类piclis[i].classList.add('active') //对应序号的li添加active类//图片描述信息跟随改变text.innerHTML = `第${i + 1}张图的描述信息`//鼠标经过哪个小li 他的索引号就是iindex = i })}//需求3：点击按钮播放效果(右侧按钮):（与鼠标经过无关，应放在for外面;//但上下一张图片会受鼠标经过的图片影响，故又放在鼠标经过事件后面）let index = 0 //定义记录图片索引的全局变量next.addEventListener('click',function(){index++//每次点击大、小图片都要随之变化//小图片if(index > 9){index = 0}   //可写成index % lis.lengthcommon()//调用显示大小图片函数})//需求4：点击按钮播放效果(左侧按钮)//同理左侧按钮只需吧右侧按钮改成减- 即可 prev.addEventListener('click',function(){index--//每次点击大、小图片都要随之变化//小图片if(index < 0){index = lis.length - 1}  common()//调用显示大小图片函数})//需求5://把左右侧按钮大量相同的操作代码封装成函数调用即可function common(){  //显示大小图片函数document.querySelector('.indicator .active').classList.remove('active') //选出高亮的图片移除类lis[index].classList.add('active') //添加类//大图片document.querySelector('.slides ul .active').classList.remove('active') //选出唯一active,删除类piclis[index].classList.add('active') //对应序号的li添加active类//图片描述信息跟随改变text.innerHTML = `第${index + 1}张图的描述信息`}//需求6：// 定时器，自动播放；其实相当于点击了右侧按钮，此时调用right.click()let timer = setInterval(function(){//自动调用右侧按钮的点击事件next.click()},1000)//需求7：// 鼠标经过定时器停止(此处设置经过大盒子都停止)main.addEventListener('mouseenter',function(){clearInterval(timer)})//  鼠标离开时定时器开始main.addEventListener('mouseleave',function(){timer = setInterval(function(){ //此处不能重新let定义,函数内定义为局部变量定时器停止找不到此定时器//自动调用右侧按钮的点击事件next.click()},1000)})</script></html>

http://chatgpt.dhexx.cn/article/rFnSgetg.shtml

相关文章

如何用JS实现轮播图！

如何用JS实现轮播图！

轮播图 1.思路与写法 1.1 首先我们拿到一个关于轮播图的实例我们要分析里面的功能&#xff0c;将其模块化处理&#xff1b; 1.2 首先需要实现的是自动轮播的效果&#xff1a; 1.2.1需要用到运动函数框架&#xff0c;startMove()&#xff0c;还需要用到定时器&#xff0c;这里…
阅读更多...
javascript图片轮播技术动态实现

javascript图片轮播技术动态实现

我们经常会在网页中见到轮播的图片&#xff0c;如京东主页面中图片自动更换。我们在这里对这一技术进行实现&#xff0c;主要能够使图片自动进行轮播&#xff0c;数字标签随着图片一同更换&#xff0c;鼠标移动到数字标签上&#xff0c;相应的图片停留&#xff0c;鼠标在整个图…
阅读更多...
JS——实现轮播图（完整功能）

JS——实现轮播图（完整功能）

没有把细节单拎出来讲&#xff0c;但基本上所有重要步骤都在代码里边备注解释了~~ 个人认为比较难的地方就是&#xff1a; 怎么在自动播放到最后一张图片后&#xff0c;瞬间切换回第一张图片重新播放&#xff1f; 这里采用了比较取巧的方法&#xff0c;比如我用了四张例图&a…
阅读更多...
Js实现图片点击切换与轮播

Js实现图片点击切换与轮播

Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html><head> <meta charset"UTF-8"><title></title><script type"text/javascript">window.onloadfunction(){var btn1document.getElementById("…
阅读更多...
原生JS-实现无限图片轮播

原生JS-实现无限图片轮播

实现思路&#xff1a; 一、布局部分&#xff1a; 1、采用div>ul>li>img布局&#xff0c;来展示轮播的图片banner; 2、采用div>>ul>li>a标签&#xff0c;来显示小红点&#xff1b; 整个布局入下图所示&#xff1a;途中的&#xff0c;图中的第一个li和最后一…
阅读更多...
HTML网页js超简单实现图片轮播

HTML网页js超简单实现图片轮播

其实实现图片轮播很简单 1. 创建一个js文件&#xff08;自己会的博主不多说&#xff09; 2. 在html文件引入js文件 引入代码&#xff1a; <script type"text/javascript" src"js/sth.js"></script> 注意&#xff1a;sth是自己的js文件名自行…
阅读更多...
JS实现图片轮播（方法一）

JS实现图片轮播（方法一）

效果如下&#xff1a; 下面是具体的实现代码&#xff1a; HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…
阅读更多...
js实现图片自动轮播

js实现图片自动轮播

今天有人问我这个问题&#xff0c;我就顺便把这个记下来&#xff0c;分享给大伙。 如图&#xff0c;就是图片自己轮播&#xff0c;并且图中中下方的白点也发生变化&#xff0c;图片到哪&#xff0c;白点就到哪&#xff0c;就直接上代码了 <!DOCTYPE html PUBLIC "-//W3…
阅读更多...
js图片轮播效果实现代码

js图片轮播效果实现代码

这篇文章主要介绍了js图片轮播效果实现代码&#xff0c;文章对每一步进行了详细阐述&#xff0c;标注注意事项&#xff0c;为顺利实现js图片轮播效果做好铺垫&#xff0c;对轮播效果感兴趣的朋友可以参考一下 首先给大家看一看js图片轮播效果&#xff0c;如下图 具体思路&#…
阅读更多...
Javascript实现图片轮播效果。

Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。 思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。 效果图如下。具有以下功能：1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。 话不多说，代码如下。 首先肯定是…
阅读更多...
JavaScript 实现图片轮播

JavaScript 实现图片轮播

今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述&#xff1a; 使用JS实现轮播的原理是这样的&#xff1a; 假设初始的情况&#xff0c;下图一个网格代表一个图&#xff0c;初始时&#xff0c;显示1 &#xff1a; 当进行一次轮播后&#xff0c;显示变为下图 显示2&…
阅读更多...
JavaScript实现图片自动轮播

JavaScript实现图片自动轮播

目录 1.轮播图片 1.1图片切换功能 1.2定时器功能 1.3图片自动轮播实现 2.页面定时弹出广告 2.2 技术分析 2.3步骤分析 2.4代码实现 3.表单校验 3.1需求分析 3.2技术分析 3.3校验邮箱 3.3.1从外部引入js文件&#xff08;一些匹配函数&#xff09; JS&#xff1a;是…
阅读更多...
html js简单实现图片轮播功能

html js简单实现图片轮播功能

本章记录简单的图片轮播功能&#xff0c;需要html、js和css共同实现1、html文件<!DOCTYPE html> <html><head><meta charset"UTF-8"><link rel"stylesheet" type"text/css" href"css/text.css"/><sc…
阅读更多...
js轮播图 最简单代码

js轮播图 最简单代码

js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图&#xff0c;用最简单的代码实现&#xff1a; 首先&#xff0c;建立一个HTML文件&#xff0c;插入img标签&#xff0c;这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id&#xff0c;并且定…
阅读更多...
html+css+js实现图片轮播

html+css+js实现图片轮播

html代码 原理是通过 overflow: hidden; 将ul的宽带属性设置为轮播图片的个数*100%&#xff0c;从而这个属性来使得div中只充斥 一个li&#xff1b;通过js让margin-left的值改变来实现图片轮播&#xff1b; <body><div class"warp"><div class"…
阅读更多...
JS实现图片轮播效果（自动和手动）

JS实现图片轮播效果（自动和手动）

本次轮播效果图如下&#xff1a; 具有以下功能&#xff1a;1.自动播放&#xff08;鼠标进入显示区域时停止播放&#xff09; 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况&#xff0c;所以有需要的直接下载整个工程&#xff1a;JS实现图片轮…
阅读更多...
JS实现轮播图

JS实现轮播图

在css使用动画可以实现简单的轮播图&#xff0c;但如今已经学习了JS&#xff0c;用JS来写轮播图更加方便快捷。今天就带着大家来实现轮播图。话不多说我们直接看代码&#xff1a; 这是css部分&#xff0c;进行了简单的样式操作接下来就进入js阶段&#xff1a; 运行结果如下&…
阅读更多...
JS实现轮播图（一看就懂逻辑清晰）

JS实现轮播图（一看就懂逻辑清晰）

轮播图有很多种实现方法&#xff0c;这是其中一种最清晰的方法。思路很清晰&#xff0c;代码很简单&#xff0c;欢迎大佬多指教。 先来看下效果图&#xff0c;嫌麻烦就不用具体图片来实现了&#xff0c;主要是理清思路。&#xff08;自动轮播&#xff0c;左右按钮切换图片&…
阅读更多...
JS实现轮播图的三种简单方法。

JS实现轮播图的三种简单方法。

Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一&#xff0c;通过更改图片的src来实现该效果&#xff0c;首先需要将图片命名格式统一比如pic01.jpg&#xff0c;pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下&…
阅读更多...
JS实现轮播图的三种简单方法

JS实现轮播图的三种简单方法

01、JS轮播图实现1 实现思路这可能是轮播图最简单点的实现之一&#xff0c;通过更改图片的src来实现该效果&#xff0c;首先需要将图片命名格式统一比如pic01.jpg&#xff0c;pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下&…
阅读更多...
推荐文章

Copyright @ 2022~2023