浅谈js写轮播图的思路与心得

轮播图思路:

1 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。
列如 <script type="text/javascript" src="animate-2.0.1.js"></script>
而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName,然后把需要一个规范的命名。

var oDiv = document.getElementById("carousel")
var lBtn = document.getElementById("leftBtn")
var rBtn = document.getElementById("rightBtn")
var picDiv = document.getElementById("m_unit")
var picUl = picDiv.getElementsByTagName("ul")[0]
var picLi = picUl.getElementsByTagName("li")
var ydDiv = document.getElementById("circles")
var ydLi = ydDiv.getElementsByTagName("li")

2 、第二部我们创建一个定时器先让轮播图中所有图片的 li 动起来
右边点击函数跟定时器所运动的函数一个样,所以我们可以封装一个函数abc();他们是共用的;

var timer = setInterval(abc,options.interval)
        rBtn.onclick = abc;
        oDiv.onmouseover = function(){
            clearInterval(timer);
        }
        oDiv.onmouseout = function(){
            timer = setInterval(abc,options.interval);
        }

        function abc(){
            if(picDiv.isanimated) {
                return;
            }
            index++;
            change();
            animate(picDiv,{"left" : -options.width * index},options.animatetime,options.tween,function(){
                if(index > picLi.length - 1){
                    index = 0;
                    picDiv.style.left = "0px";
                }
            });
        }

3 、 写出左边点击按钮事件的函数,这样就如上abc();差不多只是修改一些东西就行了;

lBtn.onclick = function(){
          if(picDiv.isanimated) {
              return;
          }
          index--;
          if(index < 0){
              index = picLi.length - 1;
              picDiv.style.left = -options.width * picLi.length + "px";
          }
          change();
          animate(picDiv,{"left" : -options.width * index},options.animatetime,options.tween);
      }

4 、讲小圆点的样式改变封装成一个函数就是下面的chnage();
然后还得监听点击每个小圆点的事件,所以可以用for + onclick 讲每个小圆点点击事件给写出来。

for (var i = 0; i < ydLi.length; i++) {
            ydLi[i].xxx = i;
            ydLi[i].onclick = function(){
                index = this.xxx;
                animate(picDiv,{"left" : -options.width * index},options.animatetime,options.tween);
                change();
            }
        }

        function change(){
            var n = index > length - 1 ? 0 : index;
            for (var i = 0; i < ydLi.length; i++) {
                picLi[i].className = "";
            }
            picLi[n].className = "cur";
        }

难点:
1 、函数截留,当我们点击函数正在执行时,如果多次点击就会出现图片运动混乱的现象,这是我们需要用if(picDiv.isanimated) {return;},
2 、cloneNode()函数picUl.appendChild(picLi[0].cloneNode(true))

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 125,056评论 16 537
  • 原理 图片轮播原理:将一系列大小相等的图片平铺,利用css布局只显示一张图片,其他图片隐藏,通过计算偏移量利用定时...
    黎贝卡beka阅读 1,241评论 1 2
  • 简单的轮播图 first:通过DOM 获取到html中的元素 second:定义一个对象,配置需要改变的量 thi...
    loyehu阅读 33评论 1 0
  • 感恩!享受了酒店免费的素食早餐,真好!谢谢!谢谢!谢谢! 感恩!田霞把洗漱用品摆放得很整齐,看着真舒服。谢谢!谢谢...
    梧桐70阅读 13评论 0 0
  • 一、觉察日记 【事实】小朋友们一起玩,闺蜜老公一直在旁边引导小朋友,自己也参与进来。闺蜜老公说:他不给咱们玩,咱们...
    以诗为名阅读 8评论 0 0