如何在段落標籤內的JQuery serialScroll插件庫中添加圖片的標題？

Question

我正在使用Jquery serialScroll插件，並製作了一個向當前圖像添加.active類的水平畫廊。我還想要做的是獲取當前圖像的標題，並在段落標籤內的頁面上顯示它。

我的HTML：

<p class="title"></p> 

<div id="slideshow"> 

<ul> 
<li><img src="www.website.com/1.jpg title="title 1" /></li> 
<li><img src="www.website.com/2.jpg title="title 2" /></li> 
<li><img src="www.website.com/3.jpg title="title 3" /></li> 
<li><img src="www.website.com/4.jpg title="title 4" /></li> 
</ul> 

</div> 

我Javacript：

// Easing equation, borrowed from jQuery easing plugin 
// http://gsgd.co.uk/sandbox/jquery/easing/ 


jQuery.easing.easeOutQuart = function (x, t, b, c, d) { 
    return -c * ((t = t/d - 1) * t * t * t - 1) + b; 
}; 

jQuery(function ($) { 

    var $nav = $('#slideshow li'); 


    $('#slideshow').serialScroll({ 
     items: 'li', 
     prev: '.prev', 
     next: '.next', 
     offset: 0, //when scrolling to photo, stop 230 before reaching it (from the left) 
     start: 0, //as we are centering it, start at the 2nd 
     duration: 1000, 
     force: false, 
     stop: true, 
     constant: false, 
     lock: false, 
     cycle: false, //don't pull back once you reach the end 
     easing: 'easeOutQuart', //use this easing equation for a funny effect 
     jump: true, //click on the images to scroll to them 
     navigation: $nav, 
     onBefore: function (e, el, $p, $i, pos) { 
      $nav.removeClass('newclass'); 
      $nav.eq(pos).addClass('newclass') 
     }, 

    }); 
}); 

我想我需要以某種方式加入此Javascript拿到冠軍：

<script> 
var title = $("li.newclass img").attr("title"); 
$("p.title").text(title); 
</script> 

Answer 1

首先糾正你的HTML和添加結尾引號並修正href部分，如下所示：

<p class="title"></p> 

<div id="slideshow"> 

<ul> 
<li><img src="http://www.website.com/1.jpg" title="title 1" /></li> 
<li><img src="http://www.website.com/2.jpg" title="title 2" /></li> 
<li><img src="http://www.website.com/3.jpg" title="title 3" /></li> 
<li><img src="http://www.website.com/4.jpg" title="title 4" /></li> 
</ul> 

</div> 

要在P一樣的圖片標題的文本，使用相同的功能，在這裏你更改類......像這樣：

// Easing equation, borrowed from jQuery easing plugin 
// http://gsgd.co.uk/sandbox/jquery/easing/ 
jQuery.easing.easeOutQuart = function (x, t, b, c, d) { 
    return -c * ((t=t/d-1)*t*t*t - 1) + b; 
}; 

jQuery(function($){ 

    var $nav = $('#slideshow li'); 
    var pos = 0; 
    $nav.removeClass('newclass'); 
    $nav.eq(pos).addClass('newclass') 
    var title = $("li.newclass img").attr("title"); 
    $("p.title").text(title); 

    $('#slideshow').serialScroll({ 
     items:'li', 
     prev:'.prev', 
     next:'.next', 
     offset:0, //when scrolling to photo, stop 230 before reaching it (from the left) 
     start:0, //as we are centering it, start at the 2nd 
     duration:1000, 
     force:false, 
     stop:true, 
     constant:false, 
     lock:false, 
     cycle:false, //don't pull back once you reach the end 
     easing:'easeOutQuart', //use this easing equation for a funny effect 
     jump: true, //click on the images to scroll to them 
     navigation:$nav, 
     onBefore:function(e,el,$p,$i,pos){ 
      $nav.removeClass('newclass'); 
      $nav.eq(pos).addClass('newclass') 
      var title = $("li.newclass img").attr("title"); 
      $("p.title").text(title); 
     } 
    }); 
});