jQuery圖像滑塊不起作用

-1

當我在瀏覽器中運行此功能時，起初沒有任何複雜情況。jQuery圖像滑塊不起作用

最後，滑塊開始將動畫製作爲未被圖像佔用的空間。我已經搞砸了幾次，但它要麼不重新啓動週期，要麼進入深淵。

jQuery(document).ready(function() { 
 
    $('#slide').css("top", "0px"); 
 
    var slilen = parseInt($('#slide').css("height"), 10); 
 
    $('.music').html(slilen); 
 
    var slito = parseInt($('#slide').css("top"), 10)/-1; 
 
    $('.comingsoon').html(slito); 
 
    var slial = slilen - 500; 
 
    $('.about').html(slial); 
 
    function setoot() { 
 
    setInterval(function() { 
 
     checx() 
 
    }, 5000); 
 
    } 
 
    setoot(); 
 

 
    function blabo() { 
 
    $('#slide').animate({ 
 
     top: "-=500", 
 
    }, 3000, function() { 
 
     $('.comingsoon').html(slito); 
 
     slito = parseInt($('#slide').css("top"), 10)/-1; 
 
     $('.contact').html($('#slide').css("top")); 
 
    }); 
 
    } 
 

 
    function checx() { 
 
    if (slito + 500 !== slial) { 
 
     if (slito > slial) { 
 
     $('#slide').css("top", "0"); 
 
     slito = parseInt($('#slide').css("top"), 10)/-1; 
 
     } else if (slito < slial) { 
 
     blabo(); 
 
     } 
 
    } else if (slito + 500 == slial) { 
 
     if (slito < slial) { 
 
     $('#slide').animate({ 
 
      top: "0", 
 
     }, 5000, function() { 
 
      $('#slide').css("top", "0px"); 
 
      return 0; 
 
     }); 
 
     slito = parseInt($('#slide').css("top"), 10)/-1; 
 
     setoot(); 
 
     } 
 
    } else { 
 
     $('#slide').animate({ 
 
     top: "0", 
 
     }, 5000, function() { 
 
     $('#slide').css("top", "0px"); 
 
     return 0; 
 
     }); 
 
     slito = parseInt($('#slide').css("top"), 10)/-1; 
 
     setoot(); 
 
    } 
 
    } 
 
});

#pic { 
 
     width: 100vw; 
 
     height: 31.250em; 
 
     background-color: Chartreuse; 
 
     overflow: hidden; 
 
    } 
 
    #t { 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 
    #sli { 
 
     height: 1500px; 
 
     overflow: hidden; 
 
    } 
 
    #slide { 
 
     height: 93.750em; 
 
     position: relative; 
 
     overflow: hidden; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="pic"> 
 
    <div id="slide"> 
 
    <img src="im.jpg" style="margin-bottom: -4px; width: 100%; height: 500px; background-color: blue;"> 
 
    <img src="im2.jpg" style="margin-bottom: -4px; width: 100%; height: 500px; background-color: red;"> 
 
    <img src="im3.jpg" style="margin-bottom: -4px; width: 100%; height: 500px; background-color: DarkGoldenRod;"> 
 
    </div> 
 
</div>

來源

2015-06-12 NewtonIncorporated

本教程可以幫助： https://www.youtube.com/watch?v=KkzVFB3Ba_o

$(function() { 

//settings for slider 
var width = 720; 
var animationSpeed = 1000; 
var pause = 3000; 
var currentSlide = 1; 

//cache DOM elements 
var $slider = $('#slider'); 
var $slideContainer = $('.slides', $slider); 
var $slides = $('.slide', $slider); 

var interval; 

function startSlider() { 
    interval = setInterval(function() { 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { 
      if (++currentSlide === $slides.length) { 
       currentSlide = 1; 
       $slideContainer.css('margin-left', 0); 
      } 
     }); 
    }, pause); 
} 
function pauseSlider() { 
    clearInterval(interval); 
} 

$slideContainer 
    .on('mouseenter', pauseSlider) 
    .on('mouseleave', startSlider); 

startSlider();

}）;

來源：http://jsfiddle.net/EjZzs/15/

來源

2015-08-20 13:39:15 NewtonIncorporated