专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > J#

求图片联动JS解决办法

发布时间:2011-06-24 19:00:52 文章来源:www.iduyao.cn 采编人员:星星草
求图片联动JS
具体效果如:http://www.vgift.cn/ele/ele-28.html
------最佳解决方案--------------------
复制txt  保存后 变后缀为。html

<!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>
<title>个性实用的新闻图片联动效果丨中国技术教程网</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
a{display:block;font-size:15px;height:18px;line-height:18px;text-decoration:none;color:#333;font-family:Arial;font-size:12px; border-bottom:1px solid #aaa;}
.shell{border-left:1px solid #aaa;width:400px;padding:0px 2px 0px 20px;overflow:hidden; margin-bottom:50px;}
.core{height:190px;position:relative;overflow:hidden;}
#core-absolute{}
.imgBox{}
.imgBox img{width:253px;height:190px;padding:0;margin:0;display:block;}
</style>
</head>
<body>
说明:一轮结束后倒序开始。<br><br>
<!--把下面代码加到<body>与</body>之间-->
<div class="imgBox" id="imgBox" style="height:190px;width:253px;overflow:hidden;float:left;">
<img src="../../js_img/8-24/images/01.jpg">
<img src="../../js_img/8-24/images/02.jpg">
<img src="../../js_img/8-24/images/03.jpg">
<img src="../../js_img/8-24/images/04.jpg">
<img src="../../js_img/8-24/images/05.jpg">
<img src="../../js_img/8-24/images/06.jpg">
<img src="../../js_img/8-24/images/07.jpg">
<img src="../../js_img/8-24/images/04.jpg">
<img src="../../js_img/8-24/images/03.jpg">
<img src="../../js_img/8-24/images/06.jpg">
</div>
<div class="shell">
<div class="core">
<a href="javascript:">图片说明一</a>
<a href="javascript:">图片说明二</a>
<a href="javascript:">图片说明三</a>
<a href="javascript:">图片说明四</a>
<a href="javascript:">图片说明五</a>
<a href="javascript:">图片说明六</a>
<a href="javascript:">图片说明七</a>
<a href="javascript:">图片说明八</a>
<a href="javascript:">图片说明九</a>
<a href="javascript:">图片说明十</a>
<div id="core-absolute" style="position:absolute;z-index:2;width:400px;height:17px;border:1px solid #000;left:0;top:0px;"></div>
</div>
</div>
<script language="javascript">
function linkage(imgB,coreD,wtime){
var imgBox=document.getElementById(imgB);
var coreD=document.getElementById(coreD);
can=true;
coreD.onmouseover=function(){can=false};
coreD.onmouseout=function(){can=true}
var Max=parseInt(imgBox.scrollHeight/2);
var orientation="down";
new function(){
var Stop=parseInt(coreD.style.top)%19==0&&!can;
if(!Stop){
var x= parseInt(coreD.style.top);
if(orientation=="down"){
x==171?(orientation="up",imgBox.scrollTop-=10,x--,coreD.style.top=x+"px"):(imgBox.scrollTop+=10,x++,coreD.style.top=x+"px");
}else{
x==0?(orientation="down",imgBox.scrollTop+=10,x++,coreD.style.top=x+"px"):(imgBox.scrollTop-=10,x--,coreD.style.top=x+"px");
}
}
setTimeout(arguments.callee,parseInt(coreD.style.top)%19?10:wtime);
}
}
linkage("imgBox","core-absolute",1500);
</script>


------其他解决方案--------------------
既然你有例子,你直接拷贝那个网站的js不就是了
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: