图片滑动代码

最新推荐文章于 2021-12-29 10:43:33 发布

原创最新推荐文章于 2021-12-29 10:43:33 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #delay #float #xhtml #object #filter

js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现图片轮播图的方法。通过设置特定样式和JavaScript交互，可以创建平滑过渡的轮播效果。代码示例中包含了滑动动画、自动播放和鼠标悬停停止等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>

<div id="picBox_top">
<ul id="show_pic_top" style="top:0">
     <li><img src="http://imgcache.qq.com/tuangou/img/ggtp/20110728/1311822227.jpg" width="950" height="90" alt="" title="" /></li>
        <li><img src="http://imgcache.qq.com/tuangou/img/ggtp/20110801/1312180799.jpg" width="950" height="90" alt="" title="" /></li>
        <li><img src="http://imgcache.qq.com/tuangou/img/ggtp/20110802/1312250121.jpg" width="950" height="90" alt="" title="" /></li>
    </ul>
    <ul id="icon_num_top">
     <li class="active">1</li>
        <li>2</li>
        <li>3</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 * 2000;
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.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
     }else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
       interval = setInterval(setValRight(i),time);
      this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
     }
    }
   })(i)
}
}
}
glide.layerGlide(true,'icon_num_top','show_pic_top',90,2,0.1,'top');
</script>

</body>
</html>