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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
浅谈javascript回调函数
Dec 07 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
vue路由跳转传参数的方法
May 06 Javascript
Vue分页插件的前后端配置与使用
Oct 09 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
PHP入门
2006/10/09 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
Python2随机数列生成器简单实例
2017/09/04 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
详解python 注释、变量、类型
2018/08/10 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
普通党员个人对照检查材料
2014/09/18 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
通知的写法
2015/04/23 职场文书
疾病证明书
2015/06/19 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
详解redis在微服务领域的贡献
2021/10/16 Redis
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python