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

最新推荐文章于 2023-03-19 14:53:16 发布
最新推荐文章于 2023-03-19 14:53:16 发布
阅读量183 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/davinwill/archive/2009/12/17/1626204.html
版权

首先感谢原作者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

weixin_30710457
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS原生代码实现图片轮播无缝切换的一种思路
谢家老树
05-02 1万+
JS实现图片轮播是个老生常谈的问题，也是新手的必由之路，在这里提供一种思路，供大家参考： 1.生成DIV做外框，并设置overflow:hidden；  // 每个方法都必须有的 2.创建一个数组arr，放置图片地址 3.生成两个并排的图片img1,img2，初始化图片地址为arr[0] arr[1] 并使用绝对定位，便于后面移动图片 4.开一个定时器，间隔一定时间后，img1 img2的
图片轮换
good_idea_的博客
07-08 233
图片轮换 先定义xml <FrameLayout android:layout_width="368dp" android:layout_height="200dp" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="8dp"> <android.s
IDEA使用BootStrap做轮播图
最新发布
weixin_44456650的博客
03-19 913
在官网找做轮播图的插件地址：JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)。打开IDEA新工程给大家一个链接。一键生成SpringBoot代码。使用IDEA一键生成SpringBoot流程_15311078077的博客-CSDN博客起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)别忘了先下载jquery-3.3.1。下载完之后放置位置如下图。
实现轮播图
尼卡斯拉的博客
11-03 999
第一次种方式： bootstrap比较常用的框架，实现轮播图有非常好用； bootstrap实现轮播只需要引入响应的类和js内容就可以实现； 首先，需要思考我们要实现什么样的功能： 1：图片中放入容器中，固定时间内，图片切换，或者按左右键图标实现切换； 像图中效果： 还有跳动的小圆点显示哪张图片是活跃状态； 2：根据上面大致总结的功能，我们列出实现功能所需要的大致东西；
自己所做的一个轮播图案例，以供参考，欢迎指教
dandandegeshou的博客
02-22 414
轮播图 window.onload = function () { var config = [ { "top": 0, "left": 0, "opacity": 0.3, "zIndex": 1 },//0 { "top": 120, "left": 100, "opacity": 0.5, "zIndex": 2 },//1 { //"width": 20
一步一步教你写淡入淡出带注释的图片轮播插件（一）
01-21
前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代码，虽然效果达到了，但是有几个地方本人有不同的看法： 1.那位作者的思路是隐藏掉真正...
用CSS实现的图片透明度链接效果代码
09-25
标题中的“用CSS实现的图片透明度链接效果代码”指的是使用CSS来控制图片的透明度，并结合链接功能，实现一种交互式的视觉效果。当鼠标悬停在图片上时，图片会变得半透明，同时显示出文字介绍，还可以添加其他功能，...
一个可屏蔽FLASH右键和使用FLASH 右键的JS插入FLASH脚本
09-22
修改自Google工程师写的那个swfobject 2.2版本 删除掉一些不常用的功能减少文件大小 并增加一种更人性化的FLASH插入标签 格式型如 如 支持 右键 如需要屏蔽右键 请置 rightclick值为no 如使用右键屏蔽功能 支持除...
BlueIdea’s(蓝色理想) Flash GuestBook v1.0
08-21
这个版本的历史可以追溯到互联网早期，那时Flash技术因其丰富的交互性和动态展示效果，在网页设计中广泛应用。BlueIdea作为聚集众多IT爱好者的平台，其开发的Flash GuestBook为网站提供了个性化的互动功能，让访客...
带缓冲的 收缩与展开内容效果
12-11
兼容ie5.5+ firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试) 看到blueidea很多朋友都发了一些 收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵. 最大高度还需要固定数值...
最简单的轮播图效果插件
11-10
最简单的轮播图效果插件，既可以拿来学习，简单易懂，又可以直接套用到实践中去，只需要填写几个图片配置参数如：播放时间、是否自动播放等参数即可，不添加默认页可以。
轮播图依赖包
11-07
这个上传的依赖包是最为Android Studio的轮播图依赖包使用的
Swiper-3.4.2轮播图插件
05-12
主要应用与移动端的轮播图插件 携带的css3的css包,在ie9+才有效,兼容也到ie9+, 在移动端应用方便,也可作为框架应用
轮播图的写法之二（功能全实现）
06-17
/** * 1.实现了轮播图自动滚动效果<br> * 2.设置了跟随页面变化的小点点<br> * 3.解决了轮播图手指滑动后，显示页面错位的问题<br> * 4.实现了手指按住轮播图时，停止自动滚动的效果<br> * 5.实现了点击轮播图，跳转到相关页面的操作<br> */
带后台的图片轮播代码
08-19
可自己建后台。实现后台上传图片，前台显示图片轮播效果。缺pixviewer文件，网友可去下载
图片轮播效果
洛漠O_o的专栏
02-19 333
ImageSlideShowDemo 原理 效果图 下载地址ImageSlideShowDemoversion1.0 本来找到这个案例，但是下载要积分。没办法，只能巴拉巴拉 弄下来了原理1、主要原理就是利用定时任务器定时切换ViewPager的页面。 2、里面用了一个读取网络图片的插件效果图下载地址https://github.com/407365100/ImageSlideShowDemo.g
JQuery 前台的轮播图
落子無悔
01-15 378
JQuery 前台的轮播图 Document *{ margin: 0; padding: 0; list-style: none; } #box{ width: 400px; height: 230px; margin: 20px auto; border: 1px solid black; position:rela
前端练习(一)——轮播图
qq_62983012的博客
01-22 2041
轮播图
提升开发效率：50个实用jQuery代码片段与解决方案
本文主要介绍了50个实用的jQuery代码片段，旨在帮助开发者提升在jQuery开发过程中的效率和代码整洁度。这些代码涵盖了多个实用场景，从定制jQuery的默认编码、解决jQuery与Prototype共存时的$全局变量冲突，到判断...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值