个人中心
gpt4 book ai didi

javascript - lof JSliderNews 不起作用

转载 作者：行者123 更新时间：2023-12-03 12:26:49 33 4
gpt4 key购买 nike

我尝试使用 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 更改标签文本

33 4 0
文章推荐： javascript - JS 和 jQuery，函数完成时全局对象变空
文章推荐： javascript - 使用 jquery 和 json 更改标签文本
文章推荐： javascript - 第 0 行错误。Google jquery api
文章推荐： javascript - json 传递给 D3
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com