0

データベースには、ギャラリーのように上下に表示する画像がほとんどありませんが、スライドのように表示したいという要件があります... 1つの画像を表示し、2秒後に別の画像を表示する必要があります..そのように、それを成し遂げる方法は？

これは私のビューコードです

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
@for(int i = 1; i <= Convert.ToInt32(ViewData["count"]); i++)
{
    <img src="@Url.Action("dp", "Home",new { id = i })" />
}
4

1 に答える 1

1

自分で何かを書くことも、利用可能な多くの JavaScript/jQuery スライドショー ライブラリのいずれかを使用することもできます。自分で何かを書く場合、基本的にすべての画像を一度に読み込みますが、それらはすべて非表示にします。次に、JavaScript/jQuery を使用してそれらを表示および非表示にします。

jquery.malsup.com/cycle/ の jQuery Cycle Plugin と呼ばれるものを使用する 1 つの方法を次に示します。

    @{
        ViewBag.Title = "SlideShow";
    }
    <h2>
        SlideShow</h2>
    <style type="text/css">
        .slideshow
        {
            width: 700px;
            height: 700px;
            margin: auto;
        }
        .slideshow img
        {
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #eee;
            margin-left: auto; margin-right: auto; display: block;
        }
    </style>
    <!-- include Cycle plugin -->
    <script src="@Url.Content("~/Scripts/jquery.cycle.all.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });
        });
    </script>
    <div>
        <a href="javascript:history.go(-1)">Back</a> | @Html.ActionLink("Back to Directory", "Index", new { dir = Request.QueryString["dir"] })
    </div>
    <div class="slideshow">
        @for(int i=1;i<=Convert.ToInt32(ViewData["count"]);i++)
        {
           <img src="@Url.Action("dp", "Home",new { id = i})" />
        }
    </div>

とにかくそれが要点です...必要に応じて変更する必要があります。

于 2013-02-05T09:34:06.700 に答える