<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Slidebox
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Slidebox</h2>
    <div id="davidDemo" class="slideBox">
        <ul class="items">
            <li><a href="javascript:void(0)">
                <img src="../../Images/Chrysanthemum.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">
                    <img src="../../Images/Desert.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">
                        <img src="../../Images/Hydrangeas.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">
                            <img src="../../Images/Jellyfish.jpg" width="300" height="200" /></a>
            </li>
            <li><a href="javascript:void(0)">
                <img src="../../Images/Koala.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">
                    <img src="../../Images/Lighthouse.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">
                        <img src="../../Images/Penguins.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">
                            <img src="../../Images/Tulips.jpg" width="300" height="200" /></a>
            </li>
        </ul>
    </div>
    <script language="javascript" type="text/javascript">
        var InitSlidebox = function () {
            $('#davidDemo').slideBox({
                direction: 'top', //left,top#方向
                duration: 0.3, //滚动持续时间，单位：秒
                easing: 'linear', //swing,linear//滚动特效
                delay: 5, //滚动延迟时间，单位：秒
                startIndex: 1//初始焦点顺序,
            });
        }
        //创建slidebar对象，千万记住不要变动ul li a的层次结构可以更改div的id，不要随意去除slideBox样式否则需要重新更改Slidebox.js中的源码
        var initSlidebox = new InitSlidebox();
    </script>
</asp:Content>