来自NBA网站大幅JS焦点图切换代码

最新推荐文章于 2024-01-05 08:48:50 发布

weixin_34160277

最新推荐文章于 2024-01-05 08:48:50 发布

阅读量115

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/webdm/archive/2011/08/05/2128464.html

版权

代码简介：

NBA网站的大幅焦点图切换效果，代码里有较多的注释，适合研究一下，图片是远程地址，你最好保存到本地，本焦点图是动态变化，会自动播放，鼠标点击的时候会响应鼠标，用JavaScript实现的。

代码内容：

View Code

<!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>来自NBA网站大幅JS焦点图切换代码_网页代码站(www.webdm.cn)</TITLE>
<style type= " text/css " >
#fours_m{z- index: - 10 ; width:430px; height:382px; background:#053783 url(http://www.webdm.cn/images/20090930/fours_bj.gif) repeat-x 0 bottom;}
#f_img_roll{ float: left ; width:350px; height:300px; position:relative}
#f_img_roll img{ position: absolute ; left:0; top:0}
#f_img_s{ float: right ; position:relative; width:80px; height:300px;}
#f_img_s ul{ margin: 0 ; padding:0; margin-left:6px; list-style:none;}
#f_img_s li{ width: 60px ; height:45px;border:1px solid #0066cc;margin-top:3px;}
#f_img_s img{ width: 54px ; height:39px; border:3px solid #000066;vertical-align:top; }
#f_img_s div { top: 3px}
#f_mask{ position: absolute ; top:3px; right:12px; width:75px; height:47px; background:url(http://www.webdm.cn/images/20090930/mask.gif) no-repeat;}
#f_title{font- size: 16px ; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
</style>
<script type= " text/javascript " >
//图片资源
var imgs_m=[],imgs_s=[],imgs_title=[] ;
        imgs_m[ 0 ]= " http://www.webdm.cn/images/20090930/img_1.jpg " ;
        imgs_m[ 1 ]= " http://www.webdm.cn/images/20090930/img_2.jpg " ;
        imgs_m[ 2 ]= " http://www.webdm.cn/images/20090930/img_3.jpg " ;
        imgs_m[ 3 ]= " http://www.webdm.cn/images/20090930/img_4.jpg " ;
        imgs_m[ 4 ]= " http://www.webdm.cn/images/20090930/img_5.jpg " ;
        imgs_m[ 5 ]= " http://www.webdm.cn/images/20090930/img_6.jpg " ;
        imgs_s[ 0 ]= " http://www.webdm.cn/images/20090930/img_1_0.jpg " ;
        imgs_s[ 1 ]= " http://www.webdm.cn/images/20090930/img_2_0.jpg " ;
        imgs_s[ 2 ]= " http://www.webdm.cn/images/20090930/img_3_0.jpg " ;
        imgs_s[ 3 ]= " http://www.webdm.cn/images/20090930/img_4_0.jpg " ;
        imgs_s[ 4 ]= " http://www.webdm.cn/images/20090930/img_5_0.jpg " ;
        imgs_s[ 5 ]= " http://www.webdm.cn/images/20090930/img_6_0.jpg " ;

        imgs_title[ 0 ]= " 第一张 " ;
        imgs_title[ 1 ]= " 第二张 " ;
        imgs_title[ 2 ]= " 第三张 " ;
        imgs_title[ 3 ]= " 第四张 " ;
        imgs_title[ 4 ]= " 第五张 " ;
        imgs_title[ 5 ]= " 第六张 " ;
    //显示小图
    function imgs_s_dis(){
        var imgs=document.getElementById( " imgs " ) ;
        var fr=document.createDocumentFragment() ;
        for(var i= 0 ; i<imgs_s.length;i++){
            var li=document.createElement( " li " ) ;
                li.innerHTML= " <img src=' " +imgs_s[i]+ " ' alt='' /> " ;
                lis. push (li) ;
                fr.appendChild(li) ;
        }
        imgs.appendChild(fr) ;
    }

    //图片切换
    function img_scroll(num){
        cur_img.src=imgs_m[num] ;
        img_title.innerHTML=imgs_title[num] ;
    }

    //图片切换效果
     var ie=/MSIE/. test (navigator.userAgent) ; //浏览器
     var img_title=null ; //title
     var f_img_roll=null ; //大图
     var cur_img=null ; //当前大图
     var mb_img=null ; //目标图
     var f_mask=null ; //MASK层
     var lis=[] ; //所有LI
     var cur_li=null ; //当前MASK所在LI
     var mb_li=null ; //目标LI位置
     var tt=null ; //时间函数
     var m= 0 ; //默认top
     var r= 0 ; //当前lis下标

     //自动播放
     function img_play(){
        r++ ;
        if(r>lis.length- 1 )r= 0 ;
        mb_li=lis[r].offsetTop ;
        if(tt)clearTimeout(tt) ;
        tt=setInterval( " f_mask_mov() " , 25 ) ;
        cur_li=lis[r] ;
        img_scroll(r) ;

     }

     //加载动作
     function _focus(){
        imgs_s_dis() ; //初始小图显示
        cur_li=lis[ 0 ] ; //初始当前mask所在元素
        f_img_roll=document.getElementById( " f_img_roll " ) ;
        cur_img=f_img_roll.getElementsByTagName( " img " )[ 0 ] ; //得到默认大图引用
        img_title=document.getElementById( " f_title " ) ;
        f_mask=document.getElementById( " f_mask " ) ; //得到MASK引用
        for(var i= 0 ; i<lis.length;i++){
            lis[i].οnmοuseοver=function(){
                this.style.border= " 1px solid #cc0000 " ;
            }
            lis[i].οnmοuseοut=function(){
                this.style.border= " 1px solid #0066cc " ;
            }
            lis[i].num=i ;
            lis[i].οnclick=function(){
                if(cur_li!=this){
                    if(tt)clearTimeout(tt) ; //停止正在的播放
                    clearTimeout(ttt) ; //停止自动播放
                    r=this.num ;
                    mb_li=this.offsetTop ;
                    tt=setInterval( " f_mask_mov() " , 40 ) ;
                    cur_li=this ;
                    img_scroll(this.num) ;
                }
            }
        }
        ttt=setTimeout( " img_play() " , 3000 ) ; //开始自动播放
     }

     //滑动效果
     function f_mask_mov(){
        if(m>mb_li){
            m-=(m-mb_li)* 0 . 2 ;
            if((m- 1 )<mb_li){
                clearTimeout(tt) ;
                f_mask.style.top=mb_li+ " px " ;
                f_mask_top=mb_li ; //更新M值
                m=mb_li ;
                ttt=setTimeout( " img_play() " , 3000 ) ; //开始自动播放
                return ;
            }else{
                f_mask.style.top=m+ " px " ;
            }
        }else{
            m+=(mb_li+ 5 -m)* 0 . 2 ;
            if(m>mb_li){
                clearTimeout(tt) ;
                f_mask.style.top=mb_li+ " px " ;
                m=f_mask_top=f_mask.offsetTop ; //更新M值
                ttt=setTimeout( " img_play() " , 3000 ) ; //开始自动播放
                return ;
            }else{
                f_mask.style.top=m+ " px " ;
            }
        }

     }
     window.οnlοad=_focus ;
  </script>
</HEAD>
<BODY>
< div id= " fours_m " >
  < div id= " f_img_roll " ><img src= " http://www.webdm.cn/images/20090930/img_1.jpg " /></ div >
  < div id= " f_img_s " >
    < div id= " f_mask " ></ div >
    <ul id= " imgs " ></ul>
  </ div >
  < div id= " f_title " >第一张</ div >
</ div >
</BODY>
</HTML>
<br />
<p><a href= " http://www.webdm.cn " >网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自： http: //www.webdm.cn/webcode/9ba2eee8-b9d1-49a1-bcca-b2f12d74205d.html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/05/2128464.html