sponsored links

asp.net下图片轮换效果

第一步:先把他的flash图片播放器下载下来。http://news.ccidnet.com/images/swf/pixviewer.swf

第二步:把以下代码放到你要显示的地方。
不过有几处需要修改的地方。pixviewer.swf放的路径,图片地址,链接的网页

<script type="text/javascript">
<!--

var focus_width=260
var focus_height=210
var swf_height = focus_height

var pics='pic/1.jpg|pic/2.jpg|pic/3.jpg|pic/4.jpg'//图片地址(相对路径)

var links='1.htm|2.htm|3.htm|4.htm'//(链接的网页)

document.write('<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 +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'">');
document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');document.write('</object>');

//-->
</script>

这样一个效果就完成了。
后来他又问:如果从数据库读取呢?
这就需要把这段代码改成JS的函数,然后在后台输入参数。

该后的函数:



        <script type="text/javascript">
    function showPic(pic,link)
    {
    var focus_width=260
    var focus_height=210
    var swf_height = focus_height
   
    var pics=pic;
    var links=link;

    document.write('<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 +'">');
    document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
    document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
    document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'">');
    document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');        document.write('</object>');     
    }
        </script>
后台代码:

string str="pic/1.jpg|pic/2.jpg|pic/3.jpg|pic/4.jpg";
            string strlink="1.htm|2.htm|3.htm|4.htm";
            string js="<script>showPic('"+str+"','"+strlink+"');</script>";
把这个字符串JS放到你需要的地方就行了。 
Tags:
  • Jquery实现图片轮换效果
    Jquery实现图片轮换效果
    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.html部分: <div class="showContainer"> <div class="showHead&q ...
  • 图片轮换效果实现
    图片轮换效果实现
     图片轮换效果实现     昨天晚上写的博客没有了,只好今天重新写一遍,重新学习下吧,首先,看下效果图:      先看下主类代码:   [java] view plaincopy public class GalleryDemoActivity extends Activity {      / Called when the activity is fi ...
  • JS实现图片轮换效果
     本文来自:http://niunan.javaeye.com/blog/309084 当前的项目中要用到的效果,网上下了几个"源码",但都不是很如意,只好自己研究了,效果演示地址: http://www.cnbeta.com/ ,首页的左边的那个图片轮播就是我想要的效果, 研究了一下他的源码,发现原来是这么简单呀..一段JS代码搞掂. ...
  • JQuery分屏指示器图片轮换效果实例
    这篇文章主要介绍了JQuery分屏指示器图片轮换效果实现方法,实例分析了jQuery图片轮播操作的相关技巧,需要的朋友可以参考下本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就 ...
  • 超酷的图片轮换效果
    <!DOCTYPE html> <html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&g ...