Javascript lof JSliderNews不'；行不通

我试着用lofjslidernews用图片来滑动我的新闻。我使用以下代码：

<link rel="stylesheet" href="js/jquery/plugins/lof-jslidernews/css/style.css" type="text/css" />
<script src="js/jquery/plugins/lof-jslidernews/lof-jslidernews.js" type="text/javascript"></script>

<script type="text/javascript">
    $('#lofslider-container').lofJSidernews({
        'direction':'opacity',
        'mainWidth':'600',
        'auto':'true',
        'interval':'7000',
        'navPosition':'vertical',
        'navigatorHeight':'100',
        'navigatorWidth':'310',
        'maxItemDisplay':'3',
        'startItem':'1',
        'duration':'600',
        'easing':'easeInOutQuad'
    });
</script>

$（“#lofslider容器”）.lofJSidernews({
“方向”：“不透明度”，
“主宽度”：“600”，
'auto'：'true'，
“间隔”：“7000”，
“导航位置”：“垂直”，
“导航高度”：“100”，
“navigatorWidth”：“310”，
“maxItemDisplay”：“3”，
“startItem”：“1”，
“持续时间”：“600”，
“轻松”：“轻松的外部空间”
});

以下是HTML代码：

<div id="lofslider-container" class="lof-slidecontent">
    <div class="preload"><div></div></div>
        <div class="lof-main-outer">
            <ul class="lof-main-wapper">
                <li>
                    <img src="01.jpg" title="01.jpg" alt="01.jpg">
                    <div class="lof-main-item-desc">
                        <h3><a title="01.jpg" href="">01</a></h3>
                            <p></p>
                    </div>
                </li>
                <li>
                    <img src="02.jpg" title="02.jpg" alt="02.jpg">
                        <div class="lof-main-item-desc">
                            <h3><a title="02.jpg" href="">02</a></h3>
                            <p></p>
                        </div>
                </li>
                <li>
                    <img src="03.jpg" title="03.jpg" alt="02.jpg">
                        <div class="lof-main-item-desc">
                            <h3><a title="03.jpg" href="">03</a></h3>
                            <p></p>
                        </div>
                </li>
                <li>
                    <img src="04.jpg" title="04.jpg" alt="04.jpg">
                        <div class="lof-main-item-desc">
                            <h3><a title="04.jpg" href="">2012-11-05_215226alyH.jpg</a></h3>
                            <p></p>
                        </div>
                </li>
            </ul>
        </div>
        <div class="lof-navigator-outer">
            <ul class="lof-navigator">
                <li>
                    <div>
                        <img src="01-thumb.jpg" title="01.jpg" alt="01.jpg">
                        <h3>01</h3>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="02-thumb.jpg" title="02.jpg" alt="02.jpg">
                        <h3>02</h3>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="03-thumb.jpg" title="03.jpg" alt="03.jpg">
                        <h3>03</h3>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="04-thumb.jpg" title="04.jpg" alt="04.jpg">
                        <h3>04</h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>

01


02


03


04

我看到这里一切正常，没有错误信息，没有警告。只是不幻灯片，幻灯片也不显示。如果我在浏览器中检查我的源代码并在“新建”选项卡中打开图像，那么这就是加载

知道问题出在哪里吗？

工作示例：

HTML: 您有三个错误，首先在$（文档）中初始化此插件。就绪（function（）{并且您的方向不正确，它应该是方向：'opacitys'，并且您有不透明度。另外，我们缺少mobile参数，由于某些原因，此插件在没有它的情况下无法工作

更新： 您没有发布CSS，因此我不知道您是否正确设置了容器的CSS，因此我将其替换为正式设置的容器类名+预定义样式类：

我基本上改变了这一点：

<div id="lofslider-container" class="lof-slidecontent">
    <div class="preload"><div></div></div>
        <div class="lof-main-outer">
            <ul class="lof-main-wapper">

为此：

<div id="lofslider-container" class="lof-slidecontent"  style="width:980px; height:340px;">
    <div class="preload"><div></div></div>
        <div class="main-slider-content" style="width:980px; height:340px;">
            <ul class="sliders-wrap-inner">

<div id="lofslider-container" class="lof-slidecontent">
    <div class="preload"><div></div></div>
        <div class="lof-main-outer">
            <ul class="lof-main-wapper">

<div id="lofslider-container" class="lof-slidecontent"  style="width:980px; height:340px;">
    <div class="preload"><div></div></div>
        <div class="main-slider-content" style="width:980px; height:340px;">
            <ul class="sliders-wrap-inner">