首页 > Web > 一个js+css+div的幻灯特效

一个js+css+div的幻灯特效

其实个人不是很喜欢js,主要是不熟悉,而且花里胡哨的兼容性问题也不少。不过既然需要,那就搞一个吧。声明:也是抄的,非原创!

?View Code JAVASCRIPT
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>
分类: Web 标签: , ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.