js实现轮播图(点击小图片切换大图片+自动切换)

article/2025/9/23 11:32:47

js实现轮播图(点击小图片切换大图片+自动切换)

实现效果如下：
点击小图可切换大图

点击小图切换大图和轮播标题，点击左右按钮大小图和轮播标题切换，鼠标进入清除定时器，鼠标移出恢复轮播

html代码如下：

<div class="switch fl" id="jsSwitch"><div class="switch-bottom"><div class="switch-l" ><img class="switch-img" id="jsSwitchL" src="images/lunbo-left.png" alt=""></div><ul class="switch-list" id="jsSwitchList"><li class="switch-item active"><img class="switch-min" src="images/lunbo-1-min.png "></li><li class="switch-item"><img class="switch-min" src="images/lunbo-2.png"></li><li class="switch-item"><img class="switch-min" src="images/lunbo-3.png"></li><li class="switch-item"><img class="switch-min" src="images/lunbo-4.png"></li><li class="switch-item"><img class="switch-min" src="images/lunbo-5.png"></li></ul><div class="switch-r fr" ><img class="switch-img" id="jsSwitchR" src="images/lunbo-right.png"></img></div></div><div class="switch-title"><p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p></div></div>

关键部分，js代码：

var num = 0;
var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png'];
var img = document.getElementById('jsSwitch');
var li = document.getElementById('jsSwitchList').children;
var left = document.getElementById('jsSwitchL');
var right = document.getElementById('jsSwitchR');
var info = document.getElementById('jsSwitchInfo');
var timer = null;//左右按钮
left.onclick = function(){num--;if (num == -1) {num = arrUrl.length - 1;}changeImg();
}
right.onclick = function(){num++;if (num == arrUrl.length) {num =  0;}changeImg();
}setTimeout(autoplay(),1000);//鼠标进入清除定时器，鼠标离开恢复
img.onmouseover = function(ev){clearInterval(timer);
};
img.onmouseout = autoplay;//点击小图片 换大图片
for (var i = 0; i < li.length; i++){li[i].index = i;li[i].onclick = function (ev) {num = this.index;changeImg();}
}//图片切换
function changeImg() {for (var i = 0; i < li.length; i++) {//判断当前li是否包含active类if(li[i].classList.contains('active')){li[i].classList.remove('active');}}//修改小图背景li[num].classList.add('active');//修改大图var currentImg = arrUrl[num];img.style.background = "url("+currentImg+") no-repeat center";//修改轮播标题info.innerText = arrInfo[num];
}
//定时器
function autoplay() {timer = setInterval(function () {num++;num %= arrUrl.length;changeImg();},2000);
}

以下是轮播全部代码，加上css代码，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body,html {width: 100%;height: 100%;}*{margin: 0;padding: 0;font-family: "microsoft yahei";font-weight: normal;}ol, ul, li {list-style: none;}a {text-decoration: none;color: #fff;}img {display: block;border: none;}.fl {float: left;}.fr {float: right;}.switch {position: absolute;width: 566px;height: 302px;left: -283px;margin-top: 100px;margin-left: 50%;background: url(images/lunbo-1.png) no-repeat;background-size: 566px 302px;}.switch-bottom {position: absolute;bottom: 0;width: 100%;height: 66px;background: rgba(0,0,0,0.65);}.switch-l,.switch-r {width: 45px;height: 66px;display: table-cell;vertical-align: middle;}.switch-r {margin-top: -46px;}.switch-img {margin-left: 16px;cursor: pointer;}.switch-img {margin-left: 10px;cursor: pointer;}.switch-list {float: left;width: 475px;height: 66px;margin-top: -66px;margin-left: 45px;}.switch-item {float: left;width: 95px;height: 66px;}.active {background-color: #fff;}.switch-min {margin: 5px;cursor: pointer;}.switch-title {position: absolute;bottom: 66px;width: 100%;height: 36px;background: rgba(0,0,0,0.4);}.switch-info {margin-top: 10px;margin-left: 8px;font-size: 16px;color: #fff;}</style>
</head>
<body><div class="switch fl" id="jsSwitch"><div class="switch-bottom"><div class="switch-l" ><img class="switch-img" id="jsSwitchL" src="images/lunbo-left.png" alt=""></div><ul class="switch-list" id="jsSwitchList"><li class="switch-item active"><img class="switch-min" src="images/lunbo-1-min.png "></li><li class="switch-item"><img class="switch-min" src="images/lunbo-2.png"></li><li class="switch-item"><img class="switch-min" src="images/lunbo-3.png"></li><li class="switch-item"><img class="switch-min" src="images/lunbo-4.png"></li><li class="switch-item"><img class="switch-min" src="images/lunbo-5.png"></li></ul><div class="switch-r fr" ><img class="switch-img" id="jsSwitchR" src="images/lunbo-right.png"></img></div></div><div class="switch-title"><p class="switch-info" id="jsSwitchInfo">北京市人民检察院第十五次代表大会召开</p></div></div><script src="jQuery.v1.11.1.min.js"></script><script>var num = 0;var arrUrl = ['images/lunbo-1.png', 'images/lunbo-2-max.png', 'images/lunbo-3-max.png', 'images/lunbo-4-max.png', 'images/lunbo-5-max.png'];var arrInfo = ['北京市人民检察院第十五次代表大会召开','北京市人民检察院','北京市人民会召开','十五次代表大会召开','北京市人民大会召开']var img = document.getElementById('jsSwitch');var li = document.getElementById('jsSwitchList').children;var left = document.getElementById('jsSwitchL');var right = document.getElementById('jsSwitchR');var info = document.getElementById('jsSwitchInfo');var timer = null;//左右按钮left.onclick = function(){num--;if (num == -1) {num = arrUrl.length - 1;}changeImg();}right.onclick = function(){num++;if (num == arrUrl.length) {num =  0;}changeImg();}setTimeout(autoplay(),1000);//鼠标进入清除定时器，鼠标离开恢复img.onmouseover = function(ev){clearInterval(timer);};img.onmouseout = autoplay;//点击小图片 换大图片for (var i = 0; i < li.length; i++){li[i].index = i;li[i].onclick = function (ev) {num = this.index;changeImg();}}//图片切换function changeImg() {for (var i = 0; i < li.length; i++) {//判断当前li是否包含active类if(li[i].classList.contains('active')){li[i].classList.remove('active');}}//修改小图背景li[num].classList.add('active');//修改大图var currentImg = arrUrl[num];img.style.background = "url("+currentImg+") no-repeat center";//修改轮播标题info.innerText = arrInfo[num];}//定时器function autoplay() {timer = setInterval(function () {num++;num %= arrUrl.length;changeImg();},2000);}</script>
</body>
</html>

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

相关文章

Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置

Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置

文章目录 begin!!!Solution1Solution2end begin vuetify carouse轮播图 的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个问题, 当屏幕同时显示着轮播图和其他内容时, 轮播图一自动切换, 页面就会自动跳转到轮播图的位置! !!! 紧急补充! 经过十个测…
阅读更多...
html图片的自动轮播js,js实现轮播图效果 纯js实现图片自动切换

html图片的自动轮播js,js实现轮播图效果 纯js实现图片自动切换

本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片； 2. 鼠标离开，恢复自动播放； 3. 点击下方中间几个小圆圈，也会自动切换图片； 源代码：document * {…
阅读更多...
使用CSS实现简单的图片切换（轮播图）

使用CSS实现简单的图片切换（轮播图）

使用CSS实现简单的图片切换（轮播图） 预览图如下： 目录 使用CSS实现简单的图片切换（轮播图）一:首先创建基本布局1：创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点；二：添加CSS样式1：为图片与圆点添加相应样式，使其正常显示；标题2：为图片和圆点添加…
阅读更多...
b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）

b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）

目录 目标效果&#xff1a; 重点原理&#xff1a; 1.用数组储存图片的数据 2.v-bind指令可以设置元素属性 e.g.src 语法 v-bind:属性名表达式 简写【实际开发常用】 :属性名表达式 3.v-show和v-if都可以切换元素的显示/隐藏状态 (1)频繁切换显示/隐藏的dom元素用 v…
阅读更多...
前端必备技能——轮播图（原生代码+插件）

前端必备技能——轮播图（原生代码+插件）

你是否在为页面平平无奇而烦恼&#xff1f; 你是否在为页面特效过于简单而苦恼&#xff1f; 你是否也在为同是前端小白而别人的页面却比自己的更加精美&#xff1f; 如果你看到这篇博客&#xff0c; 你就已经赢在起跑线啦~ 因为&#xff01;&#xff01;&#xff01; 这篇…
阅读更多...
轮播图的多种实现及原理

轮播图的多种实现及原理

【写在前面】 最近&#xff0c;在自己的项目中遇到了很多轮播图。 当然&#xff0c;这里的很多&#xff0c;并非数量多&#xff0c;指的是种类很多&#xff0c;即多种实现。 然后我觉得有不少小技巧&#xff0c;就决定写一篇文章讲解一下。 本篇主要内容&#xff1a; 1、轮播图…
阅读更多...
网页轮播图（详细版）

网页轮播图（详细版）

在网页中&#xff0c;我们经常会看到各种轮播图的效果&#xff0c;它们到底是怎样实现的呢&#xff1f;今天&#xff0c;我们就一起来看一下&#xff01;首先&#xff0c;我们需要准备若干张图片&#xff0c;在这里我准备了五张图片。 功能需求&#xff1a; 鼠标经过轮播图模块…
阅读更多...
轮播图 （无缝轮播图）

轮播图 （无缝轮播图）

1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候 一瞬间将ul拉回到0的位置 结构&#xff1a; <div class"wrap"><ul><li><img src"./image/t1.png" alt""></li><li><img src"./i…
阅读更多...
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播

JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播

效果一&#xff1a; 会自动进行轮播&#xff0c;当鼠标进入轮播图区域会停止轮播&#xff0c;点击左右箭头可以向前、向后进行切换图片 效果二&#xff1a; 这种效果比第一种效果简单&#xff0c;只要删除一些代码和修改一些样式即可。 实现原理 轮播图整体是放在ul里的&…
阅读更多...
oracle nvl函数 mysql_关于Oracle数据库中的nvl函数

oracle nvl函数 mysql_关于Oracle数据库中的nvl函数

以前将数据库查询结果展示在页面时&#xff0c;对于值null的字段&#xff0c;总是要判断下&#xff0c;如果为null&#xff0c;就显示ldquo;rdquo;&#xff0c;突然发现这个方法好笨 以前将数据库查询结果展示在页面时&#xff0c;对于值null的字段&#xff0c;总是要判断下&am…
阅读更多...
nvl 函数初识

nvl 函数初识

根据bi业务逻辑写sql时&#xff0c;在写法上有些区别&#xff0c;我习惯用case when &#xff0c;没有用过nvl所以试一试 bi某一列的业务如下&#xff1a; 我用sql分别试了case when 和 nvl &#xff0c;得到的结果是一致的 &#xff0c; 使用nvl函数的部分sql&#xff1a; …
阅读更多...
MySQL中创 NVL 函数

MySQL中创 NVL 函数

NVL的定义 NVL(s1, s2)&#xff1a;当s1为null时&#xff0c;返回s2&#xff0c;否则返回s1。 SELECT NVL(S, R) FROM DUAL; -- S SELECT NVL(NULL, R) FROM DUAL; -- RNVL方法的兼容策略 第一种&#xff1a;用 case when 代替 NVL&#xff0c;这种方法代码改造量较大&am…
阅读更多...
Xp 激活

Xp 激活

2019独角兽企业重金招聘Python工程师标准>>> 为了在xp下测试一键安装 支持多语言、多用户、多数据库、完美URL之路过秋天版博客发布[绝对有杀伤力的博客] 这两天为xp激活折腾了不少时间，在不断用ghost还原来还原去的，原因就是我有一张OEM版本的系统，正常方式的…
阅读更多...
Windows XP Professional With SP3 VOL[MSDN原版]+正版密钥

Windows XP Professional With SP3 VOL[MSDN原版]+正版密钥

Windows XP Professional简体中文版，这是一个中国人最熟悉不过的操作系统了（也有人称它一个最适合中国人的操作系统）。Windows XP 由于其出色的安全性、可靠性、易用性、高性能，使它获得了巨大的成功，直至今天它仍然是全球使用率最高的操作系统。 下面我们来说说…
阅读更多...
Windows.XP.x64.Pro.VOL(WINXP64位企业版)+正版序列号

Windows.XP.x64.Pro.VOL(WINXP64位企业版)+正版序列号

Windows.XP.x64.Pro.VOL(WINXP64位企业版)的设计初衷是&#xff1a;满足机械设计和分析、三维动画、视频编辑和创作以及科学计算和高性能计算应用程序等领域中需要大量内存和浮点性能的客户的需求。 专用技术应用程序的性能优势 64 位计算性能在汽车或飞机设计等领域体现出优势…
阅读更多...
如何查看XP系统的密匙

如何查看XP系统的密匙

最近有网友提问IT视窗小编说他家现在用的是xp系统&#xff0c;如何查看XP系统的密匙呢。其实查看XP系统密匙还是比较的简单的&#xff0c;小编就把查看XP系统密匙的两种方法都写成教程分享给大家。下面就是小编作为大神教你如何查看XP系统的密匙。希望大家都喜欢我的教程。 1、…
阅读更多...
IDEA 使用 README.md 介绍项目

IDEA 使用 README.md 介绍项目

IDEA 使用 README.md 介绍项目 文章目录 一.前言二.IDEA创建Markdown文件1.新建文件- 1.1.创建README.md文件 2.编辑md文件常用语法2.1.定义标题字号2.2. 文字样式2.2.1.文字斜体2.2.2.文字加粗2.2.3.文字删除线2.2.4. 引用文本 2.3.列表样式2.3.1 无符号列表2.3.2. 有符号列表…
阅读更多...
Github美化README

Github美化README

GITHUB中的MD文件 在github中新建一个仓库Create a new repository时会有一个README文件&#xff0c;其实为自述文件&#xff0c;介绍这个仓库的基本概要。这个文件也是MD文件&#xff0c;可用软件typora和vscode等md软件进行拟写就行了。也是下面介绍的第三种方法。 编写方式…
阅读更多...
README.md文件的作用及其文件内容的语法

README.md文件的作用及其文件内容的语法

README.md文件一般出现在项目的根目录下&#xff0c;其作用是对项目的主要信息进行描述。 如果一个项目你很长时间都没有动&#xff0c;突然你需要修改这个项目&#xff0c;那么通过README.md中对项目的描述能让你快速的再次上手&#xff1b; 或者别人拿到你的项目也能通过READ…
阅读更多...
原来Github上的README.md文件这么有意思——Markdown语言详解

原来Github上的README.md文件这么有意思——Markdown语言详解

转载请注明出处&#xff1a;http://blog.csdn.net/zhaokaiqiang1992 之前一直在使用github&#xff0c;也在上面分享了不少的项目和Demo&#xff0c;每次创建新项目的时候&#xff0c;使用的都是默认的README.md文件&#xff0c;也不曾对这个文件有过什么了解。但是在看到别人写…
阅读更多...
推荐文章

Copyright @ 2022~2023