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')

溶胶 = $(".slide")

然后用类名 .slide 的 div 包装你的图像...然后你可以添加你需要的所有内容

天哪，伙计们（elclanrs、Sam Tyson、Ohgodwhy）谢谢，这是我正在帮助的其他人的脚本，我知道有一个简单的解决方法，但脑子里放了个屁；哦，好吧，下次请对您的评论更好，这是一个帮助论坛而不是专家论坛。

于 2012-07-03T14:32:55.140 回答