求图片联动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 style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/01.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/02.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/03.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/04.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/05.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/06.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/07.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/04.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/js_img/8-24/images/03.jpg">
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/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不就是了
[其他解释]
这个有点复杂,js代码可以有,他们的样式也复杂。
先顶你吧。
[其他解释]
我把页面上面的JS下载下来了,没有看见有啊
[其他解释]
我只要能联动效果就好了
[其他解释]
来人啊!帮帮忙
[其他解释]
使用firefox的 yslow插件,所有的js和css都可以全部看到
[其他解释]
介个
[其他解释]
我只要能联动效果就好了
[其他解释]
注意更换 图片地址