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

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

Posted in Javascript onMay 27, 2017

本文实例讲述了原生JavaScript实现的淘宝轮播图效果。分享给大家供大家参考，具体如下：

轮播图是我们学习原生js的必经之路

它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，

话不多说，直接上图

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

HTML代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>淘宝轮播图</title>
  <link rel="stylesheet" href="css/initialize.css" rel="external nofollow" />
  <link rel="stylesheet" href="css/tblunbotu.css" rel="external nofollow" />
</head>
<body>
<div id="container" class="clearFix">
  <div id="list" class="clearFix" style="left: -520px">
    <img src="img/5.jpg" alt=""/>
    <img src="img/1.jpg" alt=""/>
    <img src="img/2.jpg" alt=""/>
    <img src="img/3.jpg" alt=""/>
    <img src="img/4.jpg" alt=""/>
    <img src="img/5.jpg" alt=""/>
    <img src="img/1.jpg" alt=""/>
  </div>
  <div id="buttons" class="clearFix">
    <span class="on"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</div>
<script type="text/javascript" src="js/tblunbotu.js"></script>
</body>
</html>

CSS样式如下：

/*
  第一步：设置外部框的样式
  第二步: 设置图片框的样式
  第三步: 设置箭头的样式
  第四步: 设置小圆点的样式
*/
#container {
  margin: 50px auto;
  position: relative;
  width: 520px;
  height: 280px;
  overflow: hidden;
}
#list {
  position: absolute;
  z-index: 1;
  width: 3640px;
}
#list img {
  float: left;
  width: 520px;
  height: 280px;
}
#buttons {
  height: 10px;
  width: 100px;
  position: absolute;
  left: 0;/*设置水平垂直居中*/
  right: 0;/*设置水平垂直居中*/
  margin: 0 auto;/*设置水平垂直居中*/
  bottom: 20px;
  z-index: 2;
}
#buttons span {
  float: left;
  margin-right: 5px;
  width: 10px;
  height: 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
}
#buttons .on {
  background: orangered;
}
.arrow {
  width: 40px;
  height: 40px;
  display: none;
  position: absolute;
  top: 0; /*设置水平垂直居中*/
  bottom: 0; /*设置水平垂直居中*/
  margin: auto 0; /*设置水平垂直居中*/
  font-size: 36px;
  font-weight: bold;
  line-height: 39px;
  text-align: center;
  color: #fff;
  background-color: RGBA(0, 0, 0, .3);
  cursor: pointer;
  z-index: 2;
}
.arrow:hover{
  background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
  display: block;
}
#prev{
  left: 10px;
}
#next{
  right: 10px;
}

javascript代码如下

/**
 * Created by zhm on 17.1.15.
 */
  /*
  *知识点：
  *  this使用
  *  DOM事件
  *  定时器
  *
  *  思路：
  *  （1）设置它左右移动
  *    问题：传入数字为NAN??
  *    解决：在页面中增加属性style：left:0
  *  （2）平滑移动（移动时间固定，每次移动的距离不一样）
  *    问题：连续点击出现晃动？---设置标志位
  *       出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张
  *               在类list的标签中增加属性style：left:-520px;
  *               设置无限滚动判断
  *
  *  （3）设置小圆点
  *    首先将所有的类置为空，当前类置为on
  *    绑定小圆点和图片
  *    绑定小圆点和左右箭头
  *    设置定时器，鼠标划上去停止，移开自动轮播
  *
  * */
  //1.获取元素
  var container = document.getElementById("container");
  var list = document.getElementById("list");
  var prev = document.getElementById("prev");
  var next = document.getElementById("next");
  var buttons = document.getElementById('buttons').getElementsByTagName('span');
  var timer = null;
  var timer2 = null;
  var flag = true;
  var index =0;
  //2.设置函数
  function moveImg(dis) {
    var time = 400;//运动的总时间
    var eachTime = 10;//每次小移动的时间
    var eachDis = dis/(time/eachTime);//每次小移动的距离
    var newWeizhi = parseInt(list.style.left) + dis;//新位置
    flag = false;
    function eachMove(){
      if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){
        list.style.left = parseInt(list.style.left) + eachDis + 'px';
      }else {
        flag = true;
        clearInterval(timer);
        list.style.left = newWeizhi + 'px';
        //无限滚动判断
        if (newWeizhi == 0) {
          list.style.left = -2600 + 'px';
        }
        if (newWeizhi == -3120) {
          list.style.left = -520 + 'px';
        }
      }
    }
    timer = setInterval(eachMove, 10);
  }
  //3.设置点击切换图片
  next.onclick = function () {
    if(!flag) return;
    moveImg(-520);
    //绑定箭头和小圆点
    if (index == 4) {
      index = 0;
    } else {
      index++;
    }
    buttonsShow();
  };
  prev.onclick = function () {
    if(!flag) return;
    moveImg(520);
  //绑定箭头和小圆点
    if (index == 0) {
      index = 4;
    } else {
      index--;
    }
    buttonsShow();
  };
  //4.设置小圆点的绑定
  function buttonsShow() {
    //将之前的小圆点的样式清除
    for (var i = 0; i < buttons.length; i++) {
      if (buttons[i].className == "on") {
        buttons[i].className = "";
        break;
      }
    }
    buttons[index].className = "on";
  }
  for(var i = 0 ;i<buttons.length;i++){
    buttons[i].value = i;
    //使用自执行函数解决i的赋值问题
    (function(){
      buttons[i].onclick = function(){
        if(this.value == index) return;
        var offset = (this.value - index)* -520;
        moveImg(offset);
        index = this.value;
        buttonsShow();
      }
    })();
  }
  //5.设置自动轮播
  timer2 = setInterval(next.onclick,1500);
  container.onmouseover = function(){
    clearInterval(timer2);
  };
  container.onmouseout = function(){
    timer2 = setInterval(next.onclick,1000);
  };

源码下载：完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

- Author -

最美FE

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

Javascript 相关文章推荐
javascript中window.event事件用法详解
Dec 11 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
微信小程序如何实现全局重新加载
Jun 05 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
《javascript设计模式》学习笔记四：Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
详细讲解vue2+vuex+axios
May 27 #Javascript
AngularJS获取json数据的方法详解
May 27 #Javascript
vue中用H5实现文件上传的方法实例代码
May 27 #Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 #Javascript
详解如何使用webpack打包Vue工程
May 27 #Javascript
Jquery中attr与prop的区别详解
May 27 #jQuery
angular使用post、get向后台传参的问题实例
May 27 #Javascript
铁拳(1) 战锤40K(1) LOL(1) 绿林侠盗(1) 模拟人生(1) 死亡搁浅(1) 吸血鬼(1) 遗弃(1) 原神(1) 大话西游(1)
You might like
PHP+JS无限级可伸缩菜单详解（简单易懂）
2007/01/02 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Ajax，UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
利用Angular+Angular-Ui实现分页（代码加简单）
2017/03/10 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
python将多个文本文件合并为一个文本的代码（便于搜索）
2011/03/13 Python
Python中不同进制互相转换（二进制、八进制、十进制和十六进制）
2015/04/05 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
我们没有写servlet的构造方法，那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
公司前台辞职报告
2014/01/19 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
暖通工程师岗位职责
2014/06/12 职场文书