用.net实现网页图片以幻灯片形式播放，图片从数据库中读取前5张！！

最新推荐文章于 2021-10-13 22:11:28 发布
最新推荐文章于 2021-10-13 22:11:28 发布
阅读量1.2k 收藏
点赞数
文章标签： 数据库 .net function transition javascript div
 

<div>
                        <script language="JavaScript" type="text/javascript">
           
                                var focus_width=250;//幻灯片新闻图片宽度
                                var focus_height=180;//幻灯片新闻图片高度
                                var text_height=18;//幻灯片新闻文字标题高度
                                var swf_height = focus_height+text_height;
                                var pics = '';
                                var links = '';
                                var texts = '';
                               
                                function ati(url, img, title)
                                {
                                    if(pics != '')
                                    {
                                       pics = "|" + pics;
                                       links = "|" + links;
                                       texts = "|" + texts;
                                     }
                                     pics = escape(img) + pics;
                                     links = escape(url) + links;
                                     texts = title + texts;
                                }
                               
                                   
                                     ati('concrete.aspx?key=<%=src_str[0]%>', '<%=pic_str[0]%>', '<%=til_str[0] %>');
                               
                                     ati('concrete.aspx?key=<%=src_str[1]%>', '<%=pic_str[1]%>', '<%=til_str[1] %>');
                               
                                     ati('concrete.aspx?key=<%=src_str[2]%>', '<%=pic_str[2]%>', '<%=til_str[2] %>');
                               
                                     ati('concrete.aspx?key=<%=src_str[3]%>', '<%=pic_str[3]%>', '<%=til_str[3] %>');
                                                               
                                document.write('<embed src="../flash/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#99CCFF" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"/>');
                                </script></div>

//在前台页面加入以上代码 《需要自己下载一个flash 文件 pixviewer.swf
//取数据库图片地址
if (!IsPostBack)
        {
            SqlParameter parm = new SqlParameter("@wzlx", SqlDbType.VarChar, 20);
            parm.Value = "13";
            SqlDataReader sdr = houtai_adp.ExecuteReader(connstring, CommandType.Text, "SELECT top 4 [keys], left(titles,8)as[titles], [contens], [wzlx], [date_time] FROM [houtai] WHERE ([wzlx] = @wzlx) ORDER BY [date_time] DESC", parm);
            try
            {
                while (sdr.Read() && i < 4)
                {
                    src_str[i] = sdr["keys"].ToString();
                    til_str[i] = sdr["titles"].ToString();
                    string[] str = new string[1000];
                    str = sdr["contens"].ToString().Split('"');//以“分割图片地址，获得相对地址
                    pic_str[i] = str[1];
                    i++;
                }
            }
            catch (SqlException ex)
            {
                Response.Write(ex.ToString());
            }


------------------
#region 幻灯主题生成页面Object请勿修改

        public string GetFilterJs(DataSet ds, Hashtable hb)
        {
            StringBuilder Filterstr = new StringBuilder();
            Filterstr.Append("<a target=_self href='javascript:goUrl()'> ");
            Filterstr.Append("<script type='text/javascript'>");
            Filterstr.Append(" var focus_width=" + hb["width"].ToString());
            Filterstr.Append(";");
            Filterstr.Append(" var focus_height=" + hb["height"].ToString());
            Filterstr.Append(";");
            if (hb.Contains("Css") == false)
            {
                Filterstr.Append(" var text_height=12");
                Filterstr.Append(";");
            }
            else
            {
                Filterstr.Append(" var text_height=" + hb["Css"]);
                Filterstr.Append(";");
            }
            Filterstr.Append(" var swf_height=focus_height + text_height+ text_height");
            Filterstr.Append(";");

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                Filterstr.Append(" imgUrl" + i + "=" + '"' + "/web" + ds.Tables[0].Rows[i]["PicUrl"].ToString() + '"');//图片链接

                Filterstr.Append(";");
                if (ds.Tables[0].Rows[i]["NewsTitle1"].ToString().Length > 16)
                {
                    Filterstr.Append(" imgtext" + i + "=" + '"' + ds.Tables[0].Rows[i]["NewsTitle1"].ToString().Substring(0, 16).ToString() + '"');//标题
                }
                else
                {
                    Filterstr.Append(" imgtext" + i + "=" + '"' + ds.Tables[0].Rows[i]["NewsTitle1"].ToString() + '"');//标题
                }
                Filterstr.Append(";");
                Filterstr.Append(" imgLink" + i + "= escape(" + '"' + ds.Tables[0].Rows[i]["HtmlName"].ToString() + '"');//文字或者图片链接 
                Filterstr.Append(");");
            }
            Filterstr.Append(" var pics= ");
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                if (i == 0)
                {
                    Filterstr.Append("imgUrl" + i);
                    Filterstr.Append("+");
                    Filterstr.Append('"');
                    Filterstr.Append("|");
                    Filterstr.Append('"');
                }
                else if (i != ds.Tables[0].Rows.Count - 1)
                {
                    Filterstr.Append("+");
                    Filterstr.Append("imgUrl" + i);
                    Filterstr.Append("+");
                    Filterstr.Append('"');
                    Filterstr.Append("|");
                    Filterstr.Append('"');
                }
                else
                {
                    Filterstr.Append("+");
                    Filterstr.Append("imgUrl" + i);
                }

            }
            Filterstr.Append(";");
            Filterstr.Append(" var links= ");
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                if (i == 0)
                {
                    Filterstr.Append("imgLink" + i);
                    Filterstr.Append("+");
                    Filterstr.Append('"');
                    Filterstr.Append("|");
                    Filterstr.Append('"');
                }
                else if (i != ds.Tables[0].Rows.Count - 1)
                {
                    Filterstr.Append("+");
                    Filterstr.Append("imgLink" + i);
                    Filterstr.Append("+");
                    Filterstr.Append('"');
                    Filterstr.Append("|");
                    Filterstr.Append('"');
                }
                else
                {
                    Filterstr.Append("+");
                    Filterstr.Append("imgLink" + i);
                }

            }
            Filterstr.Append(";");
            Filterstr.Append(" var texts= ");//imgtext
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                if (i == 0)
                {
                    Filterstr.Append("imgtext" + i);
                    Filterstr.Append("+");
                    Filterstr.Append('"');
                    Filterstr.Append("|");
                    Filterstr.Append('"');
                }
                else if (i != ds.Tables[0].Rows.Count - 1)
                {
                    Filterstr.Append("+");
                    Filterstr.Append("imgtext" + i);
                    Filterstr.Append("+");
                    Filterstr.Append('"');
                    Filterstr.Append("|");
                    Filterstr.Append('"');
                }
                else
                {
                    Filterstr.Append("+");
                    Filterstr.Append("imgtext" + i);
                }
            }
            Filterstr.Append(";");
            Filterstr.Append(" ");
            Filterstr.Append("document.write('");
            Filterstr.Append("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0\" width='+focus_width+' height='+swf_height+'>");

            Filterstr.Append("<param name=\"allowScriptAccess\" value=\"sameDomain\"><param name=\"movie\" value=\"/web/PicFiles/focus.swf\"><param name=\"quality\" value=\"high\"><param name=\"bgcolor\" value=\"#F0F0F0\">");

            Filterstr.Append("<param name=\"menu\" value=\"false\"><param name=\"wmode\" value=\"opaque\">");

            Filterstr.Append("<param name=\"FlashVars\" value=\"pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+ focus_height +'&textheight='+text_height+'\">");

            Filterstr.Append("<embed src=\"/web/PicFiles/pixviewer.swf\" wmode=\"opaque\" FlashVars=\"pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+ focus_width +'&borderheight='+focus_height+'&textheight='+text_height+'\" menu=\"false\" bgcolor=\"#F0F0F0\" quality=\"high\" width='+focus_width+'height='+focus_height+' allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />");

            Filterstr.Append("</object>');");

            Filterstr.Append("</script>");

            Filterstr.Append("</a>");
            return Filterstr.ToString();
      
        }

-----------------------------
曾经在CSDN看到的JS代码：
－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
#g_div{text-align:right;overflow:hidden}
.b{width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.b:hover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.bhover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
</style>

<div id="g_div" style="width:270px;height:252px"><a
href="#" target=_blank><img
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src="http://zi.csdn.net/xian.gif">
</a><a
href="http://www.baidu.com/" for="965764.jpg"  target="_blank">1.CSDN程序员</a><a
href="http://www.126.com/" for="1074474895.jpg"  target="_blank">2.CSDN程序员</a><a
href="http://mp3.baidu.com/"  for="http://zi.csdn.net/live.gif"   target="_blank">3.CSDN程序员</a><a
href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif"  target="_blank">4.CSDN程序员</a><a
href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg"  target="_blank">5.CSDN程序员</a>
</div>

<script language="JavaScript">
function f(){
var g_sec=3          //几秒后切换图片
var g_items=new Array()
var g_div=document.getElementById("g_div")
var g_img=document.getElementById("g_img")
var g_imglink=g_img.parentElement
var arr=g_div.getElementsByTagName("A")
var arr_length=arr.length
var g_index=1

var show_img=function(n){ 
   if (/\d+/.test(n)){
var prev=g_index+1
g_index=n-1
   }else{  
var prev=(g_index>arr.length)?(arr_length-1):g_index+1
g_index=(g_index<arr_length-2)?(++g_index):0
   }
   if (document.all){
   g_img.filters.revealTrans.Transition=23;
  g_img.filters.revealTrans.apply();
  g_img.filters.revealTrans.play();
    }
 arr[prev].className="b" 
 arr[g_index+1].className="bhover"
 g_img.src=g_items[g_index].img.src
 g_img.title=g_items[g_index].txt
 g_imglink.href=g_items[g_index].url 
 g_imglink.target=g_items[g_index].target
 
}

for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href,
target:arr[i].target,
img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i,"&nbsp;"].join("")
arr[i].className="b"
arr[i].οnclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1)
var t=window.setInterval(show_img,g_sec*1000)
g_img.οnmοuseοver=function(){window.clearInterval(t)}
g_img.οnmοuseοut=function(){t=window.setInterval(show_img,g_sec*1000)} 
}

window.attachEvent("onload",f)
</script>


-------------------
<div id="g_div" style="BORDER-RIGHT: green 1px solid; FILTER: revealTrans(duration=1,transition=23); WIDTH: 250px; BORDER-BOTTOM: green 1px solid; HEIGHT: 195px"><%= strPoto%>
</div>
<SCRIPT language="JavaScript">
<!--
function f(){
var g_sec=3          //几秒后切换图片
var g_items=new Array()
var g_div=document.getElementById("g_div")
var g_img=document.getElementById("g_img")
var g_imglink=g_img.parentElement
var arr=g_div.getElementsByTagName("A")
var arr_length=arr.length
var g_index=1

var show_img=function(n){ 
if (/\d+/.test(n)){
var prev=g_index+1
g_index=n-1
}
else{  
var prev=(g_index>arr.length)?(arr_length-1):g_index+1
g_index=(g_index<arr_length-2)?(++g_index):0
}
if (document.all){
g_img.filters.revealTrans.Transition=23;
g_img.filters.revealTrans.apply();
g_img.filters.revealTrans.play();
}
arr[prev].className="b" 
arr[g_index+1].className="bhover"
g_img.src=g_items[g_index].img.src
g_img.title=g_items[g_index].txt
g_imglink.href=g_items[g_index].url 
g_imglink.target=g_items[g_index].target

}

for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href,
target:arr[i].target,
img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i,"&nbsp;"].join("")
arr[i].className="b"
arr[i].οnclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1)
var t=window.setInterval(show_img,g_sec*1000)
g_img.οnmοuseοver=function(){window.clearInterval(t)}
g_img.οnmοuseοut=function(){t=window.setInterval(show_img,g_sec*1000)} 
}
window.attachEvent("onload",f)
//-->
</SCRIPT>




private void LoadPhotoNew()
{

         //表PhotoTable存的是图片URL及说明。可以自己写程序取得。
if(PhotoTable.Rows.Count >0)
{
strPoto = @"<a href='#' target='_blank'><img id='g_img' style='BORDER-RIGHT:green 1px solid;BORDER-TOP:green 1px solid;FILTER:revealTrans(duration=1,transition=23);BORDER-LEFT:green 1px solid;BORDER-BOTTOM:green 1px solid;WIDTH:250px;HEIGHT:195px' src='"+PhotoTable.Rows[0][0].ToString() +"'></a>";
}
foreach(DataRow row in PhotoTable.Rows)
{
strPoto = strPoto + "<a href='newshow.aspx?ID="+strID+"' for='"+row[0]+"' target='_blank'>"+strTitle+"</a>";
}
}



---------------------------------


后台得到五张图片的链接放在类型为DataTable的imgScroll中(至少protected级)

页面中:
<script type="text/javascript" language="javascript">
<!--//
var scrollcount;
var scrollindex;
var imageurl = new Array()
<%int length = imgScroll.Rows.Count; %>
scrollcount=<%=length %>-1;
scrollindex=scrollcount;
<% for (int i = 0; i < length; i++) { %>
imageurl[<%=i %>] ='<%= imgScroll.Rows[i]["PICTURE"].ToString().Trim()%>';
<%} %>

function showimage(){
  form1.scrollimg.src=imageurl[scrollindex];
  document.all.scrolla.href=imageurl[scrollindex];
  if(scrollindex==0){
     scrollindex=scrollcount;
  }else{
     scrollindex=scrollindex-1;
  }
  setTimeout("showimage();",2000);
}
//-->
</script>


guoyang9108
关注
一般网页中的幻灯片播放图片
10-22
不同于office的幻灯片（一个小东西，只为赚点积分）
网页制作图片幻灯片播放
12-14
该资源是制作一个网页图片轮放功能的模板，是常见网页上的大小图片轮放。
web页面图片幻灯片播放效果（相册）源码
09-27
web页面图片幻灯片播放效果（相册）源码用脚本实现，可嵌入到任意页面，稍做修改就可以与数据库做动态显示！
使用ASP.NET AJAX实现(图片)幻灯片效果
weixin_34406061的博客
10-15 281
(1)html <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Photo.aspx.cs" Inherits="Photo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht...
asp.net两个不错的图片幻灯片制作实例
04-28
asp.net两个不错的图片幻灯片制作实例
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
10-22
主要介绍了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法,涉及asp.net数据库操作及JavaScript幻灯片生成的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
js结合php实现的图片幻灯片播放功能.rar
07-10
在这个“js结合php实现的图片幻灯片播放功能.rar”压缩包中，包含了一个使用JavaScript和PHP技术构建的图片幻灯片展示系统。这个系统在PHP服务器环境下运行，旨在为用户提供一个动态、交互式的图片浏览体验，具有...
播放图片的幻灯片源码
11-22
本项目涉及的关键技术点主要围绕`.Net`框架和数据库管理，旨在实现动态从后台添加图片到幻灯片的功能。下面将详细介绍这些知识点。 首先，`.Net`是一个由微软开发的广泛应用于构建Web应用程序、Windows桌面应用以及...
常见flash图片切换 可动态读取数据库
08-15
本教程将介绍一种常见Flash图片切换方案，该方案能从数据库中动态读取图片，以实现更灵活的展示效果。 首先，我们要理解“Flash图片切换”这一概念。Flash是一种交互式矢量图形和多媒体平台，允许开发者创建动画和...
在.NET框架下开发三层结构数据库应用系统幻灯片案例5
06-24
在.NET框架下开发三层结构数据库应用系统是一种常见的软件设计模式，尤其在企业级应用中广泛使用。三层架构，也称为N层架构，旨在提供清晰的职责划分，提高代码的可维护性、可扩展性和可重用性。在这个案例中，我们...
asp.net 图片幻灯片切换
06-18
非常好用的图片幻灯片切换代码，适合asp.net，内有例子。
asp图片切换幻灯特效代码
12-28
asp图片切换幻灯特效代码，适用企业网站
浏览图片，实现幻灯片自动播放
12-03
浏览图片，如果是幻灯片式的自动播放的话要加个Timer控件，设好时间间隔，在Timer1_Timer()编代码让程序定时自动改变显示的图片就行了。
js asp.net幻灯片
satonglezhang的专栏
05-26 460
 http://dotnet.chinaitlab.com/ASPNET/722680.html
使用ASP.NET AJAX实现幻灯片效果
long301的专栏
04-15 896
导读： 　　一些公司经常会有在web上机械地显示它们产品的图片（即幻灯片）的需求。 当然你可以使用JavaScript来开发这个程序，但是如果使用ASP.NET AJAX的话会使你的工作变得非常简单。 本文中，我将通过ASP.NET AJAX的page methods和客户端脚本扩展的帮助，来开发一个简单的幻灯片程序。 这个幻灯片可以由用户控制它的开始和暂停，默认情况下它会循环展示所有图片
linux环境下实现图片的读取和显示
Alpine_Climbing的专栏
02-03 5111
运行终端，编译文件： 其中编译命令为：gcc -g `pkg-config --libs --cflags opencv` show_image.c -o show_image，其中' '符号在键盘左上角。 运行结果：./show_image
国内实现web网页打开并播放PPT
qq_27361945的博客
10-13 8360
先来个效果图： 注意，我用的是谷歌浏览器打开的ppt，链接地址是： http://ow365.cn/?i=27871&furl=http://source.jlrc.com.cn/uploads/20200928/jlrcw/gxbys100.pptx 方法是： 登录并注册 文档在线预览 速度更快的专业Office预览云服务提供商 在阿里云OSS上传.pptx文件，文件的网址复制到配置项中： 然后会自动生成ppt播放地址。 注意：阿里云OSS的ppt文件网址只能用于下..
js实现幻灯片播放图片
luxideyao的专栏
10-22 2686
1，在页面添加下面的元素。展示出置出图片文件列表文件。 图片名字 2，播放文件列表的方法。主要是遍历文件列表并把图片展示在相应的图片容器就可以显示出幻灯片的效果。 可以用延时的方法调用遍历方法：window.setInterval("PlayPics()", speed); /**  * 播放图片的处理方法  * */ function PlayPics() { var
Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件
编程改变人生
11-25 6458
在线预览word、excel、ppt利用aspose动态生成html 主要代码 /// &lt;summary&gt; /// 文件在线预览 /// &lt;/summary&gt; public class OnlinePreviewHelper { /// &lt;summary&gt; /// world,ppt,excel生成html /// &lt;/su...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值