js 图片轮播(5张图片)

演示地址：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: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.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',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 后面的内容。即可。

赞 (0)

相关推荐

  • JS实现简易图片轮播效果的方法

    JS实现简易图片轮播效果的方法

    本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

  • js图片轮播效果实现代码

    js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

  • 最简单的JavaScript图片轮播代码(两种方法)

    最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

  • 带左右箭头图片轮播的JS代码

    带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!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/19

  • 简单的js图片轮换代码(js图片轮播)

    复制代码 代码如下: <!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>  <meta http-equiv=&quo

  • js图片自动轮播代码分享(js图片轮播)

    1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • 原生javascript实现图片轮播效果代码

    看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI

  • JavaScript实现简单图片轮播效果

    JavaScript实现简单图片轮播效果

    本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图 代码块 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: non

随机推荐