javascript - lof JSliderNews 不起作用

转载作者：行者123 更新时间：2023-12-03 12:26:49

我尝试使用 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>

我看到这里一切正常，没有错误消息，没有警告。只是不滑动，并且幻灯片不显示。如果我在浏览器中检查源代码并在新选项卡中打开图像，则加载完成。

知道问题出在哪里吗？

最佳答案

工作示例: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
    }); 
});

您遇到了三个错误，首先在 $(document).ready( function(){ 中初始化此插件，并且方向不正确，应该是 direction:'opacitys' 并且您有不透明度。另外，我们缺少移动参数，由于某种原因，如果没有它，该插件将无法工作。

更新:

你没有发布你的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">

关于javascript - lof JSliderNews 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24157880/

上一篇：javascript - 第 0 行错误。Google jquery api

下一篇：javascript - 使用 jquery 和 json 更改标签文本

文章推荐： javascript - JS 和 jQuery，函数完成时全局对象变空

文章推荐： javascript - 使用 jquery 和 json 更改标签文本

文章推荐： javascript - 第 0 行错误。Google jquery api

文章推荐： javascript - json 传递给 D3

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - lof JSliderNews 不起作用

HTML:

JavaScript

更新:

上一篇：javascript - 第 0 行错误。Google jquery api

下一篇：javascript - 使用 jquery 和 json 更改标签文本