猿问

轮播图 浏览器崩溃问题

< script type = "text/javascript" > window.onload = function() {
   var width = window.screen.width;
   var container = document.getElementById('container');
   var list = document.getElementById('list');
   var buttons = document.getElementById('buttons');
   var span = document.getElementsByTagName('span');
   var img = document.getElementsByTagName('img');
   var height = img[0].height;
   var prev = document.getElementById('prev');
   var next = document.getElementById('next');
   var len = 4;
   var index = 1;
   var animated = false;
   var interval = 3000;
   var timer;
   container.style.width = width + 'px';
   container.style.height = height + 'px';
   img[0].style.width = width + 'px';
   img[1].style.width = width + 'px';
   img[2].style.width = width + 'px';
   img[3].style.width = width + 'px';
   img[4].style.width = width + 'px';
   img[5].style.width = width + 'px';
   list.style.width = 6 * width + 'px';
   list.style.left = -width + 'px';
   buttons.style.left = (width - 124) / 2 + 'px';
   buttons.style.top = (height - 80) + 'px';
   function sho_button() {
       for (var i = 0; i < span.length; i++) {
           if (span[i].className == 'on') {
               span[i].className = '';
               break
           }
       }
       span[index - 1].className = "on"
   }
   function animate(offset) {
       animated = true;
       var time = 900;
       var inteval = 20;
       var speed = offset / (time / inteval);
       var newleft = parseInt(list.style.left) + offset;
       function go() {
           if ((speed < 0 && parseInt(list.style.left) > newleft) || (speed > 0 && parseInt(list.style.left) < newleft)) {
               list.style.left = speed + parseInt(list.style.left) + 'px';
               setTimeout(go, inteval)
           } else {
               animated = false;
               list.style.left = newleft + 'px';
               var left = parseInt(list.style.left);
               if (left > -width) {
                   var new_left = -width * len list.style.left = new_left + 'px'
               }
               var new_left = -width * len
               if (left < new_left) {
                   list.style.left = -width + 'px'
               }
           }
       }
       go()
   }
   next.onclick = function() {
       if (animated) {
           return
       }
       if (index == 4) {
           index = 1
       } else {
           index += 1
       }
       sho_button();
       if (!animated) {
           animate( - width)
       }
   }
   prev.onclick = function() {
       if (animated) {
           return
       }
       if (index == 1) {
           index = 4
       } else {
           index -= 1
       }
       sho_button();
       if (!animated) {
           animate(width)
       }
   }
   for (var i = 0; i < span.length; i++) {
       span[i].onclick = function() {
           if (animated) {
               return
           }
           if (this.className == 'on') {
               return
           }
           var myIndex = parseInt(this.getAttribute('index'));
           var offset = -width * (myIndex - index);
           if (!animated) {
               animate(offset)
           }
           index = myIndex;
           sho_button()
       }
   }
   function play() {
       timer = setInterval(function() {
           next.onclick();
           play()
       },
       3000)
   }
   function stop() {
       clearInterval(timer)
   }
   container.onmouseover = stop;
   container.onmouseout = play;
   play()
} < /script>/


AidanDai
浏览 1921回答 0
0回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答