jquery图像滑块不滑动？

时间：2015-06-03 10:36:55

标签： javascript html image slider

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

<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>

1 个答案:

答案 0 :(得分：0)

我在理解你的问题时遇到了一些麻烦。

您的代码似乎运行良好 

//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 {
	display: block;
	position: relative;
	overflow: hidden;
}
.blueberry .slides li {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.blueberry .slides li img {
	display: block;
	width: 100%;
	max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }

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

}
.blueberry .pager li a span {
	overflow: hidden;
	background: #c0c0c0;
	text-indent: -9999px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-khtml-border-radius: 2px;
	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>

相关问题
最新问题