开发者社区> 嗯哼9925> 正文

图片轮换

简介:
+关注继续查看

<!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: -610px;">
<li><img src="QQ左右滚动_files/manage.jpg" alt="" title="" width="610" height="205"></li>
<li><img src="QQ左右滚动_files/player.jpg" alt="" title="" width="610" height="205"></li>
<li><img src="QQ左右滚动_files/py.jpg" alt="" title="" width="610" height="205"></li>
<li><img src="QQ左右滚动_files/xf.jpg" alt="" title="" width="610" height="205"></li>
<li><img src="QQ左右滚动_files/TT.jpg" alt="" title="" width="610" height="205"></li>
</ul>
<ul id="icon_num">
<li class="">1</li>
<li class="active">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">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.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','show_pic',610,2,0.1,'left');
</script>
</body></html>
复制代码
一个图片效果。





本文转自豪情博客园博客,原文链接:http://www.cnblogs.com/jikey/archive/2010/03/03/1677393.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【记录】滑动拼图验证码
在一次项目中,为了使验证码更加贴合自身风格。我找到了一款验证码产品可以通过设置图片素材,来修改验证码的底图,使其更加契合。下面就是我对该产品的一些记录。
24 0
uniapp解决富文本图片过大溢出问题
uniapp解决富文本图片过大溢出问题
47 0
前端给页面添加暗水印的办法
前端给页面添加暗水印的办法
499 0
怎么将图片压缩到规定大小和规定尺寸之内
上个项目做了一个图片批量上传,要求压缩到规定大小和尺寸,并且加文字跟图片水印。花了好长时间才完成,在此记录一下以方便以后使用。 阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
2199 0
单张图片轮换
单独图片轮换,点击左右按钮,实现翻页效果。  <!DOCTYPE html> <html> <head>     <meta charset="utf-8"/>     <title>单独图片轮换 - 豪情</title>     <style type="text/css">    ...
1093 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载