Question

我下载了jQuery文件来为我的网站创建图像滑块，但它根本不起作用。有人可以教我哪些代码有问题吗？谢谢..

<body>
  <ul class="slider" "position: relative; top: 0px; left: 0px; width: 600px;
        height: 300px;">
    
      <li><div class="slick"><img src="./images/sample-01.png"></div></li>
      <li><div class=""><img src="./images/sample-02.png" /></div></li>
      <li><div class="slick"><img src="./images/sample-03.png" /></div></li>
      <li> <div class="slick"><img src="./images/sample-01.png" /></div>
    <li> <div class="slick"><img src="./images/sample-02.png" /></div></li> 
      <li><div class="slick"><img src="./images/sample-03.png" /></div></li>
  </ul>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script> 
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>

<script type="text/javascript">
 jQuery(document).ready(function ($){
 var_slideshowTransitions = [
     
{$Duration:1200,$Opacity:2}
 ];
 var options={
        $SlideDuration:500,
        $AutoPlay:true,
        $DragOrientation:3,
        $Idle:1500,
        $slideshowOptions: {
            $Class:$JssorslideshowRunner$,
            $Transitions:_slideshowTransitions,
            $TransitionsOrder:1,
            $ShowLink: true
        }
                        };
                        
var slider= new $Slider$("slider", options);
                 });
</script>

Answer 1

首先，您的HTML结构不合理且无效。您没有关闭第4个<li>元素，同样，在<ul>元素中，您必须使用style属性来内联应用样式。在您的情况下，像这样：<ul class="slider" style="position: relative; top: 0px; left: 0px; width: 600px;height: 300px;">。

我不知道你从哪里获得了这个Javascript代码，但slickJS documentation非常容易理解。

下面的代码实现了幻灯片，您可以根据需要进行复制，粘贴和修改。查看文档。您可以设置或更改大量选项，以帮助您的滑块执行您想要的操作。此外，请确保以正确的顺序导入所有内容。 jQuery - ＆gt; slickjs - ＆gt;自定义Javascript。确保光滑的CSS链接在头部。

$(document).ready(function (){
  $('.slider').slick({
    dots:true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
});

/*
  modify the slider container with your own custom CSS
  to have it fit or placed in your page how you want.
*/
.slider {
  width:70%;
  margin:0 auto;
}
/*
  I put divs inside that can have their padding modified
  so the images aren't directly up against each other.
  Feel free to play with this CSS to desired affect.
*/
.slide-image-container {
  padding:2%;
}
/*
  This CSS forces the inner images to size to the parent (slide) container
*/
.slide-image-container img {
  width:100%;
}

<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
</div>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

jQuery插件光滑无效

1 个答案: