Question

我正在尝试使用一个脚本来制作一个简单的滑块。在jsfiddle上工作得很完美，但是当我在网上复制/粘贴每一个人时，我正在制作......问题是什么？我将不胜感激任何帮助。

谢谢

var $first = $('li:first', 'ul'),
    $last = $('li:last', 'ul');
$("#next").click(function () {
    var $next, $selected = $(".selected");


    $next = $selected.next('li').length ? $selected.next('li') : $first;
    $selected.removeClass("selected");
    $next.addClass('selected');
});

$("#prev").click(function () {
    var $prev, $selected = $(".selected");

    $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
    $selected.removeClass("selected");
    $prev.addClass('selected');
});

li {display:none}

.selected {display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="prev">Previous</button>
<button id="next">Next</button>
<div>
<ul id="">
<li id="pic1"><img src="http://www.cooksmarts.com/wp-content/uploads/2015/09/Pantry-Essentials-Lemons-400x250.jpg" alt="pic1"></li>
<li id="pic2"><img src="https://tendertummys.com/wp-content/uploads/tomatoes-2.jpg" alt="pic2"></li>
<li id="pic3"><img src="http://med.news.am/static/news/b/2014/08/3031.jpg" alt="pic3"></li>
</ul>
</div>

Dropbox link to the page

Answer 1

在操作DOM之前，您必须确保DOM已准备就绪可能jsfiddle注意在DOM准备就绪后javascript被执行您有两个选择：在正文结束标记之前移动脚本标记，或者将您的代码包装在$（文档）.ready（）回调函数中，该函数在DOM准备就绪后调用。

$(document).ready(function() {
    var $first = $('li:first', 'ul'),
        $last = $('li:last', 'ul');

    $("#next").click(function () {
        var $next, $selected = $(".selected");

        $next = $selected.next('li').length ? $selected.next('li') : $first;
        $selected.removeClass("selected");
        $next.addClass('selected');
    });

    $("#prev").click(function () {
        var $prev, $selected = $(".selected");

        $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
        $selected.removeClass("selected");
        $prev.addClass('selected');
    });
});

简单的jquery滑块

1 个答案: