你现在的位置:首页 > PHP网站建设知识库 > phpcms > 正文

phpcms利用loop与js实现幻灯片的仿制(仿和讯网和讯视点页面幻灯

下面我们边看边分析:

由于我是和讯的页面所以js代码和调用的幻灯数量都不用管,需要的朋友可以自行修改js代码的颜色标注部分实现增加或减少,下面我们讲主要内容

<div class="title" id="media_2" onmouseover="setfoc_I(2);" onmouseout="playit_I();">
<div class="box">
<a href="http://tv.hexun.com/2009-12-18/122082296.html" style="cursor: pointer">
<h1>语轩—连续下跌 市场出现买进机会</h1>
<h2>本周大盘连续性的下挫,使得估值低的品种越发显现价值</h2></a>
<a href="http://tv.hexun.com/2009-12-18/122082296.html" name="imgLink">
<img src=http://www.phpcms8.com/uploadfile/2011/0219/20110219054400583.jpg"/></a>
</div>

实际我们可以看出整个红色部分实际是一段相同代码的循环,上面是我截取的一段,用不同颜色的字符标注一下不同之处
看只有绿色部分标注的几处不同,实现相同代码的循环,我们很容易想到的就是loop函数,{loop $data $n $r}~{/loop}
我们继续修改
我们先把容易修改的修改掉
{loop $data $n $r}
<div class="title" id="media_2" onmouseover="setfoc_I(2);" onmouseout="playit_I();">
<div class="box">
<a href="{$r[url]}" style="cursor: pointer"><!-- 这里是调用文章链接 -->
<h1>{$r[title]}</h1><!--这里修改成调用文章的标题-->
<h2>{$description}</h2></a><!-- 这里修改成调用文章简介 -->
<a href="{$r[url]}" name="imgLink"><!-- 这里是调用文章链接 -->
<img src="{thumb($r[thumb], $width, $height)}"/></a><!-- 这里是调用文章缩略图图片 -->
</div>
{/loop}

这样我们完成了一半的工作,下面单独讲解不同部分的修改方法
<div class="title" id="media_2">

首先我们分析一下不同点
当id="media_0" 时div class="title_background"
当id="media_1到4数列时" 时div class="都是title"
我们加一个函数j
{php $j=$n-1;}实现当j=0是div class="title_background"
当j=1-4时div class="title"
则代码为
{php $j=$n-1;}
<div {if $n==1}class="title_background"{else} class="title"{/if} id="media_{$j}">
备注一下变量n由管理内容标签下 决定

这段代码的意思为当变量n=1时class="title_background"否则class="title" ({if}{else} {/if}这一组判断函数大家应该都知道)
同时调用变量j实现了两者的对应
把修改的两段代码结合再加上js代码就实现了幻灯片的制作,最终代码如下
[page]
<!-- partA 开始 -->
<div id="kp_partA">
<div id="picbox"><a href="#" id="mediaPicLink" target="_blank"><img id="mediaPic"/></a></div>
<div id="titlebox">

{loop $data $n $r}
{php $j=$n-1;}
<div {if $n==1}class="title_background"{else} class="title"{/if} id="media_{$j}">
<div class="box">
<a href="{$r[url]}" style="cursor: pointer">
<h1><b>{$r[title]}</b></h1>
<h2>{$description}</h2></a>
<a href="{$r[url]}" name="imgLink">
<img src="{thumb($r[thumb], $width, $height)}"/></a>
</div>
</div>
{/loop}
</div>
<script>
var targets=new Array("media_0","media_1","media_2","media_3","media_4")
var currslid=0;
var slidint;
var time=["4000","3000","3000","3000","3000"]//设置五个标题的显示时间,1000毫秒=1秒
var set_time;
var images1 = new Array();
function preloader()
{
for(var i=0 ;i<=4 ; i++)
{
var imageObj = new Image();
imageObj.src=document.getElementById("titlebox").getElementsByTagName("img").src
images1=imageObj;
}
}
preloader();
var bigImg=document.getElementById("mediaPic");
function setfoc_I(num){
currslid = num;
for(i=0;i<5;i++)
{
if(i==num)
{
var focusDiv=document.getElementById(targets);
focusDiv.className="title_background";
bigImg.setAttribute("src",images1.src);
var imgLink=document.getElementsByName("imgLink")[num].href;
document.getElementById("mediaPicLink").setAttribute("href",imgLink);
}
else
{
document.getElementById(targets).className="title";
}
}
stopit_I();
}
function picFocus(){
setfoc_I(currslid);
}
function picLostFocus(){
playit_I();
}
function playnext_I(){
if(currslid==4){currslid = 0;}
else{currslid++;};
setfoc_I(currslid);
playit_I();
}
function playit_I(){
switch(currslid){
case 0:set_time=time[0];
break;
case 1:set_time=time[1];
break;
case 2:set_time=time[2];
break;
case 3:set_time=time[3];
break;
case 4:set_time=time[4];
break;
}
slidint = setTimeout(playnext_I,set_time);
}
function stopit_I(){
clearTimeout(slidint);
}
</script>
<script>
playit_I();
document.getElementById("mediaPic").src=document.getElementById("media_0").getElementsByTagName("img")[0].getAttribute("src");
</script>


</div>
<!-- partA 结束 -->