本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<!--轮播-->
<style>
.carousel {
width: 648px;
height: 400px;
margin: 0 auto;
text-align: center;
position: absolute;
left: 24%;
/*border: 1px solid red;*/
}
.inner {
/*border: 12px solid blue;*/
width: 648px;
height: 400px;
position: absolute;
}
.inner-img {
width: 200px;
height: 500px;
display: none;
/*position: absolute;*/
position: relative;
/*top:0;*/
/*left:0;*/
/*z-index:1000;*/
}
.inner-img.active {
display: block;
}
.leftBtn,
.rightBtn {
position: absolute;
width: 40px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
/*近乎透明色*/
font-size: 30px;
color: #fff;
text-align: center;
line-height: 60px;
cursor: pointer;
display: none;
}
.leftBtn {
left: 5px;
top: 170px;
}
.rightBtn {
/*right:5px;*/
left: 603px;
top: 170px;
}
.carousel ul {
position: absolute;
/*left:20px;*/
padding-left: 228px;
bottom: 10px;
/*z-index: 999;*/
list-style: none;
width: 200px;
height: 20px;
}
.carousel ul .page {
float: left;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 18px;
/*变成圆形*/
background: black;
margin-right: 6px;
/*距离6个px单位*/
color: #fff;
font-size: 14px;
/*text-align: center;*/
cursor: pointer;
}
.carousel ul .page.active {
background-color: red;
}
.carousel p {
/*float: left;*/
margin-top: -360px;
margin-right: -600%;
color: black;
text-decoration: none;
list-style: none;
}
</style>
</head>
<body>
<!--轮播-->
<p class="carousel">
<p class="inner">
<a href="#" class="inner-img active"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCxe0O.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCxl9A.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCxJnf.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCxtHS.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCxaNQ.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCx6BT.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCxW4J.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<a href="#" class="inner-img"><img src="/static/imghwm/default1.png" data-src="https://s2.ax1x.com/2019/11/06/MCx43R.jpg" class="lazy" alt="图片加载中" style="max-width:90%" style="max-width:90%"></a>
<p class="leftBtn"><</p>
<!--左按钮-->
<p class="rightBtn">></p>
<!--右按钮-->
</p>
<ul>
<li class="page active">1</li>
<li class="page">2</li>
<li class="page">3</li>
<li class="page">4</li>
<li class="page">5</li>
<li class="page">6</li>
<li class="page">7</li>
<li class="page">8</li>
</ul>
</p>
</body>
<script>
var carousel = document.getElementsByClassName('carousel')[0], //获取carousel的class类
// 获取所有包含图片的链接
innerImg = document.getElementsByClassName('inner-img'),
// 获取左右按钮
btnL = document.getElementsByClassName('leftBtn')[0],
btnR = document.getElementsByClassName('rightBtn')[0],
// 获取分页器
page = document.getElementsByClassName('page'),
num = 0; // 声明变量 初始图片为第一张0
// 声明时间控制函数
var timer = setInterval(moveR, 2500); //调用moveR 时间间隔2.5s
// 图片向右轮播
function moveR() {
num++; // 变量每3000毫秒递增一次,图片向右轮播
// 如果是最后一张图片的时候从0开始显示
if(num == innerImg.length) {
num = 0;
}
move();
};
// 图片向左轮播
function moveL() {
num--; // 每调用一次moveL(),变量递减一次
// 如果是第一张图片，则从最后一张图片开始显示
if(num == -1) {
num = innerImg.length - 1;
};
move();
} // 图片切换
function move() { // 把所有的innerImg隐藏和page背景全部变成黑色
for(var i = 0; i < innerImg.length; i++) {
innerImg[i].style.display = 'none';
page[i].style.background = 'black';
}
// 把当前num下标的innerImg显示和page背景变成red
innerImg[num].style.display = 'block';
page[num].style.background = 'red'; }
// 分页器鼠标滑过时图片切换
for(var i = 0; i < page.length; i++) {
// 用来保存下标，page[i].index == 0 / 1 / 2 / 3 /4...
page[i].index = i;
// console.log(page[i].index);
// 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3]
page[i].onmouseover = function() {
for(var j = 0; j < page.length; j++) {
page[j].style.background = 'black';
innerImg[j].style.display = 'none';
}
this.style.background = 'red'; // console.log(this.index);可以查看是多少
innerImg[this.index].style.display = 'block';
num = this.index;
}
}
btnL.onclick = function() {
moveL();
}
btnR.onclick = function() {
moveR();
}
// 鼠标划上carousel时让左右按钮显示 并清除时间函数
carousel.onmouseover = function() {
// 清除时间函数
clearInterval(timer); //暂停 图片不继续循环
btnR.style.display = 'block';
btnL.style.display = 'block';
}
// 鼠标离开carousel时让左右按钮隐藏
carousel.onmouseout = function() {
// 开启时间函数
timer = setInterval(moveR, 2500);
btnR.style.display = 'none';
btnL.style.display = 'none';
}
</script></html>推荐学习：css视频教程
以上是如何使用純CSS、JS實現圖片輪播效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文轉載於：CSDN。如有侵權，請聯絡admin@php.cn刪除
兩個圖像和一個API：我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此，只有一種產品之一，我們可以以不同的方式對其進行著色以顯示
每周平台新聞：第三方代碼，被動混合內容，連接最慢的國家的影響Apr 15, 2025 am 11:19 AM在本週的綜述中，燈塔在第三方腳本上闡明了燈光，不安全的資源將在安全站點上被阻止，許多國家連接速度
託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）
它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要
JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
Atom編輯器mac版下載
最受歡迎的的開源編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
WebStorm Mac版
好用的JavaScript開發工具
