Question

我正在使用ASP.NET MVC3和jQuery Cycle Plugin处理图库项目。这是我的代码：

 $(document).ready(function () {
     $('#s1').cycle({
         fx: 'curtainX',
         speed: 2000,
         next: '#raty',
         timeout: 0,
         after: Rate
     });
 }):

我从页面来源获得以下列表：

<div id="s1" class="slides">     
    <img src="/Photo/Thumbnail/14?size=large" title="walk 071" alt="14" />
    <img src="/Photo/Thumbnail/15?size=large" title="walk 083" alt="15" />
    <img src="/Photo/Thumbnail/16?size=large" title="walk 125" alt="16" />
    <img src="/Photo/Thumbnail/17?size=large" title="001" alt="17" />
    <img src="/Photo/Thumbnail/18?size=large" title="002" alt="18" />
    <img src="/Photo/Thumbnail/19?size=large" title="003" alt="19" />
    <img src="/Photo/Thumbnail/20?size=large" title="004" alt="20" />
    <img src="/Photo/Thumbnail/21?size=large" title="005" alt="21" />
    <img src="/Photo/Thumbnail/22?size=large" title="006" alt="22" />
</div>

问题：我想将幻灯片上当前照片的Id（int）从上面的img url传递给控制器动作，以便我可以在运行时异步显示数据库中的相关信息。我该怎么做？

以下是控制器操作：

public ActionResult AboutMe(int id) 
    {
       var myphoto = dbase.Photos.Single(x => x.PhotoId == id);
        var model = new MeViewModel
        {
            UserName =myphoto.UserProfile.UserName,
            Location =myphoto.UserProfile.Location,
            ...Continue populating model

        };

        return PartialView(model);
    }

Answer 1

您可以在after事件中获取当前幻灯片索引。

在after事件中，您可以使用options param来引用当前的Slide索引。在下面的示例中，getData将是您的ajax调用。

演示（使用当前索引隐藏/显示寻呼机）：http://jsfiddle.net/lucuma/fg6d4/10/

 $('#slideshow').cycle({
    prev: $('.controller .prev', this),
    next: $('.controller .next', this),
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        // you can easily adapt this to hide prev on firstslide and next on last slide
        getData(options.currSlide);

    }

});

获取当前照片jQuery圈幻灯片库的Id

1 个答案: