基本原理：将所有图片绝对定位在同一位置，透明度设为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. linux下备份mysql命令

    一,数据库的备份与导入 1),数据库的备份 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名例:mysqldump -u dbadmin -p myblog ...

  2. Google首席软件工程师Joshua Bloch谈如何设计一款优秀的API【附PPT】

    编者按]随着近来软件规模的日益庞大,API编程接口的设计变的越来越重要.良好的接口设计可以降低系统各部分之间的相互依赖,提高组成单元的内聚性,降低组成单元间的耦合度,从而提高系统的维护性和稳定性. J ...

  3. Qt的零碎知识

    1.QObject是所有Qt对象的基类,他给C++的类带来了若干新的功能.使用Q_OBJECT宏能声明一个C++类为一个QObject.如: class Notepad : public QMainW ...

  4. HTML5[3]:中文换行

    保证中文每行第一个字,不会出现标点符号 p { white-space: pre-wrap; }

  5. 解决rspec 生成报告时报utf-8错误的方法

    找到gems\1.9.1\gems\rspec-core-2.14.3\lib\rspec\core\formatters\snippet_extractor.rb文件中的第27行: 在这边记录一下, ...

  6. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  7. 找出链表中倒数第 k 个结点

    /* 题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表 的尾指针. 链表结点定义如下: struct node { int data; struct node * ...

  8. ruby -- 进阶学习（四）paperclip上传中文命名图片

         Paperclip -- 上传中文命名图片 使用Paperclip和ImageMagick插件来处理图片的时候,上传非中文命名的图片时,只要把配置写好就没问题 if you need to ...

  9. lettuce webdriver 自动化测试---玩转BDD

    行为驱动开发(BDD),依然高大上的矗立在远方,很少被人问津,一方面是BDD的思想不太容易理解,别一方面BDD的资料并不多.中文的资料就更少了. 之前增写过一篇<python BDD 框架之le ...

  10. extractCSS – 帮助你从 HTML 中快速分离出 CSS

    extractCSS 是一个免费的基于 Web 的应用程序,能够从 HTML 中提取风格相关的信息,包括 id.class 和内联样式,而且输出可以定制(缩进和括号的用法).该工具非常有用,当我们快速 ...