图片轮显

melon23 2009-08-22 05:32:26

问题：
1、图片轮显用Css+javascritpt好呢，还是Flash+javascript好（我不懂Flash）。
2、谁有空看看这代码（网上下的）在ie中很好，但是在Firefox中轮显会乱跳。
3、或者哪位朋友有好用的代码，可不可分享一下，邮箱2832244@sina.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

BODY {

 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; COLOR: #f6f6ee; MARGIN-RIGHT: auto; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 490px; TEXT-ALIGN: center

}

A {

 COLOR: #fff; TEXT-DECORATION: none

}

A:hover {

 COLOR: #fff; TEXT-DECORATION: underline

}

.fpic {

 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 3; BACKGROUND: #000;  BORDER-BOTTOM-WIDTH: 0px; WIDTH: 476px; POSITION: relative; HEIGHT: 330px; BORDER-RIGHT-WIDTH: 0px;BORDER: #dddddd 1px solid;

text-align:center

}

.bpic {

 FLOAT: left; MARGIN: 0px; WIDTH: 244px; POSITION: relative; HEIGHT: 243px

}

#focpic {

 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 1px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 1px; BORDER-RIGHT-WIDTH: 0px

}

.thubpic {

 PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px

}

.thubpiccur {

 PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px

}

.thubpiccur {

 Z-INDEX: 30; BACKGROUND: url(icon/images20071220/arrow3.gif) no-repeat left 50%

}

.thubpic IMG {

 BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px

}

.thubpiccur IMG {

 BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px

}

.thubpiccur IMG {

 BORDER-LEFT-COLOR: #fff; BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BORDER-RIGHT-COLOR: #fff

}

-->

</style>

<SCRIPT language=javascript>

// welcome to www.5icoding.com

var currslid = 0;

var slidint;

function setfoc(id){

 document.getElementById("focpic").src = picarry[id];

 document.getElementById("foclnk").href = lnkarry[id];

 document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';

 currslid = id;

 for(i=0;i<6;i++){

  document.getElementById("tmb"+i).className = "thubpic";

 };

 document.getElementById("tmb"+id).className ="thubpiccur";

 focpic.style.visibility = "hidden";

 focpic.filters[0].Apply();

 if (focpic.style.visibility == "visible") {

  focpic.style.visibility = "hidden";

  focpic.filters.revealTrans.transition=23;

 }

 else {

  focpic.style.visibility = "visible";

  focpic.filters[0].transition=23;

 }

 focpic.filters[0].Play();

 stopit();

}



function playnext(){

 if(currslid==5){

  currslid = 0;

 }

 else{

  currslid++;

 };

 setfoc(currslid);

 playit();

}

function playit(){

 slidint = setTimeout(playnext,4500);

}

function stopit(){

 clearTimeout(slidint);

 }

window.onload = function(){

 playit();

}

</SCRIPT>



</head>



<body>

<DIV class=fpic>

<A id=foclnk href="http://www.5icoding.com/" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=300 alt="" src="http://www.qpsh.com/icon/images20071220/01.jpg" width=400></A> 

<DIV id=fttltxt 

style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><A 

href="http://www.5icoding.com/" target=_blank>梦：牧场小屋</A></DIV>

<DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">

<DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A 

href="http://www.5icoding.com/" target=_blank><IMG 

src="http://www.qpsh.com/icon/images20071220/01.jpg" alt="" width=56 height=42 border="0"></A></DIV>

<DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><A 

href="http://www.5icoding.com/" target=_blank><IMG height=45 alt="" 

src="http://www.qpsh.com/icon/images20071220/02.jpg" width=56></A></DIV>

<DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A 

href="http://www.5icoding.com/" target=_blank><IMG height=45 alt="" 

src="http://www.qpsh.com/icon/images20071220/03.jpg" width=56></A></DIV>

<DIV class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><A 

href="http://www.5icoding.com/" target=_blank><IMG height=45 alt="" 

src="http://www.qpsh.com/icon/images20071220/04.jpg" width=56></A></DIV>

<DIV class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><A 

href="http://www.5icoding.com/" target=_blank><IMG height=45 alt="" 

src="http://www.qpsh.com/icon/images20071220/05.jpg" width=56></A></DIV>

<DIV class=thubpic id=tmb5 onmouseover=setfoc(5); onmouseout=playit();><A 

href="http://www.5icoding.com/" target=_blank><IMG height=45 alt="" 

src="http://www.qpsh.com/icon/images20071220/06.jpg" width=56></A></DIV>

<SCRIPT language=javascript type=text/javascript>

var picarry = {};

var lnkarry = {};

var ttlarry = {};

picarry[0] = "http://www.qpsh.com/icon/images20071220/01.jpg";

lnkarry[0]  = "http://www.5icoding.com/";

ttlarry[0] = "梦：牧场小屋";

picarry[1] = "http://www.qpsh.com/icon/images20071220/02.jpg";

lnkarry[1]  = "http://www.5icoding.com/";

ttlarry[1] = "碎玉：回眸";

picarry[2] = "http://www.qpsh.com/icon/images20071220/03.jpg";

lnkarry[2]  = "http://www.5icoding.com/";

ttlarry[2] = "飞狐：豆花档";

picarry[3] = "http://www.qpsh.com/icon/images20071220/04.jpg";

lnkarry[3]  = "http://www.5icoding.com/";

ttlarry[3] = "牛说不哭：烈日下的建筑工人";

picarry[4] = "http://www.qpsh.com/icon/images20071220/05.jpg";

lnkarry[4]  = "http://www.5icoding.com/";

ttlarry[4] = "新疆瓦格：哈萨克族搭建毡房";

picarry[5] = "http://www.qpsh.com/icon/images20071220/06.jpg";

lnkarry[5]  = "http://www.5icoding.com/";

ttlarry[5] = "松间明月：汽车文化";

</SCRIPT>



</body>

</html>

...全文
157 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
melon23 2009-08-23
  • 打赏
  • 举报
 回复
谢谢，各位发我的东东，遇到问题我再发帖
tidelgl 2009-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 melon23 的回复:]
非常感谢各位的帮忙，给我的东西都不错。
一楼的东西我收到了，但是在firefox中表现还是欠佳。
二楼的cloudgamer，ie，firefox界面都不错，但是小图片在底边（在左边就好了，可能自己要尝试调整下）。
希望有更好的代码和界面
[/Quote]

知道为什么没人发了吗?就中你这些话!!!特别是最后一句!
melon23 2009-08-22
  • 打赏
  • 举报
 回复
非常感谢各位的帮忙，给我的东西都不错。
一楼的东西我收到了，但是在firefox中表现还是欠佳。
二楼的cloudgamer，ie，firefox界面都不错，但是小图片在底边（在左边就好了，可能自己要尝试调整下）。
希望有更好的代码和界面
chen_ya_ping 2009-08-22
  • 打赏
  • 举报
 回复
http://www.cnblogs.com/cloudgamer/
这个人的博客上有很多图片的例子，你可以看看，还有就是那个jquery也可以实现，你可以去cnblogs上去看看。
cloudgamer 2009-08-22
  • 打赏
  • 举报
 回复
给你一个试试
musecangying007 2009-08-22
  • 打赏
  • 举报
 回复
我给你发一个
AI人工智能毕业设计课题：黑白怀旧照片图片网站和上色处理系统
图片分类：录入、修改、查看、删除图片分类 录入图片：录入图片标题、内容等信息 管理图片：查看已录入图片列表，支持删除和修改 图片评论列表：所有用户的评论信息列表 图片评论管理：支持对评论信息审核，删除；...
制作图片轮显效果（JavaScript）
1. 任务要求 1）BOM对象模型； 2）掌握document对象的重要属性和方法； 3）JavaScript与CSS交互。 2. 需求说明 带按钮的轮换显示的横幅广告，五张广告图片循环显示，并且下面的标题随图片显示不同的内容，单击数字按钮时可以即时显示对应的图片和相应的标题，如下图所示。 3. 实现思路 1）使用到对图片的隐藏（none）和显现（block）； 2）首先在函数show()里定义一个数组titles； 3）写一个for循环，用于判断当点击 的对应数字与i相同时，就将对.
在html中如何设置图片轮显,css中怎么让图片轮播？
css中让图片轮播的方法：将多个大小相同的图片横排放在一个图片中，然后在图片容器外加一个展示容器，并为图片容器添加自定义动画，在动画不同阶段设置递增的偏移值即可实现图片轮播。css让图片轮播实现思想：准备相同大小的多个图片将要展示图片横排放在一个图片容器里面在图片容器外再加一个展示容器，展示容器大小为图片大小给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值示例：HTML ...
图片轮显效果大全
综合各种效果的图片轮显SCRIPT language="VBScript">Dim FileList,FileListArr,TxtList,TxtListArrFileList = "http://et.21cn.com/portray/images/if/01.jpg,http://et.21cn.com/portray/images/if/02.jpg,http://et.21cn.
universalimageloader+viewpager+fragment加载网络图片轮显
在微信朋友圈功能中，其中有这么一个模块，点击朋友发的图，就弹出全屏查看并在图的下面有红点导航，像这样的图片轮显功能还是比较常用的，下面我们使用android中带的控件viewpager来实现，并做成个方便调用的，在app中的任何地方需要显示多图，就直接启用它（当然需要把图片路径要做为参数传递过来），我们使用fragment来加载viewpager，好处嘛，你肯定也清楚了：）     本例主要加载
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章