给个ASP.NET 图片轮换的JS代码，从数据库里面调出来的那个

[Y_gewenna]

给个ASP.NET 图片轮换的JS代码，从数据库里面调出来的那个，
请详细

[Rock870210]

<asp:Content ContentPlaceHolderID="MainContent" ID="ContentID" runat="server">
    <style type="text/css">
        BODY {
	TEXT-ALIGN: center; FONT-FAMILY: "宋体"; BACKGROUND: #ffffff; FONT-SIZE: 12px
}
UL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
OL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DIV {
	TEXT-ALIGN: left; OVERFLOW: hidden
}
IMG {
	BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: top; BORDER-LEFT-WIDTH: 0px
}
.picshow {
	BORDER-BOTTOM: #d9e0ea 1px solid; BORDER-LEFT: #d9e0ea 1px solid; MARGIN: 0px auto; WIDTH: 948px; BORDER-TOP: #d9e0ea 1px solid; BORDER-RIGHT: #d9e0ea 1px solid
}

#picarea {
	MARGIN: 0px auto; WIDTH: 948px; BACKGROUND: #fff; 
}
#bigpicarea {
	POSITION: relative; MARGIN: 0px 20px; WIDTH: 774px; HEIGHT: 680px; OVERFLOW: hidden; FLOAT: left; DISPLAY: inline;
}
.image {
	TEXT-ALIGN: center; padding-bottom:20px;
}
.image IMG {
	BORDER-BOTTOM: #ececec 1px solid; BORDER-LEFT: #ececec 1px solid; MARGIN: 0px auto; BORDER-TOP: #ececec 1px solid; BORDER-RIGHT: #ececec 1px solid
}
#bigpicarea .ui-els-hide {
	DISPLAY: none
}
#thumbs {
	LIST-STYLE-TYPE: none; MARGIN: 0px auto; WIDTH: 100px;
}
* HTML #thumbs {
	HEIGHT: 100%
}
#thumbs LI {
	MARGIN: 0px 7px; WIDTH: 90px; DISPLAY: inline; FLOAT: left; HEIGHT: 60px
}
#thumbs UL {
	MARGIN-TOP: 3px
}
#thumbs LI.last_img {
	MARGIN-RIGHT: 4px
}
#thumbs LI.first {
	MARGIN: 5px 5px 5px 5px; WIDTH: 90px; HEIGHT: 16px; CURSOR: pointer; 
}
#thumbs LI.last {
	MARGIN: 15px 5px 5px 5px; WIDTH: 90px; HEIGHT: 16px; CURSOR: pointer
}
#thumbs LI A {
	BORDER-BOTTOM: #fff 2px solid; BORDER-LEFT: #fff 2px solid; WIDTH: 90px; DISPLAY: block; FONT-SIZE: 0px; BORDER-TOP: #fff 2px solid; BORDER-RIGHT: #fff 2px solid
}
#thumbs LI A:hover {
	BORDER-BOTTOM: #000 2px solid; BORDER-LEFT: #000 2px solid; BORDER-TOP: #000 2px solid; BORDER-RIGHT: #000 2px solid
}
#thumbs LI A.current {
	BORDER-BOTTOM: #f8ae0f 2px solid; BORDER-LEFT: #f8ae0f 2px solid; BORDER-TOP: #f8ae0f 2px solid; BORDER-RIGHT: #f8ae0f 2px solid
}
#thumbs LI.first IMG {
	
}
#thumbs LI.last IMG {
	
}
.bigbtnPrev {
	Z-INDEX: 100; POSITION: absolute; WIDTH: 35px; HEIGHT: 51px; TOP: 186px; CURSOR: pointer; LEFT: 30px
}
.bigbtnNext {
	Z-INDEX: 100; POSITION: absolute; WIDTH: 35px; HEIGHT: 51px; TOP: 186px; CURSOR: pointer; RIGHT: 30px
}
#big_play_prev {
	BACKGROUND-IMAGE: url(../Image/leftbig.png); WIDTH: 35px; DISPLAY: block; HEIGHT: 51px; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../Image/leftbig.png')
}
#big_play_next {
	BACKGROUND-IMAGE: url(../Image/rightbig.png); WIDTH: 35px; DISPLAY: block; HEIGHT: 51px; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../Image/rightbig.png')
}
#smallpicarea {
	MARGIN: 0px 10px 0px 10px; WIDTH: 100px; BORDER-TOP: #ececec 1px solid; PADDING-TOP: 10px; FLOAT: right; DISPLAY: inline;
}
    </style>
    <script type="text/javascript" src="../../Js/jquery-1.4.2.min.js"></script>
    <script src="../../Js/ViewContFiles.js" type="text/javascript"></script>
    <div style="padding-top: 20px" class="wrap picshow">
        <div id="picarea">
            <div id="bigpicarea">
                <p class="bigbtnPrev">
                    <span id="big_play_prev"></span>
                </p>
                <p class="bigbtnNext">
                    <span id="big_play_next"></span>
                </p>
                <%
                    List<ContractImageFiles> list = BContractImageFiles.GetModelListByContractId(Contract_ID);
                    StringBuilder strDiv = new StringBuilder();
                    StringBuilder strsImg = new StringBuilder();
                    StringBuilder strNum = new StringBuilder();
                    strNum.Append("var imgCount=").Append(list.Count-1).Append("; ");
                    strNum.Append("var target = [");
                    for(int i = 0; i < list.Count; i++)
                    {
                        strDiv.Append("<div id=\"image_").Append(i+1).Append("\" class=\"image\"><img alt=\"\" width=\"480\" height=\"660\" ");
                        strDiv.Append("src=\"../../Common/GetContImage.aspx?c=").Append(Com_ID);
                        strDiv.Append("&i=").Append(list[i].Contract_ID);
                        strDiv.Append("&n=").Append(list[i].CIF_BImageName);
                        strDiv.Append("\" /></div>");
                        
                        strsImg.Append("<li class=\"slideshowItem\" ><a id='thumb_").Append(i+1).Append("' href='#'><img width='90' height='60' ");
                        strsImg.Append("src=\"../../Common/GetContImage.aspx?c=").Append(Com_ID);
                        strsImg.Append("&i=").Append(list[i].Contract_ID);
                        strsImg.Append("&n=").Append(list[i].CIF_SImageName);
                        strsImg.Append("\" /></a></li>");
                        
                        strNum.Append("\"" + (i + 1) + "\",");
                    }
                    if(list.Count>0)
                        strNum.Remove(strNum.Length - 1, 1);
                    strNum.Append("];");
                    if(list.Count == 0)
                        strNum.Append("NoImgs();");
                 %>
                 <%
                     Response.Write(strDiv.ToString());
                  %>
                <%--<div id="image_01" class="image">
                    <img alt="" src="Image/42766101.jpg" width="480" height="660" />
                </div>--%>
                
            </div>
            <div id="smallpicarea">
                <div id="thumbs">
                    <ul>
                        <li class="first btnPrev" style="text-align: center;">
                            <img id='play_prev' src="../Image/left.png"></li>
                        <%
                            Response.Write(strsImg.ToString());
                            
                         %>
                        <%--<li class="slideshowItem"><a id='thumb_01' href="#">
                            <img src="Image/42766316.jpg" width='90' height='60' /></a></li>--%>
                        <li class="last btnNext" style="text-align: center;">
                            <img id="play_next" src="../Image/right.png"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        <%
            Response.Write(strNum.ToString());
         %>
         function NoImgs(){
            alert("该合同尚未上传任何附件！");
            var isIE = navigator.appName == "Microsoft Internet Explorer";
            if(isIE){
                window.opener = "";
                window.open("","_self");
                window.close();
            }
            else{
                window.close();
            }
        }
        jQuery(".bigbtnNext").css("display","block");
        jQuery("#big_play_next").css("display","block");
    </script>
</asp:Content>

[Rock870210]

这个是页面的，不要问数据怎么得来之类的，页面基本这样的，动态部分自己根据需要改动
JS文件如下：

[Rock870210]

var index = 0;
//大图交替轮换
function slideImage(i){
	jQuery(".image").hide();
    var id = 'image_'+ target[i];
    jQuery('#'+ id).animate({opacity: 1}, 800).show();
}
//bind thumb a
function hookThumb(){    
    jQuery('#thumbs li a')
        .bind('click', function(){
            var id = this.id;            
            index = getIndex(id.substr(6));
            rechange(index);
            slideImage(index); 
            this.blur();            
            return false;
        });
}
//bind next/prev img
function hookBtn(){
    jQuery('#thumbs li img').filter('#play_prev,#play_next')
        .bind('click', function(){
            var id = this.id;
            if (id == 'play_prev') {
                index--;
                if (index < 0) index = imgCount;
            }else{
                index++;
                if (index > imgCount) index = 0;
            }
            rechange(index);
            slideImage(index);
        });
}
function bighookBtn(){
    jQuery('#bigpicarea p span').filter('#big_play_prev,#big_play_next')
        .bind('click', function(){
            var id = this.id;
            if (id == 'big_play_prev') {
                index--;
                if (index < 0) index = imgCount;
            }else{
                index++;
                if (index > imgCount) index = 0;
            }
            rechange(index);
            slideImage(index);
        });
}
//get index
function getIndex(v){
    for(var i=0; i < target.length; i++){
        if (target[i] == v) return i;
    }
}
function rechange(loop){
    var id = 'thumb_'+ target[loop];
    jQuery('#thumbs li a.current').removeClass('current');
    jQuery('#'+ id).addClass('current');
}
jQuery.noConflict();
jQuery(function(){    
	hookThumb(); 
    hookBtn();
	bighookBtn();
});

[蝶恋花雨]

参考如下网址：ASP.NET实现图片轮换
http://hi.baidu.com/cqhg1981/blog/item/bf8fdd269dc643158a82a100.html
http://blog.csdn.net/qbb3050466/article/details/4170164

[Im_Sorry]

找个JS轮换特效，加以修改，就成动态的了！

[insus]

参考：
http://www.cnblogs.com/insus/articles/1377591.html

[卷泥巴重来]

这个.........你可以用XML啊！