Question

我正在尝试用jQuery做滑块以便与ebay一起使用。

但它不适合我，我不知道为什么。

首先，我使用本教程创建了一个滑块：www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/，它适用于我。

以下是代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  <head>
    <title>Bez nazwy</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="pl" />
    <meta name="Generator" content="JTHTML 8.2.4" />
    <meta name="Robots" content="index" />
<link rel="stylesheet" type="text/css" href="http://dupacyce.cba.pl/slides.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript"> 
$(document).ready(function() { 
                  var currentPosition = 0; 
                  var slideWidth = 500;
                  var slideHeight = 200;
                  var slides = $('.slide');
                  var numberOfSlides = slides.length;
                  var slideShowInterval; 
                  var speed = 1000;

                  slideShowInterval = setInterval(changePosition, speed); 

                  slides.wrapAll('<div id="slidesHolder"></div>') 

                  slides.css({ 'float' : 'left' }); 

                  $('#slidesHolder').css('width', slideWidth * numberOfSlides); 

                  function changePosition() { 
                  if(currentPosition == numberOfSlides - 1) { 
                         currentPosition = 0; } 
                  else { 
                         currentPosition++; 
                         } 
                         moveSlide(); 
                         } 
                  function moveSlide() { 
                         $('#slidesHolder') 
                         .animate({'marginLeft' : slideWidth*(-currentPosition)}); 
                         } }); 
</script>
 </head>
  <body>

  <div class="box">

    <div id="slideshow"> 
        <div id="slideshowWindow">
             <div class="slide"> <img src="http://imageshack.com/a/img594/2540/ikry.jpg" /> </div><!--/slide--> 
             <div class="slide"> <img src="http://imageshack.com/a/img30/5803/iaar.jpg" /> </div><!--/slide--> 
             <div class="slide"> <img src="http://imageshack.com/a/img35/7492/souj.jpg" /> </div><!--/slide--> 
        </div><!--/slideshowWindow-->
    </div><!--/slideshow-->
  </div>

  </body>
</html>

然后我想将这个项目与本教程混合使用：“http://lastdropofink.co.uk/market-places/ebay/how-to-load-javascript-into-ebay-listings/”使滑块在ebay上工作。

但即使在浏览器中代码也不起作用：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  <head>
    <title>Bez nazwy</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="pl" />
    <meta name="Generator" content="JTHTML 8.2.4" />
    <meta name="Robots" content="index" />
<link rel="stylesheet" type="text/css" href="http://dupacyce.cba.pl/slides.css" />
<script async type="text/javascript">
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";var hz = ".com";var jz = "code.jquery"+hz+"/";
var resource = document.createElement("script");
resource.src = fz+gz+jz+"jquery-1.10.2.min.js";
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(resource, script);
</script>

<script async type="text/javascript">
function jQueryLoaded() {
    //yay loaded! Now do stuff
    jQuery(document).ready(function(){ 
                  var currentPosition = 0; 
                  var slideWidth = 500;
                  var slideHeight = 200;
                  var slides = $('.slide');
                  var numberOfSlides = slides.length;
                  var slideShowInterval; 
                  var speed = 1000;

                  slideShowInterval = setInterval(changePosition, speed); 

                  slides.wrapAll('<div id="slidesHolder"></div>') 

                  slides.css({ 'float' : 'left' }); 

                  $('#slidesHolder').css('width', slideWidth * numberOfSlides); 

                  function changePosition() { 
                  if(currentPosition == numberOfSlides - 1) { 
                         currentPosition = 0; } 
                  else { 
                         currentPosition++; 
                         } 
                         moveSlide(); 
                         } 
                  function moveSlide() { 
                         $('#slidesHolder') 
                         .animate({'marginLeft' : slideWidth*(-currentPosition)}); 
                         } }); 

}
function checkJquery() {
    if (typeof window.jQuery === 'undefined' && window.jQuery) {
        jQueryLoaded();
    } else {
        window.setTimeout(checkJquery, 100);
    }
}
checkJquery();

</script>


 </head>
  <body>

  <div class="box">

    <div id="slideshow"> 
        <div id="slideshowWindow">
             <div class="slide"> <img src="http://imageshack.com/a/img594/2540/ikry.jpg" /> </div><!--/slide--> 
             <div class="slide"> <img src="http://imageshack.com/a/img30/5803/iaar.jpg" /> </div><!--/slide--> 
             <div class="slide"> <img src="http://imageshack.com/a/img35/7492/souj.jpg" /> </div><!--/slide--> 
        </div><!--/slideshowWindow-->
    </div><!--/slideshow-->
  </div>

  </body>
</html>

我在哪里弄错了？

Answer 1

选中eBay Slider。

参考：Embed eBay Slider for eBay Design

易趣上的Jquery滑块，即使在浏览器中也不起作用

1 个答案: