您的位置： 首页 >日志>动易系统>详细内容

动易系统

小桀版-图片展示效果

来源：本站原创 发布时间：2011-10-28 16:27:07 浏览次数： 次 【字体：小 大】
名称：小桀版-图片展示效果
版本：3.6~4.0
作者：动易设计小桀
联系方式：QQ[943068390]
不需要修改模型、制作不是很复杂的一个图片展示效果、效果也很不错的哦!支持键盘切换。
演示地址
带标题简介效果：（有功能定制修改图片上传插件） 
数据包文件清单：

1、一个图片数据拆分标签
2、一个JQ 效果JS 
3、CSS样式
4、小图标
5、图片内容页模板
注意：

1、在定义图片列表的宽的时候最好是宽度在80px以上，80px以下添加3个图片的时候有一点小小的问题，
2、在定义大图切换的CSS 样式时,两个按钮的样式 需要一个假背景图片作为引导作用，如果没有在IE下会出现一些小小的不兼容问题。
  1. <xsl:choose> 
  2.   <xsl:when test="contains($srcStr,'$$$')"> 
  3.     <li> <a> 
  4.       <xsl:attribute name="href"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>  xsl:attribute> 
  5.       <xsl:element name="img"> 
  6.         <xsl:attribute name="src"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>_s.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>  xsl:attribute> 
  7.         <xsl:attribute name="longdesc"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>  xsl:attribute> 
  8.         <xsl:attribute name="title"><xsl:value-of select="substring-before(substring-before($srcStr,'$$$'),'|')"/> xsl:attribute> 
  9.         <xsl:attribute name="class">thumb_img xsl:attribute> 
  10.        xsl:element> 
  11.        a>  li> 
  12.     <xsl:variable name="dstStr" select="substring-after($srcStr,'$$$')" /> 
  13.     <xsl:choose> 
  14.       <xsl:when test="contains($srcStr,'$$$')"> 
  15.         <xsl:call-template name="splitStr"> 
  16.           <xsl:with-param name="srcStr" select="$dstStr"/>           
  17.          xsl:call-template> 
  18.        xsl:when> 
  19.       <xsl:otherwise> 
  20.         <li> <a> 
  21.           <xsl:attribute name="href"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>  xsl:attribute> 
  22.           <xsl:element name="img"> 
  23.             <xsl:attribute name="src"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/>_s.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/>  xsl:attribute> 
  24.             <xsl:attribute name="longdesc"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/>  xsl:attribute> 
  25.             <xsl:attribute name="title"><xsl:value-of select="substring-before(substring-before($dstStr,'$$$'),'|')"/> xsl:attribute> 
  26.             <xsl:attribute name="class">thumb_img xsl:attribute> 
  27.            xsl:element> 
  28.            a>  li> 
  29.        xsl:otherwise> 
  30.      xsl:choose> 
  31.    xsl:when> 
  32.   <xsl:otherwise> 
  33.     <li> <a> 
  34.       <xsl:attribute name="href"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>  xsl:attribute> 
  35.       <xsl:element name="img"> 
  36.         <xsl:attribute name="src"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>_s.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/> xsl:attribute> 
  37.         <xsl:attribute name="longdesc"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/> xsl:attribute> 
  38.         <xsl:attribute name="title"><xsl:value-of select="substring-before($srcStr,'|')"/> xsl:attribute> 
  39.         <xsl:attribute name="class">thumb_img xsl:attribute> 
  40.        xsl:element> 
  41.        a>  li> 
  42.    xsl:otherwise> 
  43. xsl:choose> 

标签说明：

1、src---------:列表图片地址

2、title--------:图片名称，这里的图片名称是用 来实现的，标签里面不输出这个则不显示;

3、alt--------:图片简介，在不修改模型的情况下只能与标签选择其中一个用来实现。

4、longdesc---:大图 查看原图功能，添加这个属性才有查看原图功能，否则无。

5、href--------:大图图片地址

 

上一组、下一组图片可以用 系统的上下一篇来实现，扩展下就可以了

×

用户登录