通过改变背景色来达到效果，有下角标和左右箭头，都已经实现。

html部分：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>淡入淡出</title>

        <link rel="stylesheet" type="text/css" href="css/5---.css"/>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script type="text/javascript" src="js/5---.js"></script>

    </head>

    <body>

        <div id="box">

            <ul id="imgs">

                <li class="li1"></li>

                <li class="li2"></li>

                <li class="li3"></li>

            </ul>

            <ul id="list">

                <li></li>

                <li></li>

                <li></li>

            </ul>

            <a class="_left" href="#">左</a>

            <a class="_right" href="#">右</a>

        </div>

    </body>

</html>

jq代码：

var index = 0;

var timer;

$(function(){

    $('#list li').eq(0).css('background','gold')

    //点击页码换图

    $('#list li').click(function(){

        clearInterval(timer)

        index = $(this).index()

        $('#imgs li').eq(index).fadeIn().siblings().fadeOut()

        $(this).css('background','gold').siblings().css('background','')

        timer = setInterval(change,1000)

    })

    //鼠标滑过停止

    $('#imgs li').hover(

        function(){

            clearInterval(timer)

        },

        function(){

            timer = setInterval(change,1000)

        }

    )

    //左右切换

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

        clearInterval(timer)

        index -= 2;

        change();

        timer = setInterval(change,1000)

    })

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

        clearInterval(timer)

        change();

        timer = setInterval(change,1000)

    })

    timer = setInterval(change,1000)

})

function change(){

    if(index >= 3){

        index = 0;

    }

    if(index == -1){

        index = 2

    }

    $('#imgs li').eq(index).fadeIn().siblings().fadeOut()

    $('#list li').eq(index).css('background','gold').siblings().css('background','')

    index++;

}

思路千千种！

jQuery实现轮播图效果的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  3. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  4. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  5. jQuey实现轮播图效果

    再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...

  6. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  7. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

  8. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

随机推荐

  1. STM32 常用GPIO操作函数记录

    STM32读具体GPIOx的某一位是1还是0 /** * @brief Reads the specified input port pin. * @param GPIOx: where x can ...

  2. printf函数重定向

    printf函数底层会调用fputc函数 /*重定向c库函数printf到USART1*/ int fputc(int ch, FILE *f) { /*发送一个字节数据USART1 */ USART ...

  3. 建立ODBC数据源(基于windows）

    1. win+r 2. control 3. 打开数据源 4. 点击添加 5. 选择Oracle in OraClient11g_home1 ,点击完成 6. 填写,查看具体参数信息点击Help 7. ...

  4. poj - 3683 - Priest John's Busiest Day（2-SAT）

    题意:有N场婚礼,每场婚礼的开始时间为Si,结束时间为Ti,每场婚礼有个仪式,历时Di,这个仪式要么在Si时刻开始,要么在Ti-Di时刻开始,问能否安排每场婚礼举行仪式的时间,使主持人John能参加所 ...

  5. iPhone 微信平台链接到微信文章 返回上一页问题

    东钿金融服务平台 有个隐藏按钮,点击此按钮,会弹出一个九宫格的功能栏,其中有个‘工作时间‘,这项,它是链接到微信公众号里面的一篇文章,按照平常写法就是 直接把文章链接地址 赋在a的href上,但是iP ...

  6. ASP.NET读取配置文件发送邮件

    之前写过一篇文章C#使用SMTP发送邮件 后来做了改进,改成读取独立的配置文件,本文只记录读取配置文件的部分,发送部分见上面的链接. 读取配置文件C#代码: using System; using S ...

  7. JavaScript一些不常用的写法

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...

  8. C10K problem

    什么是C10K问题 1W个客户端连接上一个server,客户不定时的发送请求. I/O策略 软件架构 1.单线程解决多重I/O调用     不要使用阻塞/同步的调用,如果非要这么做,那就采用多进程或者 ...

  9. wchar_t 和 char 之间转换

    vc++2005以后,Visual studio 编译器默认的字符集为Unicode.VC中很多字符处理默认为宽字符wchar_t,如CString的getBuffer(),而一些具体操作函数的输入却 ...

  10. 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...