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 相关文章推荐
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
详解JavaScript函数对象
Nov 15 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
了解VUE的render函数的使用
Jun 08 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 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
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python怎么自定义捕获错误
2020/06/29 Python
java关于string最常出现的面试题整理
2021/01/18 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
酒店led欢迎词
2014/01/09 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
法律七进实施方案
2014/03/15 职场文书
求职信标题怎么写
2014/05/26 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL