0

スライドショーの作成方法は知っていますが、1 回だけではなく、連続して実行する方法はわかりません。まだスライドショーを作成していないため、コードを表示することはできませんが、実行することはわかっています。<ul>div 内で aを使用overflow: hidden;し、li アイテムで絶対位置を使用して、アイテムが互いに積み重ねられるようにする

アイテムの不透明度が変更されたときにjqueryを使用し、不透明度が0の場合はそのようにループをやり直します。それはどのようにコーディングされますか

他の人が作成したプラグインに頼る必要はありません。

前もって感謝します

4

2 に答える 2

0

不透明度で何をしようとしているのかわかりません。あなたは正しい Ollie です。質問で説明したのと同様の html 構造を使用する必要があります。このように:

<div class="mask">
   <ul class="images">
     <li style="display: none;">
      <img border="0" usemap="#Map" src="images/image.png">
     </li>
     <li style="display: none;"> 
      <img src="images/image1.png"> 
     </li>
    </ul>
</div>
<div class="pagination">
  <ul class="triggers">
    <li class="">1</li>
    <li class="">2</li>
  </ul>
</div>

上記の構造の CSS は次のようになります。

.mask {
    float: left;
    height: 156px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    width: 822px;
}
ul.images {
    left: 0;
    position: relative;
    top: 0;
}
ul.images li {
    left: 0;
    position: absolute;
    top: 0;
}
ul.triggers {
    left: 870px;
    list-style: none outside none;
    top: 250px;
}
ul.triggers li {
    background-color: #000000;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font: bold 10px arial;
    margin: 0 3px;
    padding: 2px;
}
ul.triggers li.selected {
    background-color: #FFFFFF;
    color: #000000;
}

これをスライド ショーとして機能させるスクリプトは、次のようになります。

$(document).ready(function(){
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('selected');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('selected').eq(target).addClass('selected');
}
triggers.click(function() {
if ( !$(this).hasClass('selected') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
function sliderTiming() {
target = $('ul.triggers li.selected').index();
if ( target === lastElem ) { target = 0; }
else { target = target+1; }
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },5000);
}
});

5000 を他の値に変更することで、時間間隔を増減できます。

于 2013-07-27T16:16:29.447 に答える
0

スライドショーを作成する方法を知っているので、ループ部分のコードをいくつか示します。

var images = new Array("image1.jpg", "image2.jpg", etc.)
var index = 0;

// Visually clearer method (my opinion)
function changeImage() {
    index++;
    if (index == images.length) index = 0; // Avoid going out of range

    $("#imageElement").attr("src", images[index]);
}

setInterval("changeImage()", 5000);

// More concise method
setInterval(function() {
    index++;
    if (index == images.length) index = 0;
    $("#imageElement").attr("src", images[index]);
}, 5000);

キャプションが必要な場合は、画像ソース配列に「平行」な配列をお勧めします。

于 2013-07-27T12:07:19.263 に答える