JavaScript实现轮播图功能：左右切换、指示点与自动播放
作者：函数茶馆时间：2026-10-24 07:02:00浏览：336
本文分享基于JavaScript实现的轮播图完整代码，涵盖左右箭头切换、指示点点击切换及小图标导航功能，并集成自动播放逻辑。代码结构清晰，适合前端初学者参考学习，可直接用于课程设计及基础项目开发。
JavaScript轮播图功能实现概述
本文提供了使用JavaScript开发轮播图的具体代码示例，供读者参考学习。
该示例源自学校课程设计的学习笔记，实现了多种交互方式：包括左右箭头切换、点击指示点切换、小图标导航以及自动轮播功能。目前部分细节尚未完善，例如切换到特定图片后，左右切换按钮可能未同步指向相邻图片。
轮播图的实际运行效果如下图所示：
以下是完整的参考代码：
轮播图核心代码解析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div0{
height: 100px;
width: 100%;
background-color:black;
opacity:0.75;
}
.div1{
background-image: url(img/bg2.png);
height: 400px;
width: 100%;
}
.div2{
height: 200px;
width: 100%;
background-color:black;
opacity:0.75;
position: absolute;
}
.spot{
position: absolute;
left: 10%;
}
.spot_list1{
float: left;
border:3px solid wheat;
transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
opacity:0.5;
}
.spot_list2{
float: left;
border:3px solid wheat;
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
opacity:0.5;
}
.spot_list3{
float: left;
border:3px solid wheat;
transform:rotate(28deg);
-ms-transform:rotate(28deg);
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
opacity:0.5;
}
.div1_1{
border: 10px solid gainsboro;
width: 830px;
height: 300px;
left: 10%;
top: 10%;
position: relative;
overflow: hidden;
}
.btn {
width: 100%;
height: 80px;
position: absolute;
margin: 0 auto;
top: 120px;
}
.box_big {
position: absolute;
height: 400px;
vertical-align: middle
}
#imgList{
list-style: none;
position: absolute;
}
#imgList li{
float: left;
margin: 0 10px;
}
.left_btn, .right_btn {
width: 30px;
height: 80px;
background:gray;
line-height: 90px;
border-radius: 10px;
}
.left_btn {
float: left;
}
.right_btn {
float: right;
}
#navDiv{
position: absolute;
left: 300px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
border-radius:50%;
background-color: black;
margin: 0 10px;
opacity: 0.5;
filter: alpha(opacity=50);
}
#navDiv a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="div0"></div>
<div class="div1">
<div class="div1_1">
<div id="navDiv">
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
</div>
<div class="box_big">
<ul id="imgList">
<li><img src="img/1.jpg" id="1" ></li>
<li><img src="img/2.jpg" id="2></li>
<li><img src="img/3.jpg" id="3"/></li>
<li><img src="img/4.jpg" id="4"/></li>
<li><img src="img/5.jpg" id="5"/></li>
<li><img src="img/6.jpg" id="6"/></li>
</ul>
</div>
<div class="btn">
<div class="left_btn"><img src="img/prev.png"></div>
<div class="right_btn"><img src="img/next.png"></div>
</div>
</div>
</div>
<!--小标图片-->
<div class="div2" onmouseleave="m1()">
<div class="spot">
<img src="img/thumbs/1.jpg" class="spot_list1" id="spot_list1" onmouseover="mouseover(1)" onmouseout="mouseout(1)">
<img src="img/thumbs/2.jpg" class="spot_list2" id="spot_list2" onmouseover="mouseover(2)" onmouseout="mouseout(2)">
<img src="img/thumbs/3.jpg" class="spot_list3" id="spot_list3" onmouseover="mouseover(3)" onmouseout="mouseout(3)">
<img src="img/thumbs/4.jpg" class="spot_list1" id="spot_list4" onmouseover="mouseover(4)" onmouseout="mouseout(4)">
<img src="img/thumbs/5.jpg" class="spot_list2" id="spot_list5" onmouseover="mouseover(5)" onmouseout="mouseout(5)">
<img src="img/thumbs/6.jpg" class="spot_list3" id="spot_list6" onmouseover="mouseover(6)" onmouseout="mouseout(6)">
</div>
</div>
</body>
<script>
var box=document.getElementById("1");
//var spot = document.getElementsByClassName("spot_list");
var left_btn=document.getElementsByClassName("left_btn")[0];
var right_btn=document.getElementsByClassName("right_btn")[0];
var time = null;
var count = 0;
var ids=document.getElementsByTagName("a");
ids[0].style.backgroundColor="red";
var spot_list1=document.getElementById("spot_list1");
spot_list1.setAttribute("class","spot_list3");
spot_list1.style.opacity="0.98";
//左按钮
left_btn.onclick=function(){
count--;
if(count<1){
count=6
}
box.src="img/" + count + ".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[count - 1].style.backgroundColor="red";
for(var i=1;i<=6;i++){
var img=document.getElementById("spot_list"+i);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
var img=document.getElementById("spot_list"+count);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
}
//右按钮
right_btn.onclick=function(){
changeImg();
}
//
var x=1;
var changeImg = function(){
x++;
if(x > 6){
x = 1;
}
box.src = "img/" + x + ".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[x - 1].style.backgroundColor="red";
for(var i=1;i<=6;i++){
var img=document.getElementById("spot_list"+i);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
var img=document.getElementById("spot_list"+x);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
}
//设置计时器
var show;
show=setInterval(changeImg, 3000);
//图片切换
function mouseover(n){
clearInterval(show);
var img=document.getElementById("spot_list"+n);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
box.src="img/"+n+".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[n-1].style.backgroundColor="red";
}
for(let i=0;i<ids.length;i++){
ids[i].onclick=function(){
clearInterval(show);
for(var n=0;n<ids.length;n++){
ids[n].style.backgroundColor="black";
}
box.src="img/"+(i+1)+".jpg";
ids[i].style.backgroundColor="red";
}
}
//离开小图标时
function mouseout(n){
var img=document.getElementById("spot_list"+n);
ids[n-1].style.backgroundColor="black";
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
function m1(){
//启动计时器
show=setInterval(changeImg, 3000);
}
</script>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41