图片自动播放器代码,下面有1,2,3,4 的那个

最新推荐文章于 2023-08-31 16:23:10 发布
最新推荐文章于 2023-08-31 16:23:10 发布
阅读量223 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jcomet/archive/2008/10/05/1304080.html
版权

<html>
<body>
<script>
/**************************************************
名称: 图片轮播类
创建时间: 2007-11-12
示例:
    页面中已经存在名为imgPlayer(或者别的ID也行)的节点.
    PImgPlayer.addItem( "test", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg");
    PImgPlayer.addItem( "test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg");
    PImgPlayer.addItem( "test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg");
    PImgPlayer.init( "imgPlayer", 200, 230 );
备注:
    适用于一个页面只有一个图片轮播的地方.
***************************************************/
var PImgPlayer = {
    _timer : null,
    _items : [],
    _container : null,
    _index : 0,
    _imgs : [],
    intervalTime : 5000,    //轮播间隔时间
    init : function( objID, w, h, time ){
        this.intervalTime = time ||this.intervalTime;
        this._container = document.getElementById( objID );
        this._container.style.display ="block";
        this._container.style.width = w +"px";
        this._container.style.height = h +"px";
        this._container.style.position ="relative";
        this._container.style.overflow  ="hidden";
        //this._container.style.border = "1px solid #fff";
        var linkStyle ="display: block; TEXT-DECORATION: none;";
        if( document.all ){
            linkStyle +="FILTER:";
            linkStyle +="progid:DXImageTransform.Microsoft.Barn(duration=0.5, motion='out', orientation='vertical') ";
            linkStyle +="progid:DXImageTransform.Microsoft.Barn ( duration=0.5,motion='out',orientation='horizontal') ";
            linkStyle +="progid:DXImageTransform.Microsoft.Blinds ( duration=0.5,bands=10,Direction='down' )";
            linkStyle +="progid:DXImageTransform.Microsoft.CheckerBoard()";
            linkStyle +="progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=0)";
            linkStyle +="progid:DXImageTransform.Microsoft.GradientWipe ( duration=1,gradientSize=1.0,motion='reverse' )";
            linkStyle +="progid:DXImageTransform.Microsoft.Inset ()";
            linkStyle +="progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=out )";
            linkStyle +="progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=in )";
            linkStyle +="progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=DIAMOND,motion=in )";
            linkStyle +="progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=SQUARE,motion=in )";
            linkStyle +="progid:DXImageTransform.Microsoft.Iris ( duration=0.5,irisStyle=STAR,motion=in )";
            linkStyle +="progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=CLOCK )";
            linkStyle +="progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=WEDGE )";
            linkStyle +="progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=horizontal )";
            linkStyle +="progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=vertical )";
            linkStyle +="progid:DXImageTransform.Microsoft.RandomDissolve ()";
            linkStyle +="progid:DXImageTransform.Microsoft.Spiral ( duration=0.5,gridSizeX=16,gridSizeY=16 )";
            linkStyle +="progid:DXImageTransform.Microsoft.Stretch ( duration=0.5,stretchStyle=PUSH )";
            linkStyle +="progid:DXImageTransform.Microsoft.Strips ( duration=0.5,motion=rightdown )";
            linkStyle +="progid:DXImageTransform.Microsoft.Wheel ( duration=0.5,spokes=8 )";
            linkStyle +="progid:DXImageTransform.Microsoft.Zigzag ( duration=0.5,gridSizeX=4,gridSizeY=40 ); width: 100%; height: 100%";
        }
        //
        var ulStyle ="margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;FILTER:Alpha(Opacity=30,FinishOpacity=90, Style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;";
        //
        var liStyle ="margin:0;list-style-type: none; margin:0;padding:0; float:right;";
        //
        var baseSpacStyle ="clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体';opacity: 0.6;";
        baseSpacStyle +="border:1px solid #fff;border-right:0;border-bottom:0;";
        baseSpacStyle +="color:#fff;text-align:center; cursor:pointer; ";
        //
        var ulHTML ="";
        for(var i =this._items.length -1; i >=0; i--){
            var spanStyle ="";
            if( i==this._index ){
                spanStyle = baseSpacStyle +"background:#ff0000;";
            } else {               
                spanStyle = baseSpacStyle +"background:#000;";
            }
            ulHTML +="<li style=\""+liStyle+"\">";
            ulHTML +="<span οnmοuseοver=\"PImgPlayer.mouseOver(this);\" οnmοuseοut=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" οnclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\""+this._items[i].title +"\">"+ (i+1) +"</span>";
            ulHTML +="</li>";
        }
        //
        var html ="<a href=\""+this._items[this._index].link+"\" title=\""+this._items[this._index].title+"\" target=\"_blank\" style=\""+linkStyle+"\"></a><ul style=\""+ulStyle+"\">"+ulHTML+"</ul>";
        this._container.innerHTML = html;
        var link =this._container.getElementsByTagName("A")[0];   
        link.style.width =  w +"px";
        link.style.height = h +"px";
        link.style.background ='url('+this._items[0].img +') no-repeat center center';
        //
        this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );
    },
    addItem : function( _title, _link, _imgURL ){
        this._items.push ( {title:_title, link:_link, img:_imgURL } );
        var img =new Image();
        img.src = _imgURL;
        this._imgs.push( img );
    },
    play : function( index ){
        if( index!=null ){
            this._index = index;
            clearInterval( this._timer );
            this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );
        } else {
            this._index =this._index<this._items.length-1?this._index+1 : 0;
        }
        var link =this._container.getElementsByTagName("A")[0];   
        if(link.filters){
            var ren = Math.floor(Math.random()*(link.filters.length));
            link.filters[ren].Apply();
            link.filters[ren].play();
        }
        link.href =this._items[this._index].link;
        link.title =this._items[this._index].title;
        link.style.background ='url('+this._items[this._index].img +') no-repeat center center';
        //
        var liStyle ="margin:0;list-style-type: none; margin:0;padding:0; float:right;";
        var baseSpacStyle ="clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体'; opacity: 0.6;";
        baseSpacStyle +="border:1px solid #fff;border-right:0;border-bottom:0;";
        baseSpacStyle +="color:#fff;text-align:center; cursor:pointer; ";
        var ulHTML ="";
        for(var i =this._items.length -1; i >=0; i--){
            var spanStyle ="";
            if( i==this._index ){
                spanStyle = baseSpacStyle +"background:#ff0000;";
            } else {               
                spanStyle = baseSpacStyle +"background:#000;";
            }
            ulHTML +="<li style=\""+liStyle+"\">";
            ulHTML +="<span οnmοuseοver=\"PImgPlayer.mouseOver(this);\" οnmοuseοut=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" οnclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\""+this._items[i].title +"\">"+ (i+1) +"</span>";
            ulHTML +="</li>";
        }
        this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML;   
    },
    mouseOver : function(obj){
        var i = parseInt( obj.innerHTML );
        if( this._index!=i-1){
            obj.style.color ="#ff0000";
        }
    },
    mouseOut : function(obj){
        obj.style.color ="#fff";
    }
}
</script>
<div id="imgADPlayer"></div>
<script>
    PImgPlayer.addItem( "test", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg");
    PImgPlayer.addItem( "test2", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo4.jpg");
    PImgPlayer.addItem( "test3", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo3.jpg");
    PImgPlayer.init( "imgADPlayer", 200, 230 );
</script>
</body>
</html>

转载于:https://www.cnblogs.com/jcomet/archive/2008/10/05/1304080.html

weixin_30593261
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery图片自动播放器代码.zip
05-24
jQuery图片自动播放器代码基于jquery-1.7.2.min.js制作，实现了图片标记、跳转、暂停、前进、后退、循环播放，快进等功能
用Juqery实现图片的自动播放（源码）
09-15
这个是用Jquery实现的图片自动播放，里面附有源码并附带注释。
Java编写的图片播放器
12-28
简单实用的图片播放程序 可以直接用，无需修改。
超精美的网页图片播放器(Flash+JS代码)
10-22
超精美的网页图片播放器(Flash+JS代码)！ 很好看的一个播放器，使用率并不多！ 需要的赶快下载！！！
C#408-图片自动播放,源代码
08-10
C#408-图片自动播放,源代码
类似播放器的jQuery图片切换
04-02
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一个类似播放器的图片切换效果。这个效果包括了左右切换按钮、播放/暂停按钮、缩略图切换以及自动轮播功能，这些都是网页交互设计中常见且实用的功能。下面，...
仿flash播放器的网站图片轮播切换
04-07
2. **定时器（Timer）**：为了实现自动循环切换，可以使用`setInterval`函数设置定时器，每隔一定时间自动切换到下一张图片。 3. **过渡效果**：为了让图片切换更平滑，可以使用CSS3的`transition`属性添加过渡效果...
自动图片播放器
10-31
【自动图片播放器】是一种应用程序，专为用户提供方便的图片浏览体验。这款软件设计小巧而功能强大，能够自动播放用户选定的图片集，为...通过这些技术的应用，可以创建一个功能齐全、用户体验良好的图片自动播放工具。
Android图片播放器
05-21
本项目提供了一个简单的Android图片播放器的源代码，旨在帮助开发者理解和实现图片浏览功能。下面将详细介绍该知识点。 一、Android图片加载库的选择 在Android中，图片的加载和显示并不是一个简单的任务，因为...
build-loopImageReader-ui-Debug.zip_图片轮播播放器_轮播
09-20
下面将详细讨论图片轮播播放器的关键技术和实现方法。 首先，轮播播放器的核心功能是左右滑动切换图片。这种交互设计通常通过触摸事件或按钮触发，使用户可以轻松浏览一系列图片。在Android或iOS平台上，我们可以...
图片轮播.rar（HTML+CSS+JS）
07-15
图片轮播：HTML+CSS+JS （自己的学习成果，有许多不足的地方希望大家指出一起学习）
AndroidImageSlider库实现自动轮播.rar
07-30
AndroidImageSlider库实现自动轮播.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Python+turtle实现一个图片播放器
weixin_42636075的博客
08-31 398
【代码】Python+turtle实现一个图片播放器。
显示多幅图片
计算机编程开发学习交流的专栏
04-24 2047
<br />使用方法：<br />首页在网页<head></head>标签中引用PImgPlayer.js文件。<br /><script type="text/javascript" language="javascript" src="PImgPlayer.js"></script> <br />然后在网页中，需要显示轮播图片的地方，加入一DIV标签并指定ID，本例设置ID为 imgADPlayer ，则调用轮播函数的方法如下:<br /><div id="imgADPlayer"></div><br
JavaScript 图片轮播
davinci_2012的专栏
12-27 83
　　一个用 JavaScript 实现的图片轮播效果，兼容各种浏览器（IE、Firefox、Chrome），体积小，不压缩也只有 10kb，调用方便，比一般的 flash 轮播效果更省资源，更快的加载速度。 　　示例： 　　页面中已经存在名为imgPlayer（或者别的ID也行）的节点。 [code="java"]PImgPlayer.addItem( "test", "http://w...
（外人别看，自已记的一点东西）
kaka-java
04-13 104
var PImgPlayer = { _timer : null, _items : [], _container : null, _index : 0, _imgs : [], intervalTime : 5000, init : function( objID, w, h, time ){ this.intervalTime = time || this.i...
用js实现图片连播和联级菜单的实现
weixin_30466953的博客
09-19 92
<!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> div{ border: 1px solid red; width:218px; height: 218px; } ...
图片轮播的实现
旺仔好吃糖的博客
12-05 2304
1.图片轮播（使用动画，根据图片不同时间的移动值来实现，图片排放在一个容器中，图片大小要与容器大小一致） #photo>img{ float:left; width:330px; height:470px; } #photo{ width:1650px; animation:switch 7s ease-out infinite; } <div id="container"> <div id
html音乐播放器自动播放代码
最新发布
10-04
在HTML中，要实现音乐播放器自动播放，你可以...下面是一个示例代码： ```html <audio src="your-music-file.mp3" autoplay></audio> ``` 在这个例子中，`autoplay`属性告诉浏览器在加载页面时自动开始播放音乐文件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值