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计数器代码
Nov 04 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
JavaScript实现简单图片切换
Apr 29 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
机关节能减排实施方案
2014/03/17 职场文书
抽奖活动主持词
2014/03/31 职场文书
家长通知书教师评语
2014/04/17 职场文书
物流专业自荐信
2014/05/23 职场文书
软环境建设心得体会
2014/09/09 职场文书
党校培训学习心得体会
2016/01/06 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python