原生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 相关文章推荐
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
Python随机数random模块使用指南
2016/09/09 Python
python实现俄罗斯方块游戏
2020/03/25 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Django中create和save方法的不同
2019/08/13 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
python实现人机猜拳小游戏
2020/02/03 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
银行优秀员工事迹
2014/02/06 职场文书
自主招生教师推荐信
2014/05/10 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL