本文提供基于原生JavaScript实现的轮播图完整代码。功能涵盖图片自动轮播、鼠标悬停暂停、左右箭头切换及序号跳转。通过操作DOM元素与定时器控制，实现无缝交互效果，适合前端学习参考。
JavaScript轮播图实现概述
本文分享一段使用JavaScript编写的轮播图特效代码，供读者参考学习。
主要功能包括：
1. 图片支持自动轮播，当鼠标悬停在图片区域时，自动播放暂停。
2. 提供左右箭头按钮，点击可手动切换至上一张或下一张图片。
3. 底部序号按钮支持点击跳转，直接定位到指定图片。
核心代码与交互逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当当网首页轮播图-By小黑</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#wrap{
margin: 50px auto;
width: 800px;
height: 330px;
overflow: hidden;
position: relative;
}
#list{
position: absolute;
bottom: 15px;
right: 250px;
}
#list li{
float: left;
margin-right: 15px;
cursor: pointer;
width: 23px;
height: 23px;
line-height: 23px;
text-align: center;
background: #ADA79D;
color: #FFF ;
border-radius: 50%;
}
#list .on{
background: red;
}
#bar_left,#bar_right{
width: 33px;
height: 80px;
line-height: 80px;
position: absolute;
top: 130px;
background: rgba(0, 0, 0, 0.3);
}
#bar_left{
left: -33px;
}
#bar_right{
right: -35px;
}
/*下面利用伪元素实现左侧和右侧的小箭头*/
#bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{
content: "";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
top: 25px;
}
/*左边箭头*/
#bar_left:before{
border-left: 15px solid transparent;
border-right: 15px solid #FFF;
right: 10px;
}
#bar_left:after{
border-left: 15px solid transparent;
border-right: 15px solid rgba(0, 0, 0, 0.3);
right: 7px;
}
/*右边箭头*/
#bar_right:before{
border-right: 15px solid transparent;
border-left: 15px solid #FFF;
left: 10px;
}
#bar_right:after{
border-right: 15px solid transparent;
border-left: 15px solid rgba(0, 0, 0, 0.3);
left: 7px;
}
#wrap:hover #bar_left{
left: 0;
cursor: pointer;
transition: left 0.5s;
}
#wrap:hover #bar_right{
/* display: block; */
right: 5px;
cursor: pointer;
transition: right 0.5s;
}
.tex{
margin: 20px auto;
width: 400px;
}
.tex ul li{
list-style-type:circle;
color: red;
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="pic">
<li><img src="images/dang1.jpg" alt=""></li>
<li><img src="images/dang2.jpg" alt=""></li>
<li><img src="images/dang3.jpg" alt=""></li>
<li><img src="images/dang4.jpg" alt=""></li>
<li><img src="images/dang5.jpg" alt=""></li>
<li><img src="images/dang6.jpg" alt=""></li>
<li><img src="images/dang7.jpg" alt=""></li>
<li><img src="images/dang8.jpg" alt=""></li>
</ul>
<div id="bar_left"></div>
<div id="bar_right"></div>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</div>
<div class="tex">
<ul>
<li>功能如下：</li>
<li>图片会自动播放，鼠标放上面会暂停播放</li>
<li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
<li>点击序号会跳转到对应图片</li>
</ul>
</div>
<script>
var wrap=document.getElementById('wrap');
var pics=document.getElementById('pic');
var lists=document.getElementById('list').getElementsByTagName('li');
var point_l=document.getElementById('bar_left');
var point_r=document.getElementById('bar_right');
var index=0;
var counter=null;
function change(){//计时器
counter=setInterval(function(){
index++;
if(index===lists.length){
index=0;
}
img(index);
},2000)
}
change();
function img(curIndex){//切换图片
for (var i=0;i<lists.length;i++){
if(curIndex===i){
lists[i].className='on';
}
else{
lists[i].className='';
}
}
index=curIndex;
pics.style.marginTop=-330*curIndex+'px';//图片上移
wrap.οnmοuseοver=function(){//鼠标放到图片上时图片停止播放
pics.style.cursor="pointer";
clearInterval(counter);//清除计时器
}
pics.οnmοuseοut=change;
}
//鼠标放到指定序号切换到指定图片
for (var i=0;i<lists.length;i++){
lists[i].id=i;
lists[i].οnmοuseοver=function(){
img(this.id);
this.className='on';
}
}
//当鼠标放在箭头上时，点击箭头切换到下一张图片
point_l.οnmοusedοwn=function(){//点击左边箭头
if(index<=0){
index=lists.length;
}
img(index-1);
}
point_r.οnmοusedοwn=function(){//点击右边箭头
if (index>=lists.length-1){
index=-1;
}
img(index+1);
}
</script>
</body>
</html>效果展示如下：
相关资源推荐：jQuery图片轮播、JavaScript图片轮播、Bootstrap图片轮播专题。
以上内容为完整的JavaScript轮播图实现方案，希望对读者有所帮助，欢迎继续支持本站。