原生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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
Vue自定义render统一项目组弹框功能
Jun 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
You might like
PHP编程函数安全篇
2013/01/08 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python返回昨天日期的方法
2015/05/13 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
车间副主任岗位职责
2013/12/24 职场文书
行风评议整改报告
2014/11/06 职场文书
企业2014年度工作总结
2014/12/10 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS