如何将文本移动到滑块箭头下方

Question

我有这个例子：

https://jsfiddle.net/kLbgkLej/

<div id="slideshow">
    <ul>
        <li>
            <img src="http://www.steaguridrapele.ro/userfiles/image/generale/steagul-Germaniei.jpg" alt="photo1" />
            <p>asdas</p>
        </li>
        <li>
            <img src="http://unitatespeciala.real-web.ro/images/product_images/810649_um.jpg" alt="photo2" />
            <p>ddd</p>
        </li>
        <li>
            <img src="http://www.steaguri.com/wp-content/uploads/Australia.png" alt="photo3" />
            <p>eee</p>
        </li>
    </ul>
    <a href="#" class="slideshow-prev">prev</a> 
    <a href="#" class="slideshow-next">next</a> 
</div>

jQuery(document).ready(function($) {
    $(document).ready(function(){
        $('#slideshow ul li').hide();
        $('#slideshow ul li:first').fadeIn();
        setInterval(function () {
            $('.slideshow-next').click();
        }, 600000);

        var CurrentImage = 0;
        var AllImages = $('#slideshow ul li').length;
        var NextImage = CurrentImage+1;

        $('.slideshow-next').click(function(){
            CurrentImage++;
            if (CurrentImage >= AllImages) {
                CurrentImage = 0;
            }
            $('#slideshow ul li').hide();
            $('#slideshow ul li').eq(CurrentImage).fadeIn();
        });

        $('.slideshow-prev').click(function(){
            CurrentImage--;
            if (CurrentImage >= AllImages) {
                CurrentImage = 0;
            }
            $('#slideshow ul li').hide();
            $('#slideshow ul li').eq(CurrentImage).fadeIn();
        });
    });    
}); 

如您所见，我的文字p与列表有关。 这不允许我将该段移到想要的位置。

<li>
    <img src="http://www.steaguridrapele.ro/userfiles/image/generale/steagul-Germaniei.jpg" alt="photo1" />
    <p>asdas</p>
</li>

我把图片更清楚地了解了他们想要什么。

我认为应该对其进行修改，并使用脚本jQuery，但我意识到自己如何解决此问题？ 文本必须仍然保留，但必须与列表无关。 我希望我能使自己理解。

您能帮我解决这个问题吗？

提前致谢！

Answer 1

HTML：

   <div id="slideshow">

       <ul>
           <li><img src="http://www.steaguridrapele.ro/userfiles/image/generale/steagul-Germaniei.jpg" alt="photo1" /></li>
           <li><img src="http://unitatespeciala.real-web.ro/images/product_images/810649_um.jpg" alt="photo2" /></li>
           <li><img src="http://www.steaguri.com/wp-content/uploads/Australia.png" alt="photo3" /></li>

       </ul>
<a href="#" class="slideshow-prev">prev</a> 
   <a href="#" class="slideshow-next">next</a> 
     <div class="text">
     <p>TEXT PENTRU PRIMA IMAGINE</p>
     <p>TEXT PENTRU A DOUA IMAGINE</p>
     <p>TEXT PENTRU A TREIA IMAGINE</p>
      </div>



       </div>

CSS：

   img{width:100px;height:100px;}
ul li {
    list-style:none;
    position: relative;
}
#slideshow p {
   display:none;
}

JS：

  jQuery(document).ready(function($) {
    $('p:first').fadeIn();
  $(document).ready(function(){

                   $('#slideshow ul li').hide();
                   $('#slideshow ul li:first').fadeIn();
 setInterval(function () {
                 $('.slideshow-next').click();
}, 600000);

                   var CurrentImage=0;

                   var AllImages=$('#slideshow ul li').length;

                   var NextImage=CurrentImage+1;

                $('.slideshow-next').click(function(){
                     CurrentImage++;
                    if(CurrentImage>=AllImages)
                    {
                        CurrentImage=0;
                    }
                    $('#slideshow ul li').hide();
                    var s = $('#slideshow ul li');
                    var ss = s.eq(CurrentImage);
                    var selected = $('.text p:nth-child('+(s.index(ss)+1)+')');
                        ss.fadeIn(); 


                    selected.fadeIn();
                    $('p').not(selected).hide();

                });


            $('.slideshow-prev').click(function(){
                 CurrentImage--;
                if(CurrentImage>=AllImages)
                {
                    CurrentImage=0;
                }
                $('#slideshow ul li').hide();
                    var s = $('#slideshow ul li');
                    var ss = s.eq(CurrentImage);
                    var selected = $('.text p:nth-child('+(s.index(ss)+1)+')');
                        ss.fadeIn(); 


                    selected.fadeIn();
                    $('p').not(selected).hide();

            });




     });



}); 

https://jsfiddle.net/kLbgkLej/8/