脚本之家

首页应用手游攻略教程

﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效

js 图片轮播(5张图片)

作者：mdxy-dxy

网上比较常见的用jquery实现的图片轮播效果代码。

演示地址：http://img.jb51.net/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.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>

        <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script>

    </head>

    <style type="text/css">

    img{border:;}

    </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.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:}];

            initPicPlayer(pics1,p.css('width').split('px')[],p.css('height').split('px')[]);

            //

            //

            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=;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-)+'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=;i<pics.length;i++)

                {

                    //增加图片对应的按钮

                    btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;">&nbsp;'+(i+)+'&nbsp;</span>&nbsp;');

                    $('#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('&nbsp;');

                ///

                setSelectedItem();

                //显示指定的图片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+;

                        if(index > pics.length-)index=;

                        setSelectedItem(index);

                    },pics[index].time);

                }

            } 

        </script> 

    </body>

</html>

如果想增加图片可以通过增加 var pics1 后面的内容。即可。

用JS做图片轮播的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  5. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  6. 使用JS实现图片轮播（前后首尾相接）

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  7. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  8. js做的轮播图

    以下那些注释呢,都是要靠自己理解才是最重要的, <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  9. 用js 做大图轮播方法（一）

    //html部分 <div id="wrap"> <div id="slider"> <a target="_blank ...

随机推荐

  1. 让浏览器非阻塞加载javascript的几种方式

    通常大多数浏览器是并行下载资源的,但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构.脚本之间的存在依赖关系.使用document.write 向页面输出HTML等.浏览器为了确保正确执行脚本和呈 ...

  2. python 笔记3--高级特性

    切片 语法 L[l:r] 取L[l],L[l+1]-L[r-2],L[r-1] L[l:r:m] 取L[l],L[l+m],L[l+2*m],L[l+3*m]-.(满足l+n*m<=r-1) t ...

  3. ThreadPoolExecutor详解

    线程池类为 java.util.concurrent.ThreadPoolExecutor,常用构造方法为: ThreadPoolExecutor(int corePoolSize, int maxi ...

  4. React-Native获取文本框的值

    要想获取文本框的值,首先我们需要看一下官方文档的解释: 这里的意思是说当文本框的内容改变的时候,文本框的输入的内容就会作为一个参数进行传递.因此我们就可以获取到文本框里面的内容就好了. constru ...

  5. 使用SQLCipher加密数据库

      Xcode中集成了免费的sqlite,但是不提供加密的模块,突然有一天,蛋疼的客户要求把数据进行加密,于是乎就寻找使用简单并且可以把数据迁移过度到加密数据库的框架. SQLCipher是第三方的开 ...

  6. python 基础篇（一）--linux命令篇

    期末下一门考试还有些时间,那就来看看python的视频吧,基于python2.7.6,用的是xubuntu(vm搭建虚拟机). 先花了2,3个小时安装了xubuntu,配置了搜狗输入法,gedit也配 ...

  7. stl的集合set——安迪的第一个字典（摘）

    set就是数学上的集合——每个元素最多只出现一次,和sort一样,自定义类型也可以构造set,但同样必须定义“小于”运算符 以下代码测试set中无重复元素 #include<iostream&g ...

  8. 在配置WCF服务的时候出现的错误总结

    1.由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. 我是通过安装图中的FramWork3.5.1搞定的. 网上的其他参考: http ...

  9. LogBoy运行截图

  10. MEMS加速度计工作原理

    一般加速度计有两块芯片组成,一块是MEMS传感器,另一块是客户化的信号处理芯片. 加速度计也称惯性传感器,因为它的工作原理就是靠MEMS中可移动部分的惯性.由于中间电容板的质量很大,而且它是一种悬臂构 ...