轮播图制作
效果: 轮播图自动自动切换 点击页数时候跳转到相应页数;
一、html部分:
<body>
<img src="img/1.jpg" id="li" alt="">
<input type="button" value="上一页" onclick="up(this)">
<input type="button" value="1" onclick="change(this)">
<input type="button" value="2" onclick="change(this)">
<input type="button" value="3" onclick="change(this)">
<input type="button" value="4" onclick="change(this)">
<input type="button" value="5" onclick="change(this)">
<input type="button" value="6" onclick="change(this)">
<input type="button" value="7" onclick="change(this)">
<input type="button" value="8" onclick="change(this)">
<input type="button" value="下一页" onclick="next(this)">
</body>
二、Js部分
var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg"];
//定义一个变量记录当前是哪张图片
var index = 0;
var dingshi;
//点击按钮时候切换页面方法
function change(node) {
//先获取该节点的value值
// var val=node.value;
index = node.value - 1;
//切换图片
document.getElementById("li").src = imgs[index];
}
//下一页
function next() {
if (index == imgs.length - 1) {
//让下标为0即为第一张图片
index = 0;
} else {
index++;
}
document.getElementById("li").src = imgs[index];
}
//上一页
function up() {
//如果是第一页
if (index == 0) {
//让下标为即为最后一张图片
index = imgs.length - 1;
} else {
index--;
}
document.getElementById("li").src = imgs[index];
}
//开始轮播
function start() {
dingshi = setInterval(next, 2000);
}
//停止轮播
function stop() {
clearInterval(dingshi);
}
//设置定时器
window.onload = function () {
dingshi = setInterval(next, 2000);
var imgg = document.getElementById("li");
//当鼠标放到图片上取消定时器
imgg.onmouseover = stop;
//当鼠标放到图片上设置定时器
imgg.onmouseout = start;
}
欢迎各位大神指点和评论;
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· Vue3状态管理终极指南：Pinia保姆级教程