<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            ul li {

                list-style: none;

            }

            #main {

                width: 760px;

                height: 300px;

                position: relative;

                margin: 50px auto;

                overflow: hidden;

            }

            #main .pic {

                width: 760px;

                height: 300px;

                overflow: hidden;

            }

            #main .pic ul li {

                width: 760px;

                height: 300px;

                position: relative;

            }

            #main .pic ul li .img1 {

                position: absolute;

                top: 0;

                left: -760px;

            }

            #main .pic ul li .img2 {

                position: absolute;

                top: 0;

                left: -20px;

                display: none;

            }

            #main .nav {

                position: absolute;

                right: 20px;

                bottom: 20px;

            }

            #main .nav ul li {

                width: 10px;

                height: 10px;

                border: 1px solid #fff;

                float: left;

                margin-left: 5px;

            }

            #main .nav ul li.select{

                background: #fff;

            }

            #main span{

                display: block;

                position: absolute;

                height: 50px;

                width: 30px;

                color: #fff;

                background: #000;

                opacity: 0.3;

                font-size: 24px;

                line-height: 50px;

                text-align: center;

                cursor: pointer;

            }

            .left{

                left: -30px;

                top: 50%;

                margin-top: -25px;

            }

            .right{

                right: -30px;

                top: 50%;

                margin-top: -25px;

            }

        </style>

    </head>

    <body>

        <div id="main">

            <div class="pic">

                <ul>

                    <li style="background: url(img/bg1.jpg);">

                        <img class="img1" src="img/text1.png"/>

                        <img class="img2" src="img/con1.png"/>

                    </li>

                    <li style="background: url(img/bg2.jpg);">

                        <img class="img1" src="img/text2.png"/>

                        <img class="img2" src="img/con2.png"/>

                    </li>

                    <li style="background: url(img/bg3.jpg);">

                        <img class="img1" src="img/text3.png"/>

                        <img class="img2" src="img/con3.png"/>

                    </li>

                    <li style="background: url(img/bg4.jpg);">

                        <img class="img1" src="img/text4.png"/>

                        <img class="img2" src="img/con4.png"/>

                    </li>

                    <li style="background: url(img/bg5.jpg);">

                        <img class="img1" src="img/text5.png"/>

                        <img class="img2" src="img/con5.png"/>

                    </li>

                </ul>

            </div>

            <div class="nav">

                <ul>

                    <li class="select"></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

            </div>

            <span class="left">〈</span>

            <span class="right">〉</span>

        </div>

        <div style="width: 100px; height: 100px; background: red; display: none;"></div>

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

        <script>

            $(function(){

                //初始第一张显示

                $(".pic li").eq(0).find(".img1").stop().animate({"left":"0"},1000)

                .next().show().stop().animate({"left":"0"},1000);

                var count = 0;

                //定义动画

                var move = function(){

                    count++;

                    if(count==$(".pic li").length){

                        count = 0;

                    }

                    donghua();

                }

                var donghua = function(){

                    $(".pic li").eq(count).fadeIn().find(".img1").stop()

                    .animate({"left":0},1000).next().show().stop()

                    .animate({"left":0},1000).parent().siblings().fadeOut()

                    .find(".img1").stop().css({"left":"-760px"}).next()

                    .hide().stop().css({"left":"-20px"});

                    $(".nav li").eq(count).addClass("select").siblings()

                    .removeClass("select");

                }

                //定时器自动轮播

                var timer = setInterval(function(){

                    move();

                },2000)

                //点击相应的角标

                $(".nav li").click(function(){

                    var index = $(this).index();

                    count = index;

                    $(this).addClass("select").siblings().removeClass("select");

                    $(".pic li").eq(index).fadeIn().find(".img1").stop()

                    .animate({"left":0},1000).next().show().stop()

                    .animate({"left":0},1000).parent().siblings().fadeOut()

                    .find(".img1").stop().css({"left":"-760px"}).next()

                    .hide().stop().css({"left":"-20px"});

                })

                //鼠标移入，清除定时器，左右按钮显示，移除开启定时器，左右按钮隐藏

                $("#main").hover(

                    function(){

                        clearInterval(timer);

                        $(".left").stop().animate({"left":0},500);

                        $(".right").stop().animate({"right":0},500);

                    },

                    function(){

                        timer = setInterval(function(){

                            move();

                        },2000)

                        $(".left").stop().animate({"left":"-30px"},500);

                        $(".right").stop().animate({"right":"-30px"},500);

                    }

                )

                //点击右侧按钮

                $(".right").click(function(){

                    count++;

                    if(count == $(".pic li").length){

                        count = 0;

                    }

                    donghua();

                })

                //点击左侧按钮

                $(".left").click(function(){

                    count--;

                    if(count<0){

                        count = $(".pic li").length;

                    }

                    donghua();

                })

            })

        </script>

    </body>

</html>

一个背景图，两个动画图片，写的不好，但是效果能实现；本人认为写效果一定先要布局好，不然的话效果实现起来可能会复杂；如果布局一目了然，效果实现起来思路就会清晰很多。

附上使用的一组图片

bj1.jpg;

con1.png;

text1.png

记录一下自己用jQuery写的轮播图的更多相关文章

  1. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  5. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  7. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  8. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  9. 用 JS 写 （轮播图 / 选项卡 / 滑动门）

    页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...

随机推荐

  1. Oralce 序列

    序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. l  自动提供唯一的数值 l  共享对象 l  主要用于提供主键值 l  将序列值装入内存可以提高访问效率 创建序列: 1.  要有创建 ...

  2. Linux常用基本指令——文件处理命令

    书籍方面的推荐就不做介绍,免得别人说我有广告嫌疑.大家可以直接上百度,书籍和视频遍地都是,Linux这些方面的知识都是自己在学习视频和看书的总结,内容上可能会不完美.如果有更多的见解,欢迎直接评论. ...

  3. VS2013 添加 ILDasm

    1.找到ILDasm.exe文件: 打开C:\Program Files\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5.1 Tools 2.vs外部工具添加 工 ...

  4. linux邮件客户端mutt日志文件，发不出邮件

    linux上面使用很方便的收发邮件客户端(即MUA),还有一个是mail,大家也可以试试. 在网上找了很多,都说需要msmtp配合使用,其实mutt里面也内建了smtp支持的. mutt and SM ...

  5. Python学习---Django误删除sql表后，如何创建数据

    误删除sql表后,怎么创建数据? 仅仅适合单表,多表因为涉及约束, python mangage.py makemigrations  --> 生成migrations目录和根数据库对应的sql ...

  6. C# 方法与参数 常见命名空间汇总 using的使用 main方法参数

    本文主要讲 C# 常见命名空间 using static 指令 && 调用静态方法 嵌套命名空间&&作用域 别名 Main() 方法 C# 常见命名空间 命名空间 作用 ...

  7. Microsoft Windows XP SP3 官方原版镜像下载，绝对原版加系列号！

    转:http://blog.sina.com.cn/s/blog_638c2e010100op5z.html 写在前面:1. VOL是Volume Licensing for Organization ...

  8. Linux命令--用户管理

    useradd命令 Linux useradd命令用于建立用户帐号. useradd可用来建立用户帐号.帐号建好之后,再用passwd设定帐号的密码．而可用userdel删除帐号.使用useradd指 ...

  9. [Assignment] C++2

    作业要求:PAT1025 翻转链表 代码在这里

  10. Angular2 *ngFor把数据显示在多个input中出错解决方法

    点击添加按钮会自动添加一个空的input组 html <div class="form-inline"> <label class="form-cont ...