欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-29 19:46:08
本文实例讲述了原生javascript实现的淘宝轮播图效果。分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的...

本文实例讲述了原生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切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

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