基本原理：将所有图片绝对定位在同一位置，透明度设为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. 网络安装archlinux（2012.8.20）笔记

    周末闲极无聊,把烂笔记本翻出来想装个Archlinux,发现USB不能启动,光驱也挂了,只好网络安装. 我先后试了两种安装方式,一种纯互联网启动,安装,一种局域网启动,再互联网安装.分别说说. 不管哪 ...

  3. 将main方法打成jar包，并引用第三方的maven jar包

    一.准备工作.执行命令 学习插件: 学习apache的打包插件maven-assembly-plugin:http://maven.apache.org/plugins/maven-assembly- ...

  4. 【解析 . PPT版】干货：阿里全息大数据构建与应用（包括：互联网金融、互联网+、精准营销...）

    作者:毛波,阿里巴巴资深数据专家,阿里数据管理平台(DMP)产品负责人. 摘要: 回顾传统数据仓库.商业智能到大型分布式数据平台的进化历程,深入阐述阿里的数据发展历史和数据观,以阿里DMP平台为例深入 ...

  5. 【转载】Linux之gdb

    转载自:http://blog.chinaunix.net/uid-22312037-id-3812061.html 一.常规调试         gdb是Linux下常用的程序调试工具,当然前提是用 ...

  6. 通过组策略实现IE自动以当前域账号登录某站点

    SharePoint基于windows验证的如何通过组策略实现IE自动以当前域账号登录某站点 1. 在运行中运行MMC,启动“组策略对象编辑器”. 如下图: 2.找到组策略,如下图: 3.找到对应的域 ...

  7. JS阻止鼠标滚动

    var scrollFunc=function(e){ e=e || window.event; if (e.stopPropagation) e.stopPropagation(); else e. ...

  8. Kafka集群部署

    一. 关于kafka Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键 ...

  9. php动态获取函数参数

    PHP 在用户自定义函数中支持可变数量的参数列表.其实很简单,只需使用 func_num_args() , func_get_arg() ,和 func_get_args()  函数即可. 可变参数并 ...

  10. C语言中的经典例题用javascript怎么解？（一）

    C语言中的经典例题用javascript怎么解?(一) 一.1+2+3+……+100=?        <script type="text/javascript">  ...