原生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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
vue实现单选和多选功能
Aug 11 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 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
下载文件的点击数回填
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python批量发送post请求的实现代码
2018/05/05 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
Python字节单位转换实例
2019/12/05 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
关于奉献的演讲稿
2014/05/21 职场文书
新教师岗前培训方案
2014/06/05 职场文书
考试保密承诺书
2014/08/30 职场文书
维稳工作承诺书
2015/01/20 职场文书
于丹论语心得观后感
2015/06/15 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Go语言怎么使用变长参数函数
2022/07/15 Golang