在Ionize CMS框架上使用的5种幻灯图片显示技术

jtzmsqzr · 发表于 2012-4-5 17:26:53

国之瑰宝网站http://szgzgb.com/采用Ionize CMS框架，其中的幻灯图片显示共有5种方式，值此与大家分享：
1、首页的jQuery JavaScript Library v1.3.2显示技术。这是美国白宫网站采用的幻灯动画方式，我们稍作改进，代码如下：
1）在header1.php的<head>段包含代码：
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="<ion:theme_url />javascript/slide/slide.js"></script>
其中的slide.js实际是jQuery JavaScript Library v1.3.2。
2）首页的开始代码如下：
<ion:partial view="header1" />
<div id="homepage-rotator" style="height:366px;width:615px;overflow:hidden;position:relative;left:180px;top:0px;">
<ion:medias type="picture">
<a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" />'><img src='<ion:src folder="940" />' alt="" width="615" height="346" /></a>
</ion:medias>
</div>

2、“产品”页面的幻灯显示方式。这是一般的循环左移连续幻灯方式，在页面的开始处采用div+js实现，代码如下：
<ion:partial view="header" />
<div class="bcon_r ind">
<div id="rolllink" style="height:150px;width:900px;overflow:hidden;position:relative;left:10px;top:10px;" >
<table  border="0" cellspacing="0" cellpadding="0">
<tr><td id="rolllink1">
<table>
  <tr>
<ion:medias type="picture" >
<td>
<span style='width:200px;height:100px;overflow:hidden;display:block;padding:0px;'><a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" />'><img src='<ion:src folder="940" />' alt=""  /></a></span>
<p id='f1' style="text-align:center"></p>
</td><td><div  style="width:25px;"></div></td>
</ion:medias>
  </tr>
</table>
  </td>
  <td  id="rolllink2">
  </td>
</tr>
</table>
</div>
</div>

<script type="text/javascript">
var speed = 9
rolllink2.innerHTML = rolllink1.innerHTML;
function Marquee() {
      if (rolllink2.offsetWidth - rolllink.scrollLeft <= 0)
         rolllink.scrollLeft -= rolllink1.offsetWidth
      else {
         rolllink.scrollLeft++
      }
}
var MyMar = setInterval(Marquee, speed)
rolllink.onmouseover = function () { clearInterval(MyMar) }
rolllink.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>

3、“崖柏产品系列”页面的幻灯方式。这是从http://www.albatrosmarina.com/学习的技术，稍作改进，代码如下：
1）在header4slider.php头文件的<head>段包含代码：
<link rel="stylesheet" type="text/css" href="<ion:theme_url />assets/slider/albatros.css"  />
<link rel="stylesheet" href="<ion:theme_url />assets/slider/nivo-slider.css"  type="text/css" media="screen" />
<link rel="stylesheet" href="<ion:theme_url />assets/slider/minimal.css"  type="text/css" media="screen" />
<script src="<ion:theme_url />assets/slider/jquery-1.7.1.min.js"  type="text/javascript"></script>
2）页面的开始代码如下：
<ion:partial view="header4slider" />
<div id="homepage-rotator" style="height:366px;width:715px;overflow:hidden;position:relative;left:180px;top:0px;">
<div class="slider-wrapper theme-minimal">
<div id="slider" class="nivoSlider">
<ion:medias type="picture">
<a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" />'><img src='<ion:src folder="940" />' alt="" width="615" height="346" /></a>
</ion:medias>
</div>
</div>
         
<script type="text/javascript" src="<ion:theme_url />assets/slider/jquery.nivo.slider.pack.js" ></script>
<script type="text/javascript">
      $(window).load(function() {
            $('.nivoSlider').nivoSlider();
      });
</script>
</div>

4、“黄花梨产品系列”页面的幻灯方式。这是上移式显示的幻灯动画方式，代码如下：
1）在header4slider2头文件的<head>段包含代码：
<script type=text/javascript src="<ion:theme_url />assets/slider2/jquery-1.4.2.min.js"></script>
<script type=text/javascript src="<ion:theme_url />assets/slider2/jquery.cycle.all.min.js"></script>
2）页面的开始代码如下：
<ion:partial view="header4slider2" />
<div id="homepage-rotator" style="height:366px;width:715px;overflow:hidden;position:relative;left:180px;top:0px;">
<script type=text/javascript>
$(document).ready(function() {
  if($('.pics').length > 0) {
$('.pics').cycle({
   fx:    'scrollUp',
speed: 800,
timeout:  3000
  });
}
});
</script>
<div class="pics">
<ion:medias type="picture">
<a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" />'><img src='<ion:src folder="940" />' alt="" width="615" height="346" /></a>
</ion:medias>
</div>
</div>

5、“视频”页面的幻灯方式。这是Ionize CMS框架包中的demo模块中的首页幻灯显示方式，这里无需介绍。

kissgxd · 发表于 2012-4-6 12:24:00

太长了，给代码、二级标题组织一下格式吧

		自动登录	找回密码
密码			入住 CI 中国社区

[Ionize CMS] 在Ionize CMS框架上使用的5种幻灯图片显示技术