Question

这里首先加载图像，然后再加载滑动图像。因为动态图像被放在div中。该div被加载。之后，图像逐个加入SlidePicture（）函数我希望在引用页面时完成幻化图像

代码：

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head id="Head1" runat="server">
            <title></title>
            <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
            <style type="text/css">
                body
                {
                    margin: 0px;
                    padding: 0px;
                }
                #divSlideShow
                {
                    position: absolute;
                    height: 500px;
                    padding: 30px 20px 60px 20px;
                    width: 1500px;
                }


                #divSlideShow IMG
                {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 8;
                }

                #divSlideShow IMG.active
                {
                    z-index: 10;
                }

                #divSlideShow IMG.last-active
                {
                    z-index: 9;
                }
                .ImageClass
                {
                    padding: 50px 100px 50px 220px;
                    width: 600px;
                    height: 400px;
                }
            </style>
            <script type="text/javascript">
                function GetData() 
                {

                    var dynamicDiv = document.createElement('div');
                    dynamicDiv.setAttribute('Id', 'divSlideShow');
                    setTimeout("showIt()", 100000);
                    var fileNamesData = document.getElementById('hdnFileNames').value.split('‡');
                    for (var i = 0; i < fileNamesData.length - 1; i++) 
                    {
                        var dynamicImg = document.createElement('img');
                        dynamicImg.setAttribute("src", "Images/" + fileNamesData[i]);
                        dynamicImg.setAttribute("class", "ImageClass");
                        // document.getElementById('divSlideShow').appendChild(dynamicImg);
                        dynamicDiv.appendChild(dynamicImg);
                    }

                    document.getElementById('form2').appendChild(dynamicDiv);
                }
                function showIt() {
                    document.getElementById("divSlideShow").style.visibility = "none";
                }
                $(function () {
                    setInterval("slidePictures()", 5000);
                });

            function slidePictures() {
                var $active = $('#divSlideShow IMG.active');
                //if ($active.length == 0) $active = $('#divSlideShow IMG:last');
                var $next = $active.next().length ? $active.next() : $('#divSlideShow IMG:first');
                $active.addClass('last-active');
                $next.css({ opacity: 0.0 })
                .addClass('active')
                .animate({ opacity: 10.0 }, 1000, function () {
                    $active.removeClass('active last-active');
                });
            }
            </script>
        </head>
        <body onload="GetData()">
            <form id="form2" runat="server">
            <label id="lblImage"></label>
            <asp:HiddenField ID="hdnFileNames" runat="server" />

            </form>
        </body>
        </html>


.cs:
----
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace JquerySlideShow
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var data="";
            string[] fileName = Directory.GetFiles(@"D:\Experiments\Jquery\JquerySlideShow\JquerySlideShow\Images");//D:\Experiments\Jquery\JquerySlideShow\JquerySlideShow\Images
            foreach (var path in fileName)
            {
                 data += (System.IO.Path.GetFileName(path)+"‡");
            }
            hdnFileNames.Value = data;   
        }
    }
}


    Anyone help me.

Answer 1

试试这个jquery插件。-jQuery循环
http://jquery.malsup.com/cycle/

Answer 2

道歉，我的意思是没有冒犯，但你的帖子很难理解。我假设您想要加载图像，然后设置动画，当页面刷新时，您不希望幻灯片再次发生吗？

如果是这种情况，您可以使用第二个ASP隐藏字段，并在动画完成后，为其写入一个值。下次页面回发时，值将保留在视图状态中，动画将不会发生。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Javascripts/jquery-1.7.2.min.js"></script>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#divSlideShow {
    position: absolute;
    height: 500px;
    padding: 30px 20px 60px 20px;
    width: 1500px;
}
#divSlideShow IMG {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}
#divSlideShow IMG.active {
    z-index: 10;
}
#divSlideShow IMG.last-active {
    z-index: 9;
}
.ImageClass {
    padding: 50px 100px 50px 220px;
    width: 600px;
    height: 400px;
}
</style>
<script type="text/javascript">
                function GetData() 
                {

                    var dynamicDiv = document.createElement('div');
                    dynamicDiv.setAttribute('Id', 'divSlideShow');
                    setTimeout("showIt()", 100000);
                    var fileNamesData = document.getElementById('hdnFileNames').value.split('‡');
                    for (var i = 0; i < fileNamesData.length - 1; i++) 
                    {
                        var dynamicImg = document.createElement('img');
                        dynamicImg.setAttribute("src", "Images/" + fileNamesData[i]);
                        dynamicImg.setAttribute("class", "ImageClass");

                        dynamicDiv.appendChild(dynamicImg);
                    }

                    document.getElementById('form2').appendChild(dynamicDiv);
                }
                function showIt() {
                    document.getElementById("divSlideShow").style.visibility = "none";
                }
                $(function () {
                    setInterval("slidePictures()", 5000);
                });

            function slidePictures() {
                var $active = $('#divSlideShow IMG.active'),
                    slideState = jQuery("#hdnSlideState");

                    if (slideState.val() == "") {           

                        var $next = $active.next().length ? $active.next() : $('#divSlideShow IMG:first');
                        $active.addClass('last-active');
                        $next.css({ opacity: 0.0 })
                        .addClass('active')
                        .animate({ opacity: 10.0 }, 1000, function () {
                            $active.removeClass('active last-active');


                            jQuery("#hdnSlideState").val("noMoreSliding");


                        });

                    }
            }
            </script>
</head>
<body onload="GetData()">
<form id="form2" runat="server">
        <label id="lblImage"></label>
        <asp:HiddenField ID="hdnFileNames" runat="server" />
        <asp:HiddenField ID="hdnSlideState" runat="server" value="" clientIDmode="static" />
</form>
</body>
</html>

从文件夹路径动态地在jquery中滑动图像

2 个答案: