首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript仿京东轮播图效果

Posted in Javascript onFebruary 25, 2021

本文实例为大家分享了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仿京东轮播图效果

- Author -

不是七七子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解JS模块导入导出
Dec 20 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
Vue基本指令实例图文讲解
Feb 25 #Vue.js
使用webpack和rollup打包组件库的方法
Feb 25 #Javascript
vue常用高阶函数及综合实例
Feb 25 #Vue.js
原生JS实现音乐播放器的示例代码
Feb 25 #Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 #Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 #Javascript
BCLer(1) frg-100(1) YB-230(1) DE1103(2) ICF-903L(1) YAESU(1) 根德5570(1) 74HC4066(1) AN-LP1(1) 239军机(1)
You might like
用PHP开发GUI
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php数据序列化测试实例详解
2017/08/12 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python正则表达式介绍
2012/08/06 Python
python with statement 进行文件操作指南
2014/08/22 Python
Python入门篇之数字
2014/10/20 Python
python保存字符串到文件的方法
2015/07/01 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python递归实现快速排序
2018/08/18 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Python中格式化字符串的四种实现
2020/05/26 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
小学运动会入场口号
2015/12/24 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android