JavaScript仿京东轮播图效果

本文实例为大家分享了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，直接跳到圆点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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript实现循环轮播图
• JS原生实现轮播图的几种方法
• js编写轮播图效果
• 基于JavaScript实现简单的轮播图
• @L_126_4@
• 原生js实现无缝轮播图效果
• js实现移动端轮播图滑动切换
• javascript实现滚轮轮播图片
• 原生Js 实现的简单无缝滚动轮播图的示例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！