1

我在普通的 .php 文件中测试了这个脚本，但是当把代码放在 wordpress 头文件中时，脚本不起作用。有人可以告诉我如何将 CarouFredSel 滑块放在 wordpress 主题中吗？这是我在 .php 文件中使用的代码，一切正常：

        <!-- include jQuery + carouFredSel plugin -->
    <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>

    <!-- optionally include helper plugins -->
    <script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
    <script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
    <script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>

    <!-- fire plugin onDocumentReady -->
    <script type="text/javascript" language="javascript">
        $(function() {

            //  Basic carousel, no options
            $('#foo0').carouFredSel();

            //  Basic carousel + timer, using CSS-transitions
            $('#foo1').carouFredSel({
                auto: {
                    pauseOnHover: 'resume',
                    progress: '#timer1'
                }
            }, {
                transition: true
            });

            //  Scrolled by user interaction
            $('#foo2').carouFredSel({
                auto: false,
                prev: '#prev2',
                next: '#next2',
                pagination: "#pager2",
                mousewheel: true,
                swipe: {
                    onMouse: true,
                    onTouch: true
                }
            });

            //  Variable number of visible items with variable sizes
            $('#foo3').carouFredSel({
                width: 360,
                height: 'auto',
                prev: '#prev3',
                next: '#next3',
                auto: false
            });

            //  Responsive layout, resizing the items
            $('#foo4').carouFredSel({
                responsive: true,
                width: '100%',
                scroll: 2,
                items: {
                    width: 400,
                //  height: '30%',  //  optionally resize item-height
                    visible: {
                        min: 2,
                        max: 6
                    }
                }
            });

            //  Fuild layout, centering the items
            $('#foo5').carouFredSel({
                width: '100%',
                scroll: 2
            });

        });
    </script>

    <style type="text/css" media="all">

        .list_carousel {
            background-color: #ccc;
            margin: 0 0 30px 60px;
            width: 900px;

        }
        .list_carousel ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: block;
        }
        .list_carousel li {
            font-size: 40px;
            color: #999;
            text-align: center;
            background-color: #eee;
            border: 5px solid #999;
            width: 400px;
            height: 400px;
            padding: 0;
            margin: 6px;
            display: block;
            float: left;
        }
        .list_carousel.responsive {
            width: auto;
            margin-left: 0;
        }
        .clearfix {
            float: none;
            clear: both;
        }

    </style>

    <p>Basic carousel.</p>
        <div class="list_carousel">
            <ul id="foo1">  
            <?php 
            $html = "";
            $url = "http://rss.dnevnik.hr/index.rss";
            $xml = simplexml_load_file($url);
            for ($i = 0; $i <10; $i++) {
            $title = $xml->channel->item[$i]->title;
            $link = $xml->channel->item[$i]->link; 
            $opis = $xml->channel->item[$i]->description;

            $html .= "<li><div><a href='$link'><h3>$opis<h3></a></div></li>";}
            echo $html;
            ?>
            </ul>


            <div class="clearfix"></div>
        </div>
        <br />
4

0 回答 0