在BLUEIDEA上看到的一个挺好的图片轮播效果

首先感谢原作者bopooo的共享奉献。以下内容为引用:

-----------------------------------------------------------

在腾讯QQ软件下载的页面有一个图片滑动的效果,觉得还不错 就自己封装了一个
技术方面在 动作缓冲上 遇到一些问题  不过都解决了
不过还是要谢谢 天空里的一片云给我提供的资料http://bbs.blueidea.com/thread-2961061-1-2.html
我大体上看了下 别人的思路 就自己动手做了 基本上是按照自己的想法来做的
考虑到很多朋友不太了解js  所以我封装的时候 把所有参数都集中到一个函数里  免得大家调用的时候还要看源代码 去设置参数
根据提供不同的参数会有不同的效果  没有封装特别多的效果  需要的朋友可以自己动手改正自己想要的
废话多了  具体看效果

横向滑动效果

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>picsGlide</title>
<style type="text/css">
body{ font-size:12px; color:#333;}
#picBox{width:610px; height:205px; margin:50px auto; overflow:hidden; position:relative;}
#picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:205px; width:3050px; position:absolute;}
#picBox ul#show_pic li{ float:left; margin:0; padding:0; height:205px;}
#picBox ul#show_pic li img{ display:block;}
#icon_num{ position:absolute; bottom:0px; right:10px;}
#icon_num li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center;  cursor:pointer; padding:0; margin:0;margin-right:5px;}
#icon_num li:hover,#icon_num li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}
#picBox_top{width:610px; height:205px; margin:50px auto; position:relative; overflow:hidden;}
#picBox_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;}
#picBox_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;}
#picBox_top ul#show_pic_top li img{ display:block;}
#icon_num_top{ position:absolute; bottom:0px; right:10px;}
#icon_num_top li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center;  cursor:pointer; padding:0; margin:0;margin-right:5px;}
#icon_num_top li:hover,#icon_num_top li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}
</style>
</head>
<body>
<div id="picBox">
    <ul id="show_pic" style="left:0;">
        <li><img src="http://inncache.soso.com/pc/images/manage.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/player.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/py.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/xf.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/TT.jpg" width="610" height="205" alt="" title="" /></li>
    </ul>
    <ul id="icon_num">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script type="text/javascript">
/**
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸(width或者height)  尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间  单位/秒
*@param fSpeed type:float   速率 取值在0.05--1之间 当取值是1时  没有滑动效果
*@param point type:string   left or top
*/
var glide =new function(){
    function $id(id){return document.getElementById(id);};
    this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
        var oSubLi = $id(oEventCont).getElementsByTagName('li');
        var interval,timeout,oslideRange;
        var time=1;
        var speed = fSpeed
        var sum = oSubLi.length;
        var a=0;
        var delay=second * 1000;
        var setValLeft=function(s){
            return function(){
                oslideRange = Math.abs(parseInt($id(oSlider).style[point]));   
                $id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';       
                if(oslideRange==[(sSingleSize * s)]){
                    clearInterval(interval);
                    a=s;
                }
            }
        };
        var setValRight=function(s){
            return function(){        
                oslideRange = Math.abs(parseInt($id(oSlider).style[point]));                           
                $id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
                if(oslideRange==[(sSingleSize * s)]){
                    clearInterval(interval);
                    a=s;
                }
            }
        }
        function autoGlide(){
            for(var c=0;c<sum;c++){oSubLi[c].className='';};
            clearTimeout(interval);
            if(a==(parseInt(sum)-1)){
                for(var c=0;c<sum;c++){oSubLi[c].className='';};
                a=0;
                oSubLi[a].className="active";
                interval = setInterval(setValLeft(a),time);
                timeout = setTimeout(autoGlide,delay);
            }else{
                a++;
                oSubLi[a].className="active";
                interval = setInterval(setValRight(a),time);   
                timeout = setTimeout(autoGlide,delay);
            }
        }
        if(auto){timeout = setTimeout(autoGlide,delay);};
        for(var i=0;i<sum;i++){   
            oSubLi[i].onmouseover = (function(i){
                return function(){
                    for(var c=0;c<sum;c++){oSubLi[c].className='';};
                    clearTimeout(timeout);
                    clearInterval(interval);
                    oSubLi[i].className="active";
                    if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
                        interval = setInterval(setValLeft(i),time);
                        this.οnmοuseοut=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
                    }else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
                            interval = setInterval(setValRight(i),time);
                        this.οnmοuseοut=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
                    }
                }
            })(i)           
        }
    }
}
glide.layerGlide(true,'icon_num','show_pic',610,2,0.1,'left');
</script>
</body>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>picsGlide</title>
<style type="text/css">
body{ font-size:12px; color:#333;}
#picBox{width:610px; height:205px; margin:50px auto; overflow:hidden; position:relative;}
#picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:205px; width:3050px; position:absolute;}
#picBox ul#show_pic li{ float:left; margin:0; padding:0; height:205px;}
#picBox ul#show_pic li img{ display:block;}
#icon_num{ position:absolute; bottom:0px; right:10px;}
#icon_num li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center;  cursor:pointer; padding:0; margin:0;margin-right:5px;}
#icon_num li:hover,#icon_num li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}
#picBox_top{width:610px; height:205px; margin:50px auto; position:relative; overflow:hidden;}
#picBox_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;}
#picBox_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;}
#picBox_top ul#show_pic_top li img{ display:block;}
#icon_num_top{ position:absolute; bottom:0px; right:10px;}
#icon_num_top li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center;  cursor:pointer; padding:0; margin:0;margin-right:5px;}
#icon_num_top li:hover,#icon_num_top li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}
</style>
</head>
<body>
<div id="picBox_top">
    <ul id="show_pic_top" style="top:0;">
        <li><img src="http://inncache.soso.com/pc/images/manage.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/player.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/py.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/xf.jpg" width="610" height="205" alt="" title="" /></li>
        <li><img src="http://inncache.soso.com/pc/images/TT.jpg" width="610" height="205" alt="" title="" /></li>
    </ul>
    <ul id="icon_num_top">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script type="text/javascript">
/**
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸(width或者height)  尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间  单位/秒
*@param fSpeed type:float   速率 取值在0.05--1之间 当取值是1时  没有滑动效果
*@param point type:string   left or top
*/
var glide =new function(){
    function $id(id){return document.getElementById(id);};
    this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
        var oSubLi = $id(oEventCont).getElementsByTagName('li');
        var interval,timeout,oslideRange;
        var time=1;
        var speed = fSpeed
        var sum = oSubLi.length;
        var a=0;
        var delay=second * 1000;
        var setValLeft=function(s){
            return function(){
                oslideRange = Math.abs(parseInt($id(oSlider).style[point]));   
                $id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';       
                if(oslideRange==[(sSingleSize * s)]){
                    clearInterval(interval);
                    a=s;
                }
            }
        };
        var setValRight=function(s){
            return function(){        
                oslideRange = Math.abs(parseInt($id(oSlider).style[point]));                           
                $id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
                if(oslideRange==[(sSingleSize * s)]){
                    clearInterval(interval);
                    a=s;
                }
            }
        }
        function autoGlide(){
            for(var c=0;c<sum;c++){oSubLi[c].className='';};
            clearTimeout(interval);
            if(a==(parseInt(sum)-1)){
                for(var c=0;c<sum;c++){oSubLi[c].className='';};
                a=0;
                oSubLi[a].className="active";
                interval = setInterval(setValLeft(a),time);
                timeout = setTimeout(autoGlide,delay);
            }else{
                a++;
                oSubLi[a].className="active";
                interval = setInterval(setValRight(a),time);   
                timeout = setTimeout(autoGlide,delay);
            }
        }
        if(auto){timeout = setTimeout(autoGlide,delay);};
        for(var i=0;i<sum;i++){   
            oSubLi[i].onmouseover = (function(i){
                return function(){
                    for(var c=0;c<sum;c++){oSubLi[c].className='';};
                    clearTimeout(timeout);
                    clearInterval(interval);
                    oSubLi[i].className="active";
                    if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
                        interval = setInterval(setValLeft(i),time);
                        this.οnmοuseοut=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
                    }else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
                            interval = setInterval(setValRight(i),time);
                        this.οnmοuseοut=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
                    }
                }
            })(i)           
        }
    }
}
glide.layerGlide(true,'icon_num_top','show_pic_top',205,2,0.1,'top');
</script>
</body>
</html>

转载于:https://www.cnblogs.com/davinwill/archive/2009/12/17/1626204.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值