如何动态显示图像 [英] How to display image dynamically

问题描述

如何以自动旋转方式动态显示文件夹中的图像



我尝试过：

 <   script  < span class =code-attribute>   type   =  text / javascript >  
  / *   ** 
简单的jQuery幻灯片脚本
由Jon Raasch（jonraasch.com）根据FreeBSD许可证发布：免费使用或修改，
不负责任何事情，如果你愿意，请链接到我:) 
 *** /  
 
 功能 slideSwitch（ ）{
  var  $ active = $（'  #cphBack ground_slideshow IMG.active'）; 
 
  if （$ active.length ==  0 ）$ active = $ （' ＃cphBackground_slideshow IMG：last'）; 
 
  //  用它来按照它们在标记中出现的顺序拉出图像 
  var  $ next = $ active.next（）。length？ $ active.next（）
：$（' ＃cphBackground_slideshow IMG：first'）; 
 
  //  取消注释以下3行以随机顺序提取图像 
 
  //   var $ sibs = $ active.siblings（）;  
  //   var rndNum = Math.floor（Math.random（）* $ sibs.length）;  
  //   var $ next = $（$ sibs [rndNum]）;  
 
 
 $ active.addClass（'  last-active'） ; 
 
 $ next.css（{opacity： 0 。 0 }）
 .addClass（'  active'）
 .animate（{opacity： 1 。 0 }， 1000 ， function （）{
 $ active.removeClass（' 有效last-active'）; 
}）; 
} 
 
 $（ function （）{
 setInterval（   slideSwitch（）， 7500 ）; 
}）; 
 <   /   script  >  
 <   style     type   =  text / css >  
 
  / *   **设置宽度和高度以匹配您的图像** /  
 
＃ cphBackground_slideshow  {
  position  ：  relative;  
  height  ：  350px;  
} 
 
＃ cphBack ground_slideshow   IMG  {
  position   ： 绝对;  
  top   ：  0;  
  left   ：  0;  
  z-index  ：  8;  
  / *  不透明度：0.0; * /  
} 
 
＃ cphBackground_slideshow   IMG 。 active  {
  z-index  ：  1 0;  
  / *  不透明度：1.0; * /  
 } 
 
＃ cphBackground_slideshow   IMG 。 last-active  {
  z-index  ：  9;  
} 
 
 < /   style  >  
 <   div     id   = 幻灯片      runat   =  server >  
 protected void DisplayImage 
 {
 DirectoryInfo oDir = new DirectoryInfo（Server.MapPath（〜/ Banner_img）） ）; 
 FileInfo [] fileList = oDir.GetFiles（*。jpg）; 
 int iFileCount = fileList.Count（）; 
 iFileCount  -  = 1; 
 HtmlImage oImage = default（HtmlImage）; 
 for（int i = 0; i <   =   iFileCount;   i ++）  
   
                           {  
   
                                   oImage     =   new   HtmlImage（）;   
   
                                   var     _ with1     =   oImage; 
   
                                   // _ with1.Src     =   string.Format（  path \\ {0}，    fileList（i））;                                   
   
                                   _ with1.Src     =   Server.MapPath（ 〜/ Banner_img）    +  < span class =code-attribute>  \\    +     fileList [i];   
   
                               <如果   （i     =   =   0）  
   
                                           _ with1.Attributes.Add（class，   有效）;   
   
          < span class =code-attribute>            < span class =code-attribute>             slideshow.Controls.Add（oImage ）;   
   
                          }  

解决方案

active =

（' #cphBackground_slideshow IMG.active'）;

if （

active.length == 0 ）

How do i display Image from the Folder Dynamically in a Autorotation Manner

What I have tried:

<script type="text/javascript">
        /*** 
        Simple jQuery Slideshow Script
        Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, 
        not responsible for anything, etc.  Please link out to me if you like it :)
        ***/

        function slideSwitch() {
        var $active = $('#cphBackground_slideshow IMG.active');

        if ($active.length == 0) $active = $('#cphBackground_slideshow IMG:last');

        // use this to pull the images in the order they appear in the markup
        var $next = $active.next().length ? $active.next()
        : $('#cphBackground_slideshow IMG:first');

        // uncomment the 3 lines below to pull the images in random order

        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
        $active.removeClass('active last-active');
        });
        }

        $(function () {
        setInterval("slideSwitch()", 7500);
        });
</script>
<style type="text/css">

    /*** set the width and height to match your images **/

    #cphBackground_slideshow {
        position:relative;
        height:350px;
    }

    #cphBackground_slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;        
        /*opacity:0.0;*/        
    }

    #cphBackground_slideshow IMG.active {
        z-index:10;
        /*opacity:1.0;*/
    }

    #cphBackground_slideshow IMG.last-active {
        z-index:9;
    }

</style>
<div id="slideshow"  runat="server">    
protected void DisplayImage
{
  DirectoryInfo oDir = new DirectoryInfo(Server.MapPath("~/Banner_img"));
            FileInfo[] fileList = oDir.GetFiles("*.jpg");
            int iFileCount = fileList.Count();            
            iFileCount -= 1;
            HtmlImage oImage = default(HtmlImage);
            for (int i = 0; i <= iFileCount; i++)

            {

                oImage = new HtmlImage();

                var _with1 = oImage;

                //_with1.Src = string.Format("path\\{0}", fileList(i));                

                _with1.Src = Server.MapPath("~/Banner_img") + "\\" + fileList[i];

                if (i == 0)

                    _with1.Attributes.Add("class", "active");

                slideshow.Controls.Add(oImage);

            }

解决方案

active =

('#cphBackground_slideshow IMG.active'); if (

active.length == 0)

这篇关于如何动态显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！