js 图片轮播(5张图片)


Posted in Javascript onDecember 30, 2008

演示地址:http://img.3water.com/online/picPlayer/picplay.htm

<!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> 
        <title>pic player</title> 
        <script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery-1.2.6.js"></script> 
        <script type="text/javascript" src="http://img.3water.com/jslib/jquery/tween.js"></script> 
    </head> 
    <style type="text/css"> 
    img{border:0;} 
    </style> 
    <body> 
        <div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;"> 
            there is a pic-player 
        </div> 
        <script> 
            var p = $('#picplayer'); 
            var pics1 = [{url:'http://img.3water.com/online/picPlayer/1.jpg',link:'https://3water.com/#',time:5000},{url:'http://img.3water.com/online/picPlayer/2.jpg',link:'https://3water.com/#',time:4000},{url:'http://img.3water.com/online/picPlayer/3.jpg',link:'https://3water.com',time:6000},{url:'http://img.3water.com/online/picPlayer/2.jpg',link:'https://3water.com',time:6000},{url:'http://img.3water.com/online/picPlayer/1.jpg',link:'https://3water.com',time:6000}]; 
            initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]); 
            // 
            // 
            function initPicPlayer(pics,w,h) 
            { 
                //选中的图片 
                var selectedItem; 
                //选中的按钮 
                var selectedBtn; 
                //自动播放的id 
                var playID; 
                //选中图片的索引 
                var selectedIndex; 
                //容器 
                var p = $('#picplayer'); 
                p.text(''); 
                p.append('<div id="piccontent"></div>'); 
                var c = $('#piccontent'); 
                for(var i=0;i<pics.length;i++) 
                { 
                    //添加图片到容器中 
                    c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>'); 
                } 
                //按钮容器,绝对定位在右下角 
                p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>'); 
                // 
                var btnHolder = $('#picbtnHolder'); 
                btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>'); 
                var btns = $('#picbtns'); 
                // 
                for(var i=0;i<pics.length;i++) 
                { 
                    //增加图片对应的按钮 
                    btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> '); 
                    $('#picbtn'+i).data('index',i); 
                    $('#picbtn'+i).click( 
                        function(event) 
                        { 
                            if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')) 
                            { 
                                return; 
                            } 
                            setSelectedItem($(this).data('index')); 
                        } 
                    ); 
                } 
                btns.append(' '); 
                /// 
                setSelectedItem(0); 
                //显示指定的图片index 
                function setSelectedItem(index) 
                { 
                    selectedIndex = index; 
                    clearInterval(playID); 
                    //alert(index); 
                    if(selectedItem)selectedItem.fadeOut('fast'); 
                    selectedItem = $('#picitem'+index); 
                    selectedItem.fadeIn('slow'); 
                    // 
                    if(selectedBtn) 
                    { 
                        selectedBtn.css('backgroundColor','#eee'); 
                        selectedBtn.css('color','#000'); 
                    } 
                    selectedBtn = $('#picbtn'+index); 
                    selectedBtn.css('backgroundColor','#000'); 
                    selectedBtn.css('color','#fff'); 
                    //自动播放 
                    playID = setInterval(function() 
                    { 
                        var index = selectedIndex+1; 
                        if(index > pics.length-1)index=0; 
                        setSelectedItem(index); 
                    },pics[index].time); 
                } 
            }              
        </script> 
         
    </body> 
</html>

如果想增加图片可以通过增加 var pics1 后面的内容。即可。
Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
页面使用密码保护代码
Apr 10 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
js中数组对象去重的两种方法
Jan 18 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
走出JavaScript初学困境—js初学
Dec 29 #Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 #Javascript
不用写JS也能使用EXTJS视频演示
Dec 29 #Javascript
My Desktop :) 桌面式代码
Dec 29 #Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 #Javascript
extjs grid取到数据而不显示的解决
Dec 29 #Javascript
extjs form textfield的隐藏方法
Dec 29 #Javascript
You might like
使用Apache的rewrite技术
2006/06/22 PHP
深入了解php4(2)--重访过去
2006/10/09 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
javascript简易画板开发
2020/04/12 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
微信小程序文章列表功能完整实例
2020/06/03 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
学术会议主持词
2014/03/17 职场文书
专题组织生活会方案
2014/06/15 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
小学英语复习计划
2015/01/19 职场文书
清洁工个人总结
2015/03/04 职场文书
分家协议书范本
2016/03/22 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS