首页图片翻页效果

按规定时间一幅一幅分别显示,并同时显示标题或内容简介。
代码如下:

JS:(以最新4幅图片为例)
<script language="JavaScript">
var imgUrl=new Array();
var imgLink=new Array();
var imgText=new Array();
var picNum=0;
imgUrl[1]="图片地址1";
imgLink[1]="链接1";
imgText[1]="标题或简介或其它HTML内容1";
imgUrl[2]="图片地址2";
imgLink[2]="链接2";
imgText[2]="标题或简介或其它HTML内容2";
imgUrl[3]="图片地址3";
imgLink[3]="链接3";
imgText[3]="标题或简介或其它HTML内容3";
imgUrl[4]="图片地址4";
imgLink[4]="链接4";
imgText[4]="标题或简介或其它HTML内容4";
function NextPic(){
    if(picNum<4) picNum++ ;//显示4个图片
    else picNum=1;
    if (document.all){
        //下面注意,如果存在于FORM表单中,需要使用下面的方法,否则可直接使用name。
        document.form1.imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23);
        document.form1.imgInit.filters.revealTrans.apply();
        document.form1.imgInit.filters.revealTrans.play();
    }
    document.images.imgInit.src=imgUrl[picNum];
    //如果不是图片,而是SWF等,可做判断,内容可在程序中做好,再放于下面。
    focustext.innerHTML='<a href='+imgLink[picNum]+' target=_blank>'+imgText[picNum]+'</a>';
    //设置翻页时间
    theTimer=setTimeout('NextPic()', 3000);
}

function goUrl(){
    window.open(imgLink[picNum],'_blank');
}
</script>

HTML代码中:
可以做到控件中
<!--$图片翻页$-->
<TABLE cellPadding=0 width=100% border=0>
        <TR>
          <TD align=middle height="140" >
<div align='center'>
<a href='javascript:goUrl()'><img style="FILTER: revealTrans(duration=1,transition=5)" src="javascript:NextPic()" width="170" height="120" border="1"  id=imgInit name=imgInit></a></TD></TR>
 <TR><TD align=middle height="38" ><div name=focustext id=focustext align='center'></div>
</div>
</TD></TR></TABLE>
<!--$图片翻页$-->


该文章转载自1024k:http://www.1024k.cn/develop/2007/200704/21252.html 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在HTML中,可以通过多种方式实现图片效果。以下是一种基本的方法: 首先,我们需要在HTML文档中添加一个容器元素,用于显示图片。可以使用div元素或者其他合适的元素。 然后,在CSS样式表中定义容器元素的大小、位置等属性,以及页按钮的样式。可以使用position属性设置容器元素的定位方式,比如设置为relative或者absolute,来控制页按钮的位置。 接下来,在HTML文档中添加页按钮。可以使用button元素或者其他合适的元素来创建按钮,然后可以使用JavaScript来添加事件监听器,当按钮被点击时触发页功能。 在JavaScript中,我们可以通过获取图片元素的引用,然后使用事件监听器来捕获鼠标点击事件或键盘事件。当事件被触发时,我们可以通过改变图片元素的src属性来切换图片。 为了实现效果,我们可以创建一个图片数组,将所有需要显示的图片链接存储在数组中。然后,根据当前显示的图片索引,当点击页按钮时,我们可以通过改变图片的src属性来切换到下一张或上一张图片。 此外,我们还可以在切换图片时添加动画效果,比如通过CSS过渡属性来实现渐变效果或动画库来实现更复杂的动画效果。 总之,通过HTML、CSS和JavaScript的组合使用,我们可以实现各种不同的图片效果,提供更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值