Jquery幻灯片图片标题

时间:2013-04-28 21:02:59

标签: jquery slideshow jquery-cycle caption

我正在尝试使段落的文本等于我正在使用此代码的图像的alt标记和jquery的循环插件。

<html>
<head>
<style type="text/css">.slideshow{height:770px;width:365px;margin:auto}.slideshow    img{padding:10px;border:1px solid #ccc;background-color:#000000}</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">$(document).ready(function(){
///Added ready function to ensure code works on slower browsers
$(document).ready(function(){$('.slideshow').cycle({fx:'fade', pause: 1});});
    $("#test1").text(("#slideshow2").attr("alt"));
  });
});
</script>
</head>
<body>
    <div id="slideshow2" class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"  width="365" height="770" alt="1"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="365" height="770" alt="2"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="365" height="770" alt="3"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="365" height="770" alt="4"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="365" height="770" alt="5"/>
</div>
<p id=test1></p>
</body>
</html>

谢谢你,并提前抱歉我所假设的是一个相当愚蠢的问题。

1 个答案:

答案 0 :(得分:0)

你可以这样做:

$(document).ready(function(){
    $('.slideshow').cycle({
        fx:'fade', 
        pause: 1,
        after: function() {
           var altText = $('#slideshow2').find('img:visible').attr('alt');
           $('#test1').text(altText);
        }
    });
});