求一个JS图片展示效果，有案例，要求一模一样
http://www.hsgeco.com首页图片展示的效果。点击图片，可以变换到下一张，不点击图片，也可以自动变换到下一张图片。这个首页我已经保存到本地了，但是JS好像...
http://www.hsgeco.com 首页图片展示的效果。
点击图片，可以变换到下一张，不点击图片，也可以自动变换到下一张图片。这个首页我已经保存到本地了，但是JS好像加密过。本机调试可以运行，在服务器2003不能用啊。
现在请大伙帮忙，这个JS效果哪里有？？要求一模一样的。本人百度HI保持在线，谢谢大家了 展开
点击图片，可以变换到下一张，不点击图片，也可以自动变换到下一张图片。这个首页我已经保存到本地了，但是JS好像加密过。本机调试可以运行，在服务器2003不能用啊。
现在请大伙帮忙，这个JS效果哪里有？？要求一模一样的。本人百度HI保持在线，谢谢大家了 展开
展开全部
用FLASH的办法不错，不受服务器限制，不受浏览器限制。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道你用什么语言写网页
想用for循环的地方自己按相应的语言写吧
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="css/css1.css">
<title>news</title>
<script>
var i=1;
var xxx;
function a(x)
{
if(x){i=x;}
var xxi="xx"+i;
for(var j=1;j<=3;j++){document.getElementById("xx"+j).style.display='none';}
document.getElementById(xxi).style.display='';
i++;
if(i==4){i=1;}
}
function ting()
{clearInterval(xxx);}
function zou()
{clearInterval(xxx); xxx=setInterval(a,2000);}
zou();
</script>
</head>
<body>
<table width="758" height="317" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="xx1" style=" width:300px; height:300px;" onClick="a(2)">图片1</div>
<div id="xx2" style=" width:300px; height:300px; display:none;" onClick="a(3)">图片2</div>
<div id="xx3" style=" width:300px; height:300px; display:none;" onClick="a(1)">图片3</div>
</td>
</tr>
</table>
<p><a onClick="ting()">停</a></p>
<p><a onClick="zou()">走</a></p>
</body>
想用for循环的地方自己按相应的语言写吧
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="css/css1.css">
<title>news</title>
<script>
var i=1;
var xxx;
function a(x)
{
if(x){i=x;}
var xxi="xx"+i;
for(var j=1;j<=3;j++){document.getElementById("xx"+j).style.display='none';}
document.getElementById(xxi).style.display='';
i++;
if(i==4){i=1;}
}
function ting()
{clearInterval(xxx);}
function zou()
{clearInterval(xxx); xxx=setInterval(a,2000);}
zou();
</script>
</head>
<body>
<table width="758" height="317" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="xx1" style=" width:300px; height:300px;" onClick="a(2)">图片1</div>
<div id="xx2" style=" width:300px; height:300px; display:none;" onClick="a(3)">图片2</div>
<div id="xx3" style=" width:300px; height:300px; display:none;" onClick="a(1)">图片3</div>
</td>
</tr>
</table>
<p><a onClick="ting()">停</a></p>
<p><a onClick="zou()">走</a></p>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道你用不用jQuery.我自己写的一个类似的有按钮的.唉,下班啦,懒得改啦,你看着可以就自己改改吧,应该很简单的.
css文件
body { text-align: center; font-family:"宋体", Arial;margin:0; padding:0; background: #ffffff url(../images/bg.jpg); font-size:12px; color:#000000;}
div,form,ol,dl,dt,dd,table,tr,td{margin: 0; padding: 0; border: 0; }
ul,li{list-style-type:none;margin: 0; padding: 0; border: 0; }
img{vertical-align:top;border: 0; }
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; height:0; visibility: hidden; line-heigth:0;}
#photosBox{
width:616px;
height:324px;
overflow:hidden;
margin:0 auto;;
}
a#previousBtn{
float:left;
display:inline;
width:33px;
height:324px;
background:#333 url(../images/previous.gif) left center no-repeat;
}
#photosCont{
width:514px;
height:290px;
background:url(../images/photosFrame.jpg) no-repeat;
float:left;
padding:17px 18px;
display:inline;
width:514px;
height:290px;
overflow:hidden;
position:relative;
}
#photosLimite{
overflow:hidden;
width:514px;
height:290px;
}
#photos{
width:514px;
height:290px;
overflow:hidden;
text-align:center;
position:relative;
display:table-cell;
vertical-align:middle;
*display:block;
*font-size:253px;
}
#photos img{
vertical-align:middle;
}
a#nextBtn{
float:right;
display:inline;
width:33px;
height:324px;
background:#333 url(../images/next.gif) right center no-repeat;
}
页面文件:
<!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>
<link rel="stylesheet" href="css/child.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
</head>
<body>
<div id="photosBox">
<a id="previousBtn" href="javascript:void(0)" onfocus="blur()" onclick="mySlide.previous()"></a>
<div id="photosCont">
<div id="photosLimite">
<div id="photos"> <img src="images/photos/pic_01.jpg" width="514" height="290" alt="图片1"/> <img src="images/photos/pic_02.jpg" width="514" height="290" alt="图片2"//> <img src="images/photos/pic_03.jpg" width="514" height="290" alt="图片3"//> </div>
</div>
</div>
<a id="nextBtn" href="javascript:void(0)" onfocus="blur()" onclick="mySlide.next()"></a>
<div class="clear"></div>
</div>
</body>
<script type="text/javascript">
$().ready(function(){
$("#photos>img").not($("#photos>img:eq(0)")).css("display","none");
})
function Slide(mySlide){
this.items=$("#"+mySlide+">img");
this.init();
}
Slide.prototype={
flag:0,
itemCount:0,
init:function(){
this.itemCount=this.items.length;
},
closeAll:function(){
this.items.css("display","none")
},
goto:function(){
this.closeAll();
$(this.items[this.flag]).css("display","inline")
},
next:function(){
if(this.flag!=this.itemCount-1){
this.flag++;
this.goto();
}
},
previous:function(){
if(this.flag!=0){
this.flag--;
this.goto();
}
}
}
var mySlide=new Slide("photos");
</script>
</html>
css文件
body { text-align: center; font-family:"宋体", Arial;margin:0; padding:0; background: #ffffff url(../images/bg.jpg); font-size:12px; color:#000000;}
div,form,ol,dl,dt,dd,table,tr,td{margin: 0; padding: 0; border: 0; }
ul,li{list-style-type:none;margin: 0; padding: 0; border: 0; }
img{vertical-align:top;border: 0; }
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; height:0; visibility: hidden; line-heigth:0;}
#photosBox{
width:616px;
height:324px;
overflow:hidden;
margin:0 auto;;
}
a#previousBtn{
float:left;
display:inline;
width:33px;
height:324px;
background:#333 url(../images/previous.gif) left center no-repeat;
}
#photosCont{
width:514px;
height:290px;
background:url(../images/photosFrame.jpg) no-repeat;
float:left;
padding:17px 18px;
display:inline;
width:514px;
height:290px;
overflow:hidden;
position:relative;
}
#photosLimite{
overflow:hidden;
width:514px;
height:290px;
}
#photos{
width:514px;
height:290px;
overflow:hidden;
text-align:center;
position:relative;
display:table-cell;
vertical-align:middle;
*display:block;
*font-size:253px;
}
#photos img{
vertical-align:middle;
}
a#nextBtn{
float:right;
display:inline;
width:33px;
height:324px;
background:#333 url(../images/next.gif) right center no-repeat;
}
页面文件:
<!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>
<link rel="stylesheet" href="css/child.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
</head>
<body>
<div id="photosBox">
<a id="previousBtn" href="javascript:void(0)" onfocus="blur()" onclick="mySlide.previous()"></a>
<div id="photosCont">
<div id="photosLimite">
<div id="photos"> <img src="images/photos/pic_01.jpg" width="514" height="290" alt="图片1"/> <img src="images/photos/pic_02.jpg" width="514" height="290" alt="图片2"//> <img src="images/photos/pic_03.jpg" width="514" height="290" alt="图片3"//> </div>
</div>
</div>
<a id="nextBtn" href="javascript:void(0)" onfocus="blur()" onclick="mySlide.next()"></a>
<div class="clear"></div>
</div>
</body>
<script type="text/javascript">
$().ready(function(){
$("#photos>img").not($("#photos>img:eq(0)")).css("display","none");
})
function Slide(mySlide){
this.items=$("#"+mySlide+">img");
this.init();
}
Slide.prototype={
flag:0,
itemCount:0,
init:function(){
this.itemCount=this.items.length;
},
closeAll:function(){
this.items.css("display","none")
},
goto:function(){
this.closeAll();
$(this.items[this.flag]).css("display","inline")
},
next:function(){
if(this.flag!=this.itemCount-1){
this.flag++;
this.goto();
}
},
previous:function(){
if(this.flag!=0){
this.flag--;
this.goto();
}
}
}
var mySlide=new Slide("photos");
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
