本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码，供大家参考，具体内容如下
做了一个仿京东的轮播图，当然没有人家官网的精美啦。
主要技术点：
每隔3秒自动切换图片； 鼠标移入图片自动暂停切换，鼠标移出则继续； 点击左右方向按钮手动切换图片； 鼠标移到灰色圆点，显示对应的图片，并加亮显示。HTML代码：
< body >
< h1 >轮播图展示</ h1 >
< div id = "did" >
<!-- 图片 -->
< div id = "img-div" onmouseover = "doStop()" onmouseout = "doStart()" >
< img src = "./1.jpg" >
< img src = "./2.jpg" >
< img src = "./3.jpg" >
< img src = "./4.jpg" >
< img src = "./5.jpg" >
< img src = "./6.jpg" >
< img src = "./7.jpg" >
< img src = "./8.jpg" >
</ div >
<!-- 左右按钮 -->
< div id = "btn-div" >
< div id = "left-btn" onclick = "doLeftClick()" >
< h3 > < </ h3 >
</ div >
< div id = "right-btn" onclick = "doRightClick()" >
< h3 > > </ h3 >
</ div >
</ div >
<!-- 圆点 -->
< div id = "cir-div" >
< div onmouseover = "doMove(1)" ></ div >
< div onmouseover = "doMove(2)" ></ div >
< div onmouseover = "doMove(3)" ></ div >
< div onmouseover = "doMove(4)" ></ div >
< div onmouseover = "doMove(5)" ></ div >
< div onmouseover = "doMove(6)" ></ div >
< div onmouseover = "doMove(7)" ></ div >
< div onmouseover = "doMove(8)" ></ div >
</ div >
</ div >
</ body >
CSS代码：
<style>
* {
margin : 0px ;
padding : 0px ;
}
body {
background-color : rgb ( 255 , 249 , 249 );
}
h 1 {
text-align : center ;
padding-top : 40px ;
color : rgba( 250 , 54 , 129 , 0.562 );
}
#did {
position : relative ;
width : 590px ;
height : 470px ;
margin : 30px auto ;
}
#img-div {
position : absolute ;
}
#img-div img {
width : 590px ;
display : none ;
cursor : pointer ;
z-index : -1 ;
}
/* 这两段可不加 */
/* 显示第一张图片 */
#img-div img:first-child {
display : block ;
}
/* 点亮第一个圆点 */
#cir-div div:first-child {
background : #fff ;
}
#cir-div {
position : absolute ;
/* 相对于图片的位置 */
left : 40px ;
bottom : 25px ;
}
/* 下方圆点 */
#cir-div div {
width : 8px ;
height : 8px ;
float : left ;
/* 50%时为圆形 */
border-radius: 50% ;
margin-right : 6px ;
border : 1px solid rgba( 0 , 0 , 0 , . 05 );
background : rgba( 255 , 255 , 255 , . 4 );
}
#left-btn {
position : absolute ;
/* 相对于图片的位置 */
top : 45% ;
/* 左半圆按钮 */
width : 27px ;
height : 38px ;
background : rgba( 119 , 119 , 119 , 0.5 );
border-radius: 0 20px 20px 0 ;
/* 动画效果，放在变化前，当鼠标移动上面时，会缓慢变色 */
transition: background-color 0.3 s ease-out;
}
#right-btn {
position : absolute ;
/* 相对于图片的位置 */
top : 45% ;
right : 0px ;
/* 右半圆按钮 */
width : 27px ;
height : 38px ;
background-color : rgba( 119 , 119 , 119 , 0.5 );
border-radius: 20px 0 0 20px ;
/* 动画效果，放在变化前，当鼠标移动上面时，会缓慢变色 */
transition: background-color 0.3 s ease-out;
}
#left-btn:hover {
background-color : rgba( 32 , 32 , 32 , 0.5 );
cursor : pointer ;
}
#right-btn:hover {
background-color : rgba( 32 , 32 , 32 , 0.5 );
cursor : pointer ;
}
#left-btn h 3 {
color : #fff ;
margin-top : 4px ;
margin-left : 2px ;
}
#right-btn h 3 {
color : #fff ;
margin-top : 4px ;
margin-left : 8px ;
}
</style>
JavaScript代码：
<script>
//显示第几张图片
var count = 1;
//时间
var time = null ;
//图片列表
var imglist = document.getElementById( "img-div" ).getElementsByTagName( "img" );
//圆点列表
var cirlist = document.getElementById( "cir-div" ).getElementsByTagName( "div" );
//展示对应的图片和点亮对应的圆点
function show(x) {
for ( var i = 0; i < imglist.length; i++) {
if (x == i + 1) {
//显示图片
imglist[i].style.display = "block" ;
//圆点点亮
cirlist[i].style.backgroundColor = "#fff" ;
} else {
imglist[i].style.display = "none" ;
cirlist[i].style.background = "rgba(255, 255, 255, .4)" ;
}
}
}
//定时轮播图片(每3秒切换一张图片)
function doStart() {
if (time == null ) {
time = setInterval( function () {
count++;
show(count);
if (count >= 8) {
count = 0;
}
}, 3000);
}
}
//停止轮播图片
function doStop() {
if (time != null ) {
clearInterval(time);
time = null ;
}
}
//鼠标移到圆点上图片会相应切换，并且之后会点亮下一个圆点 而不是未移到圆点前的下一个圆点
function doMove(x) {
show(x);
//将位置赋给count，图片就会从该图片的下一张开始切换
count = x;
//当鼠标移到最后一个圆点时，需要将count变为0,不然执行doStart()里的count++，count就会变为9，越界了
if (count == 8) {
count = 0;
}
}
/*
对于i 、count和show(x)里x的关系：
i = [0,7];
x = [1,8];
count = [1,8];
*/
//点击左边按钮向左切换图片
function doLeftClick() {
for ( var i = 0; i < imglist.length; i++) {
//判断当前在展示的是哪张图片
if (imglist[i].style.display == "block" ) {
if (i == 0) {
show(8);
// 忘掉这句后，break会直接退出，当左按钮按到最右的圆点，会直接忽略圆点1，直接跳到圆点2
count = 0;
//保证切换是3秒钟
doStop();
doStart();
break ;
}
show(i);
count = i;
//保证切换是3秒钟
doStop();
doStart();
break ;
}
}
}
//点击右边按钮向右切换图片
function doRightClick() {
for ( var i = 0; i < imglist.length; i++) {
//判断当前在展示的是哪张图片
if (imglist[i].style.display == "block" ) {
if (i == 7) {
show(1);
count = 1;
doStop();
doStart();
break ;
}
show(i + 2);
count = i + 2;
//就不会出现切换到没有图片的情况
if (count >= 8) {
count = 0;
}
doStop();
doStart();
break ;
}
}
}
doStart();
//默认打开页面显示的是第一张图片
//（不加，会出现第1个圆点亮也就是刚打开页面时，左按钮没反应）
doMove(1);
</script>
遇到的难点：
虽说轮播图看起来还蛮简单的，但实现起来还挺多问题的。不过我发现的都解决掉了。
圆点与按钮放置在图片上 自动切换图片了但对应的圆点没有点亮 鼠标移到圆点上图片切换了，但下一个自动点亮的圆点却是未移到圆点前的下一个 第1个圆点亮也就是刚打开页面时，左按钮没反应 当左按钮按到最右的圆点，会直接忽略圆点1，直接跳到圆点2 在最后一个圆点时点击右按钮时，会出现切换到没有图片的情况 点左按钮切换时间大概2秒，点右按钮切换时间大概5秒，时间并没有达到标准的3秒不过我都解决啦！
最大的感触就是刚解决掉一个bug正沾沾自喜时，又来一个bug。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_43771998/article/details/113971007
查看更多关于JavaScript仿京东轮播图效果的详细内容...