一个js+css+div的幻灯特效
其实个人不是很喜欢js,主要是不熟悉,而且花里胡哨的兼容性问题也不少。不过既然需要,那就搞一个吧。声明:也是抄的,非原创!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | //幻灯片代码for jwzx function $(s){ return document.getElementById(s); } var B=BigNews={ current:0, next:0, scrollInterval:0, autoScroller:0 }; BigNews.turn=function(index){ clearInterval(BigNews.autoScroller); BigNews.scroll(index); } BigNews.scroll=function(index){ var count=0; var step=260; var duration=16; var b=BigNews; b.next=index; if(index!=b.current&&count>duration/8){ return; } clearInterval(b.scrollInterval); var items=$('iiiyx_hd_item').getElementsByTagName('li'); for(var i=0;i<5;i++){ items[i].className=''; } items[index].className='up'; var span=index-b.current; var begin_value=$('iiiyx_hd_img').scrollTop; var chang_in_value=span*step+(b.current*step-begin_value); b.scrollInterval=setInterval(function(){doit(begin_value,chang_in_value)},10); function doit(b,c){ $('iiiyx_hd_img').scrollTop=cpu(count,b,c,duration); count++; if(count==duration){ clearInterval(BigNews.scrollInterval); scrollInterval=0; count=0; $('iiiyx_hd_img').scrollTop=b+c; BigNews.current=index; } } function cpu(t,b,c,d) {return c*((t=t/d-1)*t*t+1)+b;}; } BigNews.auto=function(){ clearInterval(BigNews.scrollInterval); BigNews.autoScroller=setInterval(function(){ BigNews.scroll(BigNews.current==4?0:BigNews.current+1); },3000); } window.attachEvent('onload',BigNews.auto); |
下面是div代码
<div class="iiiyx_hd_go">
<div id="iiiyx_hd_img">
<a href="#" target="_blank"><img src="http://images.nau.edu.cn/jwzx/images/slide/logo_dev.jpg" /></a>
<a href="#" target="_blank"><img src="http://images.nau.edu.cn/jwzx/images/slide/logo_net.jpg" /></a>
<a href="#" target="_blank"><img src="http://images.nau.edu.cn/jwzx/images/slide/logo_cai.jpg" /></a>
<a href="#" target="_blank"><img src="http://images.nau.edu.cn/jwzx/images/slide/logo_camera.jpg" /></a>
<a href="#" target="_blank"><img src="http://images.nau.edu.cn/jwzx/images/slide/logo_classroom.jpg" /></a>
</div>
<div id="slidedescrip">部门职责</div>
<ul id="iiiyx_hd_item">
<li class="up" onmouseover="B.turn(0)" onmouseout="B.auto()"><img src="http://images.nau.edu.cn/jwzx/images//icons/icon_dev.gif" width="50" height="36" />
<dl>
<dt><a href="#" target="_blank">教学仪器设备</a>
<dd>设备采购与维修
</dd></dl>
<li onmouseover="B.turn(1)" onmouseout="B.auto()"><img src="http://images.nau.edu.cn/jwzx/images//icons/icon_net.gif" width="50" height="36" />
<dl>
<dt><a href="#" target="_blank">网络服务与建设</a>
<dd>空间、电子邮箱、网络帐号
</dd></dl>
<li onmouseover="B.turn(2)" onmouseout="B.auto()"><img src="http://images.nau.edu.cn/jwzx/images//icons/icon_cia.gif" width="50" height="36" />
<dl>
<dt><a href="#" target="_blank">网络教学</a>
<dd>电子课件,CIA
</dd></dl>
<li onmouseover="B.turn(3)" onmouseout="B.auto()"><img src="http://images.nau.edu.cn/jwzx/images//icons/icon_cam.gif" width="50" height="36" />
<dl>
<dt><a href="#" target="_blank">视频新闻制作</a>
<dd>视频新闻的摄录与制作
</dd></dl>
<li onmouseover="B.turn(4)" onmouseout="B.auto()"><img src="http://images.nau.edu.cn/jwzx/images//icons/icon_classroom.gif" width="50" height="36" />
<dl>
<dt><a href="#" target="_blank">教室电脑维护</a>
<dd>教室教学电脑的维护管理
</dd></dl>
</li></ul>
</div> |