带导航的简单jquery幻灯片？

Question

所以我正在为我的课程创建一个非常简单的jQuery / CSS幻灯片。它大约有十页长，现在它可以正常工作，如果您想按顺序从头到尾，但如果您因任何原因需要刷新页面，它会将您送回第一页。由于它是在较长的一端，我希望能够“点击”某个页面......这可能不会变得太复杂吗？

这是我的 jQuery

function checkNav() {
    if ($('.active-slide').hasClass('first')) {
        $('.prev').hide();
        $('.next').show();
    } else if ($('.active-slide').hasClass('last')) {
        $('.next').hide();
        $('.prev').show();
    } else {
        $('.next').show();
        $('.prev').show();
    }
}
var main = function() {
    checkNav();

    $('.next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next('.slide');

        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        //if nextslide is last slide, go back to the first
        if (nextSlide.length === 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();

        }

        currentSlide.fadeOut(500).removeClass('active-slide');
        nextSlide.fadeIn(1100).addClass('active-slide');

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');

        checkNav();
    });

    //prev slide function
    $('.prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev('.slide');
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        //if prevslide is last slide, go back to the first
        if (prevSlide.length === 0) {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');

        checkNav();
    });
};

$(document).ready(main);

这是 HTML 看起来像

的粗略标记

<div class="slide active-slide first">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>
<div class="slide">
    <div class="content">
        <p>second slide</p>
    </div>
</div>
<div class="slide last">
    <div class="content">
        <p>third slide</p>
    </div>
</div>
<div class="slider-nav">
    <div class="prev">prev</div>
    <ul class="dots">
            <li class="dot active-dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
    </ul>
    <div class="next">next</div>
</div>

这是jsFiddle ...我希望能够点击其中一个项目符号并转到相应的幻灯片....

Answer 1

$('ul.dots li').click(function(){
    var num = $(this).index();
    var currentSlide = $('.active-slide');
    var nextSlide = $('.slide:eq('+num+')');
    var currentDot = $('.active-dot');
    var nextDot = $(this);

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    checkNav();

});

Answer 2

为div添加ID。例如：

<div class="slide active-slide first" id="1">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>
<div class="slide" id="2">
    <div class="content" >
        <p>second slide</p>
    </div>
</div>
<div class="slide last" id="3">
    <div class="content">
        <p>third slide</p>
    </div>
</div>

然后，您可以使用以下内容定位特定幻灯片：

    <ul class="dots">
                <li class="dot active-dot"><a onclick="goto(1)">&bull;</a></li>
                <li class="dot"><a onclick="goto(2)">&bull;</a></li>
                <li class="dot"><a onclick="goto(3)">&bull;</a></li>
        </ul>

<script>
function goto(slide){
$(".slide").removeClass("active-slide");
$("#"+slide).addClass("active-slide");
$("#"+slide).show();
}

Answer 3

我们需要一种方法来“索引”这些项目，我将通过子项来完成，因此添加一个名为slider的父div类：

<div id="slider">
    ...slides here...
</div>

您需要使用localStorage（用于在页面之间保存数据）来跟踪您所在的幻灯片以及导航栏中的点。即使我们离开页面（刷新时），这也可以保存数据，这样我们仍然可以知道我们的最后一页。我将使用它来跟踪每张幻灯片的当前索引。因此，当页面加载时，我们需要检查我们的localStorage项是否存在：

// If we have saved data add it's index to active-slide
if(localStorage.getItem("activeSlide")) {
  $("#slider div.slide")
    .eq(localStorage.getItem("activeSlide"))
    .addClass("active-slide");
  $('.dots li.dot')   
    .eq(localStorage.getItem("activeSlide"))
    .addClass("active-dot");
} else { // Otherwise make them both 0
  $("#slider div.slide")
    .eq('0')
    .addClass("active-slide");
  $('.dots li.dot')   
    .eq('0')
    .addClass("active-dot");    
}

然后，当我们转到下一张幻灯片next或最后一张幻灯片prev时，我们将localStorage项目更新为active-slide中项目的当前索引：

// Make the current index of the item in active slide our updated variable
localStorage.setItem( "activeSlide", 
    $("#slider div.slide").index($(".active-slide")) ); 

<强> Here is a working example

这样，当页面刷新时，我们会停留在我们之前查看过的最后一张幻灯片上。

Answer 4

    <!doctype html>
<html>
<head>



    <style>
        body{
            text-align: center;
        }

        #slideshow{
            margin:0 auto;
            width:600px;
            height:450px;
            overflow: hidden;
            position: relative;
        }

        #slideshow ul{
            list-style: none;
            margin:0;
            padding:0;
            position: absolute;
        }

        #slideshow li{
            float:left;
        }

        #slideshow a:hover{
            background: rgba(0,0,0,0.8);
            border-color: #000;
        }

        #slideshow a:active{
            background: #990;
        }

        .slideshow-prev, .slideshow-next{
            position: absolute;
            top:180px;
            font-size: 30px;
            text-decoration: none;
            color:#fff;
            background: rgba(0,0,0,0.5);
            padding: 5px;
            z-index:2;
        }

        .slideshow-prev{
            left:0px;
            border-left: 3px solid #fff;
        }

        .slideshow-next{
            right:0px;
            border-right: 3px solid #fff;
        }

    </style>

</head>
<body>


    <div id="slideshow">
       <a href="#" class="slideshow-prev">&laquo;</a> 
       <ul>
            <li><img src="1.jpg" alt="photo1" /></li>
            <li><img src="2.jpg" alt="photo2" /></li>
            <li><img src="3.jpg" alt="photo3" /></li>
            <li><img src="4.jpg" alt="photo4" /></li>
       </ul>
        <a href="#" class="slideshow-next">&raquo;</a> 

    </div>

    <!-- 
        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //an image width in pixels 
        var imageWidth = 600;


        //DOM and all content is loaded 
        $(window).ready(function() {

            var currentImage = 0;

            //set image count 
            var allImages = $('#slideshow li img').length;

            //setup slideshow frame width
            $('#slideshow ul').width(allImages*imageWidth);

            //attach click event to slideshow buttons
            $('.slideshow-next').click(function(){

                //increase image counter
                currentImage++;
                //if we are at the end let set it to 0
                if(currentImage>=allImages) currentImage = 0;
                //calcualte and set position
                setFramePosition(currentImage);

            });

            $('.slideshow-prev').click(function(){

                //decrease image counter
                currentImage--;
                //if we are at the end let set it to 0
                if(currentImage<0) currentImage = allImages-1;
                //calcualte and set position
                setFramePosition(currentImage);

            });

        });

        //calculate the slideshow frame position and animate it to the new position
        function setFramePosition(pos){

            //calculate position
            var px = imageWidth*pos*-1;
            //set ul left position
            $('#slideshow ul').animate({
                left: px
            }, 300);
        }

    </script>

</body>
</html>