0

プラグインを使用せずにスライドショーを作成しようとしています。高さを減らして画像に合わせて変化するタイマーとクリックイベントのあるタイマーが必要です。https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html。これは私が試しているものです。

HTML

<div id="panel">
  <img id="imageSlide" alt="" src="" width="250px" />
</div>

<div id="timer">
<a href="">
<span class="reduce_height">1</span> 
</a>

<a href="">
<span class="reduce_height">2</span> 
</a>

<a href="">
<span class="reduce_height">3</span> 
</a>

<a href="">
<span class="reduce_height">4</span> 
</a>

</div>

Jquery

$(function() {

    var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];

    var maximages = imgs.length; //No of Images
    $(function() {
        setInterval(Slider, 3000);
    });
    var prevIndex = 0;

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
            var shuffleIndex = Math.floor(Math.random() * maximages);
            if (prevIndex == shuffleIndex) {
                while (prevIndex != shuffleIndex) {
                    shuffleIndex = Math.floor(Math.random() * maximages);
                }
            }
            $("#panel").fadeIn("slow").css('background', '#000');

            $(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
        });
    }

});
4

1 に答える 1

0 
$(function() {

    var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];

   var maximages = imgs.length; //No of Images
   Slider();
   setInterval(Slider, 3000);
   var prevIndex = 0, prevPrevIndex = 0;

   function Slider() {
       $('#imageSlide').fadeOut("slow", function() {
           do {
               shuffleIndex = Math.floor(Math.random() * maximages);
           } while(prevIndex == shuffleIndex || prevPrevIndex == shuffleIndex)

           prevPrevIndex = prevIndex;
           prevIndex = shuffleIndex;

           $("#panel").fadeIn("slow").css('background', '#000');

           $(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
       });
   }

});

画像が繰り返される頻度が少なくなるように配置しましたprevPrevIndex））削除できます

于 2012-07-29T07:42:46.583 に答える