Question

使用multiview我想制作一个简单的图像滑块。我使用五个视图和三个按钮（播放，暂停，停止）。但是当我点击播放按钮然后使用循环我正在改变视图但它不起作用。这是代码。

 <table style="vertical-align:center">
            <tr>
                <td colspan="3">
                    <asp:MultiView ID="multiview1" runat="server" ActiveViewIndex="0">
                        <asp:View ID="View1" runat="server">
                            <asp:Image ID="Image1" ImageUrl="~/ABA0038_1.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <asp:Image ID="Image2" ImageUrl="~/Baraca.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View3" runat="server">
                            <asp:Image ID="Image3" ImageUrl="~/bdmbat.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View4" runat="server">
                            <asp:Image ID="Image4" ImageUrl="~/cricket helmet.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View5" runat="server">
                            <asp:Image ID="Image5" ImageUrl="~/nike-football.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                    </asp:MultiView>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnPlay" runat="server" Text="Play" OnClick="btnPlay_Click" />
                </td>
                 <td>
                    <asp:Button ID="btnPause" runat="server" Text="Pause" OnClick="btnPause_Click" />
                </td>
                 <td>
                    <asp:Button ID="btnStop" runat="server" Text="Stop" OnClick="btnStop_Click" />
                </td>
            </tr>
        </table>

on play button clik

protected void btnPlay_Click(object sender, EventArgs e)
    {
        for(int i=0;i<4;i++)
        {

            multiview1.ActiveViewIndex = multiview1.ActiveViewIndex + 1;

            System.Threading.Thread.Sleep(4000);

        }
    }

Answer 1

这是您请求的示例滑块代码。我在这里使用了Nivo Slider插件。

这里有很多插件可以下载 在您的Slider.aspx

中

第1步：下载zip文件并在aspx项目文件夹中提取并添加内容\content

<link rel="stylesheet" href="content/nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
        type="text/javascript"></script>
<script src="content/jquery.nivo.slider.pack.js" type="text/javascript"></script>

第2步：为滑块创建Html标记

假设您的\images文件夹中有正确的图像，可以在此处替换

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

第3步：配置滑块

<script type="text/javascript">
  $(document).ready(function() {
    $('#slider').nivoSlider();
  });
</script>

第4步：在问题中查看我的评论..

Answer 2

请将我的解决方案用于学习目的。

具有播放按钮无济于事，因为一旦循环执行完毕，页面就会显示出来。
但是我们可以实现prev和Next按钮，以了解视图的美丽和动态

这是我编写的用于实现Prev和Next来满足图像更改的简单代码

Galary.aspx

    <div class="panel panel-primary col-md-4 col-md-offset-4 modal-content" style="padding:0px; margin-top:30px;">
    <div class="panel-heading">
        Image Slider
    </div>
    <div class="panel-body">
        <asp:MultiView runat="server" ID="MultiView1"> 
            <asp:View runat="server" ID="View1">
                <img src="Images/home.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
             <asp:View runat="server" ID="View2">
                <img src="Images/1.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
             <asp:View runat="server" ID="View3">
                <img src="Images/2.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
             <asp:View runat="server" ID="View4">
                <img src="Images/3.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
        </asp:MultiView>
    </div>
    <div class="panel-footer">
        <asp:Button runat="server" CssClass="btn btn-primary" Text="Prev" OnClick="btn_clickPrev" />
        <%--<asp:Button runat="server" CssClass="btn btn-danger" Text="Play" />--%>
        <asp:Button runat="server" CssClass="btn btn-primary pull-right" Text="Next" OnClick="btn_clickNext" />
    </div>
</div>

Galary.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack){
            ImageSlider(0);
        }
    }


    public void ImageSlider(int i) {
        MultiView1.ActiveViewIndex = i;
    }

    protected void btn_clickNext(object sender, EventArgs e)
    {
        if ((MultiView1.ActiveViewIndex + 1)<4)
        {
         ImageSlider(MultiView1.ActiveViewIndex+1);
        }
        else
        {
            ImageSlider(MultiView1.ActiveViewIndex);
        }
    }

    protected void btn_clickPrev(object sender, EventArgs e)
    {
        if ((MultiView1.ActiveViewIndex - 1)>=0)
        {
            ImageSlider(MultiView1.ActiveViewIndex-1);
        }
        else
        {
            ImageSlider(MultiView1.ActiveViewIndex);
        }
    }
}

外观

注意

这不是实现图像滑块的最佳方法，因为它在更改图像时会不断加载页面。但是，为了更多地了解视图，这就是最好的实现方法。

多视图不改变视图

2 个答案: