更新

Question

我试图用lof JSliderNews用图片来播放我的新闻。我使用这段代码：

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

以下是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>

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

知道这是什么问题吗？

Answer 1

工作示例：http://jsfiddle.net/Gajotres/nnRmw/2/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <link rel="stylesheet" href="http://www.landofcoder.com/demo/jquery/lofslidernews/css/style1.css" type="text/css" />
        <script src="http://www.landofcoder.com/demo/jquery/lofslidernews/js/jquery.easing.js" type="text/javascript"></script>          
        <script src="http://www.landofcoder.com/demo/jquery/lofslidernews/js/jquery.touchSwipe.min.js" type="text/javascript"></script>    
        <script src="http://www.landofcoder.com/demo/jquery/lofslidernews/js/script.js" type="text/javascript"></script>            
    </head>
    <body>     

        <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">
                    <li>
                        <img src="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbl_980x340.png" 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="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbl_980x340_002.png" 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="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbl_980x340_003.png" 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="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbl_980x340_004.png" 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="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbs/thumbl_980x340.png" title="01.jpg" alt="01.jpg"/>
                            <h3>01</h3>
                        </div>
                    </li>
                    <li>
                        <div>
                            <img src="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbs/thumbl_980x340_002.png" title="02.jpg" alt="02.jpg"/>
                            <h3>02</h3>
                        </div>
                    </li>
                    <li>
                        <div>
                            <img src="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbs/thumbl_980x340_003.png" title="03.jpg" alt="03.jpg"/>
                            <h3>03</h3>
                        </div>
                    </li>
                    <li>
                        <div>
                            <img src="http://www.landofcoder.com/demo/jquery/lofslidernews/images/thumbs/thumbl_980x340_004.png" title="04.jpg" alt="04.jpg"/>
                            <h3>04</h3>
                        </div>
                    </li>
                </ul>
            </div>
        </div>        
    </body>
</html>

的JavaScript

$(document).ready( function(){  
    // buttons for next and previous item                               
    $('#lofslider-container').lofJSidernews( { 
        interval:7000,      
        direction:'opacitys',
        easing:'easeInOutQuad',
        duration:600,
        auto:true,
        maxItemDisplay:3,
        navPosition:'vertical',
        navigatorHeight:100,
        navigatorWidth:310,     
        mainWidth:600,
        startItem:1 ,
        mobile   : true
    }); 
});

你有三个错误，首先在 $（文档）.ready（function（）{）中初始化此插件，你的方向不正确，它应该是方向：'opacitys'你有不透明度。另外你我们缺少移动参数，出于某种原因，如果没有它，这个插件将无法运行。

更新

你没有发布你的CSS，所以我不知道你是否设法为＆lt; div＆gt;正确设置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">

lof JSliderNews不起作用

1 个答案:

HTML：

的JavaScript

更新