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。

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

(0)

相关推荐

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

  • JS轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

  • 原生js实现无限循环轮播图效果

    知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

随机推荐