<!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. 【转】PHP如何快速读取大文件

    在PHP中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents之类的函数,简简单单的几行代码就能 很漂亮的完成我们所需要的功能.但当所操作的文件是一个比较大的 ...

  2. ShareSDK分享和SMS的使用

    使用的是第三方的Mob来实现分享和发送短信的Demo 如图是项目的结构,结合了分享,发送短信,读取短信内容的功能 代码地址:https://github.com/1825492258/MobShare ...

  3. ZABBIX 2.1.0 发布，分布式系统监控

    ZABBIX 2.1.0 发布了,这相当是 ZABBIX 2.2 的首个 Alpha 版本,包括了新的主要的功能和改进. 主要包括如下几个方面的提升: 性能提升 可加载模块 移除对未知事件的支持 应用 ...

  4. 毕向东_Java基础视频教程第19天_IO流（01~05）

    第19天-01-IO流(BufferedWriter) 字符流的缓冲区 缓冲区的出现提高了对数据的读写效率. 对应类缓冲区要结合流才可以使用. BufferedWriter BufferedReade ...

  5. SqlServer 批量添加记录

    declare @i int ) begin INSERT INTO [dbo].[Settlements] ([ID] ,[Count] ,[SettlementDate]) VALUES ( ne ...

  6. Java常见错误列表

    Java常见错误列表: 找不到符号(symbol) 类X是public的,应该被声明在名为X.java的文件中 缺失类.接口或枚举类型 缺失X 缺失标识符 非法的表达式开头 类型不兼容 非法的方法声明 ...

  7. Qt Mysql驱动编译过程

    1.首先当然是要有VS2008+Qt4.7的开发环境. 2.安装MySQL,最好是4以后的版本,安装MySQL时要勾住“C Include Files 和 Lib Files”选项,这样才能装上MyS ...

  8. JavaScript --- Map集合结构详解

    Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 itera ...

  9. 对Java中的异常的理解

    1.What is exception in Java? Java使用异常描述程序中可能出现的不正常情况.这个不正常可以是java认为的不正常,也可以是你主观上的出乎意料(自定义异常).总而言之,异常 ...

  10. 【LGP5108】仰望半月的夜空

    题目 我还会写\(SA\)和 \(ST\)表真是令人感动 发现这是一个思博题 我们开一个指针,标记一下当前合法的字典序最小的后缀排名在哪里,刚开始自然是\(1\) 我们发现这个后缀不能为我们提供\(i ...