JavaScript仿京东轮播图效果
本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码，供大家参考，具体内容如下
做了一个仿京东的轮播图，当然没有人家官网的精美啦。
主要技术点：
每隔3秒自动切换图片；鼠标移入图片自动暂停切换，鼠标移出则继续；点击左右方向按钮手动切换图片；鼠标移到灰色圆点，显示对应的图片，并加亮显示。
HTML代码：
<body> <h1>轮播图展示</h1> <div id='did'> <!-- 图片 --> <div onmouseover='doStop()' onmouseout='doStart()'> <img src='https://www.haobala.com/bcjs/1.jpg'> <img src='https://www.haobala.com/bcjs/2.jpg'> <img src='https://www.haobala.com/bcjs/3.jpg'> <img src='https://www.haobala.com/bcjs/4.jpg'> <img src='https://www.haobala.com/bcjs/5.jpg'> <img src='https://www.haobala.com/bcjs/6.jpg'> <img src='https://www.haobala.com/bcjs/7.jpg'> <img src='https://www.haobala.com/bcjs/8.jpg'> </div> <!-- 左右按钮 --> <div id='btn-div'> <div onclick='doLeftClick()'> <h3> < </h3> </div> <div 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，直接跳到圆点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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备