原生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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
Js切换功能的简单方法
Nov 23 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
js数组中去除重复值的几种方法
Aug 03 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
python difflib模块示例讲解
2017/09/13 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
最新的互联网创业计划书
2014/01/10 职场文书
给领导的检讨书
2014/02/16 职场文书
2014国培学习感言
2014/03/05 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python