爱站程序员基地本文实例为大家分享了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);}h1 {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.3s 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.3s 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 h3 {color: #fff;margin-top: 4px;margin-left: 2px;}#right-btn h3 {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，直接跳到圆点2count = 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。
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- js实现轮播图的完整代码
- 原生js实现轮播图的示例代码
- js实现支持手机滑动切换的轮播图片效果实例
- js实现点击左右按钮轮播图片效果实例
- JS轮播图实现简单代码
- JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
- JS实现左右无缝轮播图代码
- 原生js实现无限循环轮播图效果
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 基于vue.js轮播组件vue-awesome-swiper实现轮播图
