1

このようなマークアップがあります

<div class="myDiv"><ul>
<li><img src="img1.jpg"/></li>
<li><img src="img1.jpg"/></li>
.
.
.
</ul></div>

このhtmlをスライドショーに変換する必要があります。javascript や jquery を使うのが苦手です。div のクラスを渡せるようにするだけで、リスト内のすべての画像が単純なスライドショーに変換されます。期待して感謝

4

1 に答える 1

2

こんにちは、このデモ を試してくださいhttp://jsfiddle.net/NPcDH/ || http://jsfiddle.net/rQS6h/おそらく&以下のコメントからさらにあなたの個人ページのデモがここにあります - http://jsfiddle.net/2wnws/2/show/

li rest を使用した簡単なスライドショーで、jsfiddle でどのように機能するかを確認できます。何か見逃した場合はお知らせください。

html

<div id="slideshow"> 

    <ul>

        <li class="slideshow_item">

            <a href="#"><img src="http://www.google.com/logos/2011/persiannewyear11-hp.jpg" alt="persiannewyear11-hp" /></a> 

        </li>

        <li class="slideshow_item">

            <a href="#"><img src="http://www.google.com/logos/2011/holi11-hp.jpg" alt="holi11-hp" /></a> 

        </li>

        <li class="slideshow_item">

            <a href="#"><img src="http://www.google.com/logos/2011/sayeddarwish11-hp.jpg" alt="sayeddarwish11-hp" /></a> 

        </li>

        <li class="slideshow_item">

            <a href="#"><img src="http://www.google.com/logos/2011/okamoto11-hp.jpg" alt="okamoto11-hp" /></a> 

        </li>

        <li class="slideshow_item">

            <a href="#"><img src="http://www.google.com/logos/2011/eisner11-hp.jpg" alt="eisner11-hp" /></a> 

        </li>

        <li class="slideshow_item">

            <a href="#"><img src="http://www.google.com/logos/2011/jfkinaugural11-hp.jpg" alt="jfkinaugural11-hp" /></a> 

        </li>

    </ul> 

</div> ​

Jクエリ

/* home slide show */

var slide_pos = 0;
var slide_len = 0;

$(document).ready(function() {

    slide_len = $(".slideshow_item").size() - 1;

    $(".slideshow_item:gt(0)").hide();

    slide_int = setInterval(function() {

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeOut(2000);

        slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeIn(2000);

    }, 5000);

});​

CSS

#slideshow{

    position:relative;
    top:0;
    left:0;

} #slideshow ul, #slideshow li{

    margin:0;
    padding:0;
    list-style-type:none;

} .slideshow_item{

    position:absolute;
    left:0;
    top:0;
    list-style-type:none;

} .slideshow_item img{

    margin:0;
    padding:0;
    vertical-align:bottom;

} ​
于 2012-04-21T09:35:53.837 に答える