jQuery的图像滑块不滑？

Question

蓝莓图片滑块不滑动，这里是java脚本代码，请帮我修改或添加足够的代码，以便它能正常工作。我也链接了blueberry.css和jquery.blueberry.js文件。谢谢 - 学生Web开发

<meta charset="UTF-8"></meta> 
<title>Rose Street | Auto Repair</title> 
<meta name="viewport" content="width=device-width, initail-scale=1.0"></meta> 
<link rel="stylesheet" href="main.css"></link> 
<link rel="stylesheet" href="font-awesome.css"></link> 
<link rel="stylesheet" href="blueberry.css"></link> 
<link rel="stylesheet" href="style2.css"></link> 
<link rel="stylesheet" id="google-fonts-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C300italic%2C300%2C600%2C600italic%7CLato%3A400%2C100%2C300%2C700&amp;ver=4.0.5" type="text/css" media="all"></link> 

<script src="https://apis.google.com/js/platform.js"> async defer></script> 
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"</script> 
<script src="jquery.blueberry.js"></script> 
<script> 
    $(window).load(function() { 
     $('.blueberry').blueberry(); 
    }); 
</script> 
<script type="text/javascript"> 
    function Scroll(){ 
     var top = document.getElementById('header'); 
     var ypos = window.pageYOffset; 
     if(ypos < 700) { 
      top.style.opacity = ".9"; 
      top.style.height= "86px" 
     }else{ 
      top.style.opacity = ".5"; 
      top.style.height= "100px" 
     } 
    } 
    window.addEventListener("scroll",Scroll); 
</script> 
<script type="text/javascript"> 
    $(function(){ 
     $("#header").fadeToggle(1).delay(2000).fadeToggle(2000); 
     $("#logo").fadeToggle(1).delay(2000).fadeToggle(2000); 
     $("nav").fadeToggle(1).delay(2500).slideToggle(1000); 
    }); 
</script> 

HTML：

<div id="doc"> 
    <div id="content"> 
     <div class="blueberry"> 
      <ul class="slides"> 
       <li class="" style="display: inline;"> 
        <img src="http://ultraimg.com/images/93ee8dce5462.jpg" alt="slide1"> 
       </li> 
       <li class="active" style="display: inline;"> 
        <img src="http://ultraimg.com/images/85173643ed34.jpg" alt="slide2"> 
       </li> 
       <li class="" style="display: none;"> 
        <img src="http://www.thehogring.com/wp-content/uploads/2012/11/The-Hog-Ring-Auto-Upholstery-Community-Auto-Trimmer-History-11.jpg" alt="slide3"> 
       </li> 
       <li class="" style="display: none;"> 
        <img src="http://theoldmotor.com/wp-content/uploads/2013/11/Euclid1-600x351.jpg" alt="slide4"> 
       </li> 
      </ul> 
      <ul class="pager"> 
       <li class=""> 
        <a href="#"><span>0</span></a> 
       </li> 
       <li class=""> 
        <a href="#"><span>1</span></a> 
       </li> 
       <li class=""> 
        <a href="#"><span>2</span></a> 
       </li> 
       <li class="active"> 
        <a href="#"><span>3</span></a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

我有些无法理解你的问题。

你的代码似乎工作得很好

//jQuery Blueberry Slider v0.4 BETA 
 
!function(e){e.fn.extend({blueberry:function(a){var i={interval:5e3,duration:500,lineheight:1,height:"auto",hoverpause:!1,pager:!0,nav:!0,keynav:!0},a=e.extend(i,a);return this.each(function(){var i=a,n=e(this),t=e(".slides li",n),u=e(".pager li",n),s=0,c=s+1,l=t.eq(s).find("img").height(),r=t.eq(s).find("img").width(),d=r/l,o=0,h=0;t.hide().eq(s).fadeIn(i.duration).addClass("active"),u.length?u.eq(s).addClass("active"):i.pager&&(n.append('<ul class="pager"></ul>'),t.each(function(a){e(".pager",n).append('<li><a href="#"><span>'+a+"</span></a></li>")}),u=e(".pager li",n),u.eq(s).addClass("active")),u&&e("a",u).click(function(){return clearTimeout(n.play),c=e(this).parent().index(),f(),!1});var f=function(){t.eq(s).fadeOut(i.duration).removeClass("active").end().eq(c).fadeIn(i.duration).addClass("active").queue(function(){p(),e(this).dequeue()}),u&&u.eq(s).removeClass("active").end().eq(c).addClass("active"),s=c,c=s>=t.length-1?0:s+1},p=function(){n.play=setTimeout(function(){f()},i.interval)};p(),i.hoverpause&&t.hover(function(){clearTimeout(n.play)},function(){p()});var v=function(){o=e(".slides",n).width(),h=Math.floor(o/d/i.lineheight)*i.lineheight,e(".slides",n).css({height:h})};v(),e(window).resize(function(){v()}),i.keynav&&e(document).keyup(function(e){switch(e.which){case 39:case 32:clearTimeout(n.play),f();break;case 37:clearTimeout(n.play),c=s-1,f()}})})}})}(jQuery); 
 

 
$(window).load(function() { 
 
    $('.blueberry').blueberry(); 
 
});

/* 
 
* jQuery Blueberry Slider v0.4 BETA 
 
* http://marktyrrell.com/labs/blueberry/ 
 
* 
 
* Copyright (C) 2011, Mark Tyrrell <me@marktyrrell.com> 
 
* 
 
* This program is free software: you can redistribute it and/or modify 
 
* it under the terms of the GNU General Public License as published by 
 
* the Free Software Foundation, either version 3 of the License, or 
 
* (at your option) any later version. 
 
* 
 
* This program is distributed in the hope that it will be useful, 
 
* but WITHOUT ANY WARRANTY; without even the implied warranty of 
 
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
 
* GNU General Public License for more details. 
 
* 
 
* You should have received a copy of the GNU General Public License 
 
* along with this program. If not, see <http://www.gnu.org/licenses/>. 
 
* 
 
*/ 
 

 
.blueberry { margin: 0 auto; } 
 
.blueberry .slides { 
 
\t display: block; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 
.blueberry .slides li { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t overflow: hidden; 
 
} 
 
.blueberry .slides li img { 
 
\t display: block; 
 
\t width: 100%; 
 
\t max-width: none; 
 
} 
 
.blueberry .slides li.active { display: block; position: relative; } 
 
.blueberry .crop li img { width: auto; } 
 

 
.blueberry .pager { 
 
\t height: 40px; 
 
\t text-align: center; 
 
} 
 
.blueberry .pager li { display: inline-block; } 
 
.blueberry .pager li a, 
 
.blueberry .pager li a span { 
 
\t display: block; 
 
\t height: 4px; 
 
\t width: 4px; 
 
} 
 
.blueberry .pager li a { 
 
\t padding: 18px 8px; 
 
\t -webkit-border-radius: 6px; 
 
\t -moz-border-radius: 6px; 
 
\t -o-border-radius: 6px; 
 
\t -ms-border-radius: 6px; 
 
\t -khtml-border-radius: 6px; 
 
\t border-radius: 6px; 
 

 
} 
 
.blueberry .pager li a span { 
 
\t overflow: hidden; 
 
\t background: #c0c0c0; 
 
\t text-indent: -9999px; 
 
\t -webkit-border-radius: 2px; 
 
\t -moz-border-radius: 2px; 
 
\t -o-border-radius: 2px; 
 
\t -ms-border-radius: 2px; 
 
\t -khtml-border-radius: 2px; 
 
\t border-radius: 2px; 
 

 
} 
 
.blueberry .pager li.active a span { background: #404040; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://raw.githubusercontent.com/marktuk/Blueberry/master/blueberry.css"></link> 
 
<div id="doc"> 
 
     <div id="content"> 
 
      <div class="blueberry"> 
 
       <ul class="slides"> 
 
        <li class="" style="display: inline;"><img src="http://ultraimg.com/images/93ee8dce5462.jpg" alt="slide1"></li> 
 
        <li class="active" style="display: inline;"><img src="http://ultraimg.com/images/85173643ed34.jpg" alt="slide2"></li> 
 
        <li class="" style="display: none;"><img src="http://www.thehogring.com/wp-content/uploads/2012/11/The-Hog-Ring-Auto-Upholstery-Community-Auto-Trimmer-History-11.jpg" alt="slide3"></li> 
 
        <li class="" style="display: none;"><img src="http://theoldmotor.com/wp-content/uploads/2013/11/Euclid1-600x351.jpg" alt="slide4"></li> 
 
       </ul>     
 
       <ul class="pager"> 
 
        <li><a href="#"><span></span></a></li> 
 
        <li><a href="#"><span></span></a></li> 
 
        <li><a href="#"><span></span></a></li> 
 
        <li><a href="#"><span></span></a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div>