js实现的图片滚动兼展示效果的特效

(function (){
/*
*2行tr滚动
*/
var x=document.getElementById("m_newclass_tab1");//获取table对象
var y=x.getElementsByTagName("tr");//获取一行tr对象
var z=x.getElementsByTagName("img");//获取每张图片
var hei=y[0].offsetHeight;//获取一行tr的高度
var t1=null;
function scrollTo(ind){
var n=1;
var b=x.scrollTop;
var c=ind*(2*hei)-b;//变化量为2行tr的高度
var d=20;
function moving(){
clearTimeout(t1);
n++;
x.scrollTop=Tween.Quad.easeOut(n,b,c,d);
if(n>d){
clearTimeout(t1);
return;
}
t1=setTimeout(moving,17);
}
moving();
}
//点击上按钮向上滚动
var shu=document.getElementById("m_newclass_shu");//获取变化的数值对象
var zs=document.getElementById("m_newclass_zs");//获取总数值对象
var up=document.getElementById("m_newclass_up");//获取向上点击的按钮
zs.innerHTML=y.length/2;//得到总tr行数并让页面显示该数值
up.onclick=function(){
var now=Math.round(x.scrollTop/(2*y[0].offsetHeight));//实时获取数值的变化
now--;
if(now<0){
now=y.length/2-1;
}
scrollTo(now);
now++;//使变化的值从1开始
shu.innerHTML="<em>"+now+"</em>";//将变化的值赋给em
}
//点击下按钮向下滚动
var down=document.getElementById("m_newclass_down");//获取向下点击的按钮
down.onclick=function(){
var now=Math.round(x.scrollTop/(2*y[0].offsetHeight));
now++;
if(now>y.length/2-1){
now=0;
}
scrollTo(now);
now++;
shu.innerHTML=now;
}
//鼠标移到小图上大图区域更换
var biger=document.getElementById("m_newclass_big");
var big=biger.getElementsByTagName("img")[0];//获取大图片显示区域
var touming=biger.getElementsByTagName("var")[0];//获取大图显示区域的透明层
for(var i=0;i<z.length;i++){
z[i].onmouseover=function(){
for(var i=0;i<z.length;i++){
if(this==z[i]){
big.src=z[i].getAttribute('data-src');//js文件和HTML是一个等级的，注意路径！
big.alt=z[i].alt;//将图片的alt属性传递给大图
big.title=z[i].title;//将图片的title属性传递给大图
}
}
}
}
/*控制展示区的透明层*/
var shuju1=document.getElementById("m_newclass_sj1");
var shuju2=document.getElementById("m_newclass_sj2");
//显示透明层
biger.onmouseover=function setOpacity() {
//透明度兼容
if (touming.filters) {
touming.style.filter = 'alpha(opacity=' + 20 + ')';
}
else{
touming.style.opacity = 0.2;
}
/*大图展示区域的文字显示信息*/
shuju1.innerHTML=big.title;//输出大图的title
shuju2.innerHTML="就业于"+big.alt;//输出大图的alt
}
//隐藏透明层
biger.onmouseout=function setOpacity() {
//透明度兼容
if (touming.filters) {
touming.style.filter = 'alpha(opacity=' +0 + ')';
}
else{
touming.style.opacity = 0;
}
shuju1.innerHTML="";
shuju2.innerHTML="";
}
})();