基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果；

但我在使用fadeIn淡入时却无效果，最后只能使用fadeTo实现，求大神指教

HTML：

<!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="Content-Type" content="text/html; charset=utf-8" />

<title>一个轮播</title>

<style>

    #scrollPlay{

        width: 730px;

        height: 336px;

        /*overflow: hidden;*/

    }

    #pre{

        position: absolute;

        margin-top: 150px;

        width:30px;

        height: 30px;

        background: #000;

        color:#fff;

        opacity: 0.7;

        text-align: center;

        line-height: 30px;

        font-size: 20px;

        z-index: 10;

    }

    img{

        opacity: 0;

        position: absolute;

    }

    #next{

        position: absolute;

        margin-left:700px;

        margin-top: 150px;

        width:30px;

        height: 30px;

        background: #000;

        color:#fff;

        opacity: 0.7;

        text-align: center;

        line-height: 30px;

        font-size: 20px;

        z-index: 10;

    }

    span{

        display: block;

        width: 15px;

        height: 15px;

        float: left;

        border: 1px solid #fff;

    }

    #buttons{

        position: absolute;

        background: #000;

        margin-top: 300px;

        margin-left: 300px;

        z-index: 10;

    }

    .onactive{

        background: green;

    }

</style>

<script src='jquery.js'></script>

<script src='index.js'></script>

</head>

<body>

    <div id='scrollPlay'>

        <div id='buttons'>

            <span index = 0 class='onactive'></span>

            <span index = 1></span>

            <span index = 2></span>

            <span index = 3></span>

            <span index = 4></span>

        </div>

        <div id='pre'>&lt</div>

        <div id='next'>&gt</div>

        <img src='images/1.jpg' alt='pics' style='opacity:1'>

        <img src='images/2.jpg' alt='pics'>

        <img src='images/3.jpg' alt='pics'>

        <img src='images/4.jpg' alt='pics'>

        <img src='images/5.jpg' alt='pics'>

    </div>

</body>

</html>

JS：

$(function(){

    var index = 0;

    var flag = false; //用于判断是否处于动画状态

    //切换函数

    function move(offset){

        flag=true;

        //console.log(offset)

        $('img').eq(index).fadeOut('slow',function(){

            if(offset>0){

                if(index ==4){

                    index=0;

                }else{

                    //console.log(index);

                    index=index+offset;

                    //console.log(index);

                }

            }

            if(offset<){

                if(index==0){

                index=4;

                }else{

                index=index+offset

                }

            }

            $('img').eq(index).fadeTo('slow',1)   //使用fadeIn不成功:$('img').eq(index).fadeIn('slow')

            showButton();

            flag=false;

        });

    }

    //点击切换上一张

    $('#pre').click(function(){

        if(flag==false){

            move(-1)

        }

    })

    //点击切换下一张

    $('#next').click(function(){

        if(flag==false){

            move(1)

        }

    })

    //点击按钮直接切换

    $('span').click(function(){

        if(flag==false){

            var i= $(this).attr('index')

            //console.log(i)

            //console.log(index)

            //console.log(i-index)

            move(i-index)

            showButton();

        }

    })

    //高亮显示按钮

    function showButton(){

        if($('span').hasClass('onactive')){

            $('span').removeClass();

        }

        $('span').eq(index).addClass('onactive')

    }

    //自动播放

    var timer;

    function go(){

        timer = setInterval(function(){

            $('#next').trigger('click');

        },3000)

    }

    //鼠标悬停，清除自动播放

    $('#scrollPlay').mouseover(function(){

            clearInterval(timer)

    })

    //鼠标移开，开始自动播放

    $('#scrollPlay').mouseout(function(){

            go();

    })

    go();

})

利用jQuery的淡入淡出实现轮播器的更多相关文章

  1. 利用jquery的淡入淡出函数（fadeIn和fadeOut)--实现轮播

    首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...

  2. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  3. jQuery淡入淡出的轮播图

    html结构: <div class="banna">            <ul class="img">              ...

  4. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  5. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  6. jQuery补充，基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  7. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  8. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  9. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

随机推荐

  1. SharePoint 2010中重置windows 活动目录(AD)域用户密码的WebPart（免费下载）

    由于SharePoint 2013推出不久,并非所有的企业都会升级到SharePoint 2013的,毕竟升级不是打打补丁这么简单,更多的企业还是使用Sharepoint 2010版本的,因此本人自行 ...

  2. JavaScript 属性描述符

    属性描述符(Property Descriptor)是 ES5 之后出现的概念,顾名思义,它用于描述属性应该是什么样,例如是否只读,能否枚举,能否可配置等.所有对象属性均可使用属性描述符来定义. 属性 ...

  3. C#读写Json

    C#处理json文件主要有两种方式: (1)使用JavaScriptSerializer类,需要引入System.Web.Extension库,并添加下面两个引用: using System.Web; ...

  4. ruby -- 进阶学习（五）使用Ckeditor插件上传中文图片

    基于rails4.0环境 当使用Ckeditor上传中文命名图片时报错,解决方法是对图片进行重命名 在Ckeditor插件的安装目录下找到controllers/.../application.rb ...

  5. 为sourceinsight添加makefile、kconfig、*.S文件支持

    转载:http://www.cnblogs.com/myblesh/articles/2452030.html   大家用source insight看linux源码的时候都遇到这么一个麻烦,make ...

  6. [Node.js] Express的测试覆盖率

    原文地址:http://www.moye.me/2014/12/03/express_coverage/ 引子 有群友问到Express怎么做 单元测试/覆盖率测试,这是上篇所遗漏的,特此补上 Exp ...

  7. Bucky – 免费开源的实时用户监控工具

    Bucky 是一个开源的实时用户监控工具,用于衡量用户在浏览器中使用 Web 应用程序时的性能.它可以自动测量你的网页需要多长时间来加载,Ajax 请求需要多长时间和各个函数需要实行多久. 您可能感兴 ...

  8. Android 学习笔记之AndBase框架学习(四) 使用封装好的函数实现单，多线程任务

    PS:Force Is Meaningless Without Skill 学习内容: 1.使用AndBase实现单线程任务... 2.使用AndBase实现多线程任务...   AndBase内部封 ...

  9. Scrum 3.1 多鱼点餐系统开发进度（第三阶段项目构思与任务规划）

    Scrum 3.1 多鱼点餐系统开发进度(第三阶段项目构思与任务规划) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到 ...

  10. Ubuntu13.04配置：Vim+Syntastic+Vundle+YouCompleteMe

    序言 使用Ubuntu和vim已经有一段时间了,对于Vim下的插件应用,我总是抱着一股狂热的态度.这次,又在网上闲逛着,发现了一个个人博客提到了Vim代码补全这回事,并提到了YouCompleteMe ...