Простое автоматическое слайд-шоу в jQuery - PullRequest
Новая
       21

Простое автоматическое слайд-шоу в jQuery

1 голос
/ 23 сентября 2011

У меня есть простое слайд-шоу, которое пока работает нормально. он состоит из пейджера и изображений для отображения. оба являются неупорядоченным списком: 

<ul id="keyvisualpager">
    <li><a><span>Show Keyvisual 1</span></a></li>
    <li><a><span>Show Keyvisual 2</span></a></li>
    <li><a><span>Show Keyvisual 3</span></a></li>               
</ul>

<ul id="keyvisualslides">
    <li><img src="index_files/mbr_keyvisual1.jpg" alt="Keyvisual" /></li>
    <li><img src="index_files/mbr_keyvisual2.jpg" alt="Keyvisual" /></li>
    <li><img src="index_files/mbr_keyvisual3.jpg" alt="Keyvisual" /></li>
</ul>

Соответствующий код jQuery: 

$('#keyvisualpager li a').click(function () { 

    // get position of a element
    var mbr_index = $(this).parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 1;

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

});

изначально все изображения настроены на отображение: нет; ... upcon, щелкнув ссылку в #keyvisualpager, отобразится соответствующее изображение. в то же время индикатор меняется соответственно.

Теперь моя проблема:

Помимо этого режима навигации по изображениям, мне нужно целое слайд-шоу для автоматического продвижения. Как я могу достичь этого:

а) следующее изображение показывается после, скажем, 5 секунд и

b) класс ".keyvisualactive" добавлен к соответствующему элементу в # keyvisualpager

примечание: к сожалению, я должен использовать jquery 1.2.1, обновление не вариант.

спасибо за вашу помощь, ребята

EDIT

Я сейчас использую этот код. это почти работает. но после того, как отображается последнее изображение в наборе: как я могу сказать, чтобы оно началось с первого изображения? спасибо! 

var reload = setInterval(function(){
    // get position of a element
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 2;
    // alert(mbr_index+'//'+mbr_targetkeyvisual)

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

}, 2000);

Ответы [ 2 ]

1 голос
/ 23 сентября 2011

Для этого можно использовать метод JavaScript setInterval (). 

var reload = setInterval(function(){
            // do something
}, 5000);

Число - это длина каждой паузы в миллисекундах.

Чтобы остановить слайд-шоу, например, когда пользовательВыберите изображение, вы можете использовать метод clearInterval ().

РЕДАКТИРОВАТЬ

Попробуйте что-то вроде этого: 

$('#keyvisualpager li a').click(function () {

    var reload = setInterval(function(){

        // get position of a element
        var mbr_index = $(this).parent().prevAll().length;
        var mbr_targetkeyvisual = mbr_index + 1;

        // hide current image and show the target image
        $('#keyvisualslides li:visible').hide();        
        $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

        // remove active class from current indicator and add the same class to target indicator
        $('#keyvisualpager li a').removeClass('keyvisualactive');
        $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

    }, 5000);

    $('#pagerstop').click(function(){
        clearInterval(reload);
    }

});

РЕДАКТИРОВАТЬ 2

Вы должны следить за количеством изображений и индексом, на котором вы находитесь (если я правильно понял, у вас есть это в вашем var mbr_targetkeyvisual?), Поэтому он должен работать следующим образом (не проверено): 

// Image count
var content_length = $('#keyvisualslides').children().length;

var automate = setInterval(function(){
    if(index < content_length){
        $('#keyvisualslides li:visible').hide();        
        $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();
        mbr_targetkeyvisual++;
    }
    else{
        mbr_targetkeyvisual = 0;
        $('#keyvisualslides li:visible').hide();
        $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();
        mbr_targetkeyvisual++;
    }
}, 5000);
0 голосов
/ 10 октября 2014

как сделать это автоматизированным, или мы можем добавить навигацию далее и пред 

$(function(){
  $('.slide-thumb .thumb').on("mouseenter",function(){
      var dataImage = $(this).data('image');
      $('.slide-jumbo .jumbo:visible').fadeOut(1000,function(){
         $('.slide-jumbo .jumbo[data-image="'+dataImage+'"]').fadeIn(500); 
      });
  });
});
    * { 
        font-family: Arial;
    }
    .slide-container {
        /*border: solid 1px;*/
        width: 500px;
        height: 360px;
    }
    .slide-jumbo {
        /*border: solid 1px;*/
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    .jumbo {
        position: relative;  
        display: inline-block;
        width: 500px;
        height: 300px;
        float: left;
    }
    .jumbo img, .thumb img {
        position: absolute;  
        left: 0;
    }
    .jumbo img {
        top: 0;
    }
    .thumb img {
        bottom: 0;
    }
    .jumbo-capt, .thumb-capt {
        width: 100%;
        background-color: rgba(0,0,0,0.8);  
        position: absolute;  
        color: #fff;  
        z-index: 100; 
      /*  -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  */
        left: 0;  
        bottom: 0;
    }
    .slide-thumb {
        /*border: solid 1px;*/
        width: 500px;
        height: 60px;
        overflow: hidden;
    }
    .thumb {
        position: relative;  
        /*border: solid 1px;*/
        display: inline-block;
        width: 100px;
        height: 60px;
        overflow: hidden;
        float: left;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slide-container">
    <div class="slide-jumbo">
        <div class="jumbo" data-image="1">
            <img src="images/2.png">
            <div class="jumbo-capt">
                <h3>Title 1</h3>
                <p>Summary 1</p>
            </div>
        </div>
        <div class="jumbo" data-image="2">
            <img src="images/3.png">
            <div class="jumbo-capt">
                <h3>Title 2</h3>
                <p>Summary 2</p>
            </div>
        </div>
        <div class="jumbo" data-image="3">
            <img src="images/9.png">
            <div class="jumbo-capt">
                <h3>Title 3</h3>
                <p>Summary 3</p>
            </div>
        </div>
        <div class="jumbo" data-image="4">
            <img src="images/7.png">
            <div class="jumbo-capt">
                <h3>Title 4</h3>
                <p>Summary 4</p>
            </div>
        </div>
        <div class="jumbo" data-image="5">
            <img src="images/9.png">
            <div class="jumbo-capt">
                <h3>Title 5</h3>
                <p>Summary 5</p>
            </div>
        </div>
    </div>
    <div class="slide-thumb">
        <div class="thumb" data-image="1">
            <img src="images/2small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 1
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="2">
            <img src="images/3small.png">
            <div class="thumb-capt">
               <p>
                    <strong>
                        Title 2
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="3">
            <img src="images/9small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 3
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="4">
            <img src="images/7small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 4
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="5">
            <img src="images/9small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 5
                    </strong>
                </p>
            </div>
        </div>
    </div>
</div>
...