基本原理：将所有图片绝对定位在同一位置，透明度设为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. mysql 显示行号，以及分组排序

    建表: CREATE TABLE `my_tb` ( `id` ) NOT NULL AUTO_INCREMENT, `parent_code` ) DEFAULT NULL, `code` ) DE ...

  2. 十一、EnterpriseFrameWork框架的分层与系统业务的结合

    上章详细讲了EnterpriseFrameWork框架中的每个分层,这都是从技术层面来说明,也就是我们知道怎么来建一个控制器或一个业务对象,但开发过程中应该建一个什么样的控制器或业务对象了?本章的主要 ...

  3. ISO给UIImageView增加点击事件

    自己做了一个九宫格,里面的图标都是由多张图片重叠构成,然后包装成一个button来使用: 遇到的问题是如何给这个“button”增加点击事件? 解决思路1:网友提示在该“button”上增加一个真正的 ...

  4. 【Java】深入理解ThreadLocal

    一.前言 要理解ThreadLocal,首先必须理解线程安全.线程可以看做是一个具有一定独立功能的处理过程,它是比进程更细度的单位.当程序以单线程运行的时候,我们不需要考虑线程安全.然而当一个进程中包 ...

  5. 有了Hadoop MapReduce, 为什么还要Spark?

    a. 由于MapReduce的shuffle过程需写磁盘,比较影响性能:而Spark利用RDD技术,计算在内存中进行. b. MapReduce计算框架(API)比较局限, 而Spark则是具备灵活性 ...

  6. Windows上使用clang编译

    - 先自己从源代码 (http://llvm.org/releases/) 编译llvm和clang,或者直接安装clang for Windows - 测试过使用cygwin (https://cy ...

  7. tar exclue文件夹

    tar zcvf logs.tar.gz logs --exclude=logs/log1

  8. 使用Html5+C#+微信 开发移动端游戏详细教程 :（五）游戏图像的加载与操作

    当我们进入游戏时,是不可能看到所有的图像的,很多图像都是随着游戏功能的打开而出现, 比如只有我打开了"宝石"菜单才会显示宝石的图像,如果是需要显示的时候才加载, 会对用户体验大打折 ...

  9. .NET 产品版权保护方案 (.NET源码加密保护) （转载）

    说 明:你希望自己用.net辛辛苦苦做出来的软件被人轻易破解吗?你希望自己花了大量人力物力用.net开发出来的产品被竞争对手轻易获取核心代码吗?这是 一篇比较详尽地介绍如何保护自己的.net源代码的文 ...

  10. 轻量级.NET ORM、高性能.NET ORM 之 SqlSugar 开源ORM - ASP.NET

    3.0最新API: http://www.cnblogs.com/sunkaixuan/p/5911334.html 1.前言/Preface SqlSugar从去年到现在已经一年了,版本从1.0升到 ...