Question

我的网站上有一个简单的FlexSlider 2幻灯片，但它不能正常工作图像只是进入彼此之下的页面？我是Jquery的新手，所以只是坚持为什么它不起作用？我在header.php中有这些链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script src="js/jquery.flexslider-min.js"></script>

slideshow.php

<script src="assets/js/slideshow.js"></script> //js and images are in assets folder
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="assets/images/winter.jpg" />
        </li>
        <li>
            <img src="assets/images/sunset.jpg" />
        </li>
        <li>
            <img src="assets/images/dock.jpg" />
        </li>
        <li>
            <img src="assets/images/snow.jpg" />
        </li>
    </ul>
</div>
<div class="custom-navigation">
    <a href="#" class="flex-prev">Prev</a>
    <div class="custom-controls-container"></div>
    <a href="#" class="flex-next">Next</a>
</div>

slideshow.js

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlsContainer: $(".custom-controls-container"),
            customDirectionNav: $(".custom-navigation a")
        });
    });
</script>

Answer 1

删除第二个脚本和第四个脚本。
确保Jquery在FlexSlider之前触发。

示例：

<!DOCTYPE html> <html> <head> </head> <body> <div class="flexslider"> <ul class="slides"> <li> <img src="assets/images/winter.jpg" /> </li> <li> <img src="assets/images/sunset.jpg" /> </li> <li> <img src="assets/images/dock.jpg" /> </li> <li> <img src="assets/images/snow.jpg" /> </li> </ul> </div> <div class="custom-navigation"> <a href="#" class="flex-prev">Prev</a> <div class="custom-controls-container"></div> <a href="#" class="flex-next">Next</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: $(".custom-controls-container"), customDirectionNav: $(".custom-navigation a") }); }); </script> </body> </html>

Answer 2

/////用这个////

替换你的slideshow.js代码

<script type="text/javascript">
 $(document).ready(function() {
 $('.flexslider').flexslider({
 animation: "slide",
 controlsContainer: $(".custom-controls-container"),
 customDirectionNav: $(".custom-navigation a")
 });
 });

简单的Jquery幻灯片无法正常工作？

2 个答案: