基本原理：将所有图片绝对定位在同一位置，透明度设为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. ios面试技术要点

    iOS面试 技术总结点(可参考):多线程 运行时 runloop app框架 几种动画编程 jsonmodel原理 sdwebimage原理 masonry怎么应用及原理 应用框架有哪些 说一下Fac ...

  2. iBatis.Net（C#）系列Demo源码

    iBatis.Net(C#)系列一:简介及运行环境源码  [下载] iBatis.Net(C#)系列二:SQL数据映射源码 [下载] iBatis.Net(C#)系列三:数据库查询源码  [下载]

  3. 近期Windows 10 RedStone 2 Insider版本安装进度停留在百分之23、24解决方案

    近期安装Windows 10 RedStone 2的14965.14971会出现停留在23%或者24%的现象,解决办法是拔掉扩展的SD卡再重新安装.

  4. ExtJs Column 显示文字内容过长 使用Tootip显示全部内容

    { text: 'Column Header Blah', dataIndex: 'blah', renderer: function(value, metaData, record, rowIdx, ...

  5. (转) IPv6相关RFC

    转自http://blog.csdn.net/lucien_cc/article/details/12688477 IPv6 Spec RFC 2460 : Internet Protocol, Ve ...

  6. (转)linux内核虚拟文件系统浅析

    转自http://hi.baidu.com/_kouu/item/4e9db87580328244ef1e53d0 ###### 虚拟文件系统(VFS)在我看来, "虚拟"二字主要 ...

  7. NPM使用详解（下）

    NPM使用详解(下) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...

  8. Mac常用基本命令/常用Git命令

    Git地址: https://github.com/mancongiOS/command-line基本命令 目录/文件的操作 mkdir "目录名" 在当前路径下创建一个文件夹 m ...

  9. [python]新手写爬虫v2.5（使用代理的异步爬虫）

    开始 开篇:爬代理ip v2.0(未完待续),实现了获取代理ips,并把这些代理持久化(存在本地).同时使用的是tornado的HTTPClient的库爬取内容. 中篇:开篇主要是获取代理ip:中篇打 ...

  10. node-gyp rebuild 卡住?

    最近 npm install 时候经常遇到在 node-gyp rebuild 那里卡很久的情况(大于十分钟),于是研究了一下输出的错误日志解决了这个问题,在这里分享一下. 首先,请检查 node-g ...