0

私はこのスライドショーを持っており、各画像に見出しと説明を画像に重ねて、画像とともにフェードインおよびフェードアウトさせたいと思っています...

使用する各インスタンスのSOL変数をコピーする必要があると思います

//sol = document.getElementById('slidy').getElementsByTagName('img')
//var sho = document.getElementById('slidya').getElementsByTagName('a');

しかし、コード全体を追加せずに、「a」タグと「p」タグの両方を一緒に呼び出す方法があるかどうかを確認しようとしました

たとえば、ここにHTMLを表示したいものがあります

<div id="slidy" class="slidepart fl">
                <img width="100%" src="/img/1.jpg">
                <p>Here is some text...</p>
                <img width="100%" src="/img/2.jpg">
                <p>Here is somemore text...</p>
                <img width="100%" src="/img/3.jpg">
                <p>even more text...</p>
                <img width="100%" src="/img/4.jpg">
                <p>one more time with some text...</p>
                <img width="100%" src="/img/5.jpg">
                <p>Finally, some text...</p>
                   <div class="sl_paginationpart">

以下は私が今持っているものです>>>>>>>>>>>>>>>>>>>

HTML：

<div class="slideContainer">
   <div class="slides">
      <div class="contents" style="width:100%;  margin:0px auto; overflow:hidden;">
         <div id="slidy" class="slidepart fl">
            <img width="100%" src="/img/1.jpg">
            <img width="100%" src="/img/2.jpg">
            <img width="100%" src="/img/3.jpg">
            <img width="100%" src="/img/4.jpg">
            <img width="100%" src="/img/5.jpg">
               <div class="sl_paginationpart">
               <ul id="slidya" class="slpagination">
                  <li><a href="javascript: prevnext(0);" class="prev"></a></li>
                  <li><a href="javascript: thisisit(0)" class="number select">1</a></li>
                  <li><a href="javascript: thisisit(1)" class="number ">2</a></li>
                  <li><a href="javascript: thisisit(2)" class="number ">3</a></li>
                  <li><a href="javascript: thisisit(3)" class="number ">4</a></li>
                  <li><a href="javascript: thisisit(4)" class="number ">5</a></li>
                  <li><a href="javascript: prevnext(1);" class="next"></a></li>
               </ul>             
               </div>
         </div>
      </div>
   </div>
</div>

CSS：

/* ------------------------ START Slider FEATURES ---------------------------- */


.fl{ float:left;}

.slidepart{ width:100%; height:320px; overflow:hidden; position:relative;}
.slidepart img{position:absolute; width:100% }
.slidepart p{position:absolute;height: 100%; opacity: .5%;  }
.sl_paginationpart{ background:url(/../img/slide_paginationbg.png) no-repeat left; width:auto; height:15px; display:block; position:absolute; right:0%; top:5%; padding:6px;}

ul.slpagination{ margin:0px; padding:0px; list-style:none; font-family:arial; }
ul.slpagination li{ margin:0px; padding:0px; list-style:none; float:left; }
ul.slpagination li a.prev{background:url(/../img/sl_prev.png) no-repeat; width:14px; height:15px; display:block; margin-top: 2px;}
ul.slpagination li a.next{background:url(/../img/sl_next.png) no-repeat; width:14px; height:15px; display:block; margin-top: 2px; }
ul.slpagination li a.number{background:url(/../img/sl_nobg.png) no-repeat; width:18px; height:18px ; display:block; text-align:center; margin:0px 3px; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-indent: -1px; }
ul.slpagination li a.select{background:url(/../img/select_sl.png) no-repeat;color:#fff; }


/* ------------------------ END Slider FEATURES ---------------------------- */

JavaScript

<script type="text/javascript">
    var slo=null;
    var sola = Array();
    var prev = 0;
    var cur = 1;
    var timi=null

    $(document).ready(function() {
        sol = document.getElementById('slidy').getElementsByTagName('img')
        var sho = document.getElementById('slidya').getElementsByTagName('a');

        for(var i=1;i<sho.length-1;i++)sola.push(sho[i]);

        for(var i=1;i<sol.length;i++)sol[i].style.display = 'none';

        for(var i=1;i<solb.length;i++)solb[i].style.display = 'none';


        timi = window.setInterval('doslide()',3000);
    })
    function doslide()
        {
            $(sol[prev]).fadeOut(500);
            $(sol[cur]).fadeIn(1000);
            sola[prev].className = 'number'
            sola[cur].className = 'number select'

            prev = cur++;
            if(cur>sol.length-1)
            {
                cur=0;
                prev= sol.length-1;
            }
        }
        function prevnext(mode)
        {
            window.clearInterval(timi);timi=null;

            if(mode)
            {
                if(cur>sol.length-1)
                {
                    cur=0;
                    prev= sol.length-1;
                }
                doslide();      
            }
            else
            {
                cur--;
                prev--;

                if(prev<0)
                {
                    cur=0;
                    prev= sol.length-1;
                }
                if(cur<0)
                {
                    cur=sol.length-1;
                    prev=cur-1 ;        
                }

                $(sol[cur]).fadeOut(500);
                $(sol[prev]).fadeIn(500);
                sola[cur].className = 'number'
                sola[prev].className = 'number select' 
            }
            timi = window.setInterval('doslide()',2000)
        }
        function thisisit(aiyo)
        {
            cur = aiyo
            window.clearInterval(timi);timi=null;

            $(sol[cur]).fadeIn(500);
            $(sol[prev]).fadeOut(1000);
            sola[cur].className = 'number select'
            sola[prev].className = 'number'

            prev=cur
            ++cur;
            if(prev<0)prev = sol.length-1;
            timi = window.setInterval('doslide()',2000)     
        }
</script>
4

1 に答える 1

0

単に切り替える：

sol = document.getElementById('slidy').getElementsByTagName('img')

sol = $(".slide")

次に、クラス名.slideのdivで画像をラップします...次に、必要なすべてのコンテンツを追加できます

そうねえみんな (elclars、Sam Tyson、Ohgodwhy) ありがとう、これは私が手伝っていた他の誰かのスクリプトでした。ああ、次回はもっと良いコメントをお願いします。これはヘルプ フォーラムであり、エキスパート フォーラムではありません。

于 2012-07-03T14:32:55.140 に答える