<!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. MySQL两个表联合查询并按时间排序

    有一张资金记录表,一张金币记录表,想以时间为单位,降序合并排列他们之间的信息,查询SQL如下: select * from (select * from t_money_logs union sele ...

  2. 搭建高可用mongodb集群（三）—— 深入副本集内部机制

    在上一篇文章<搭建高可用mongodb集群(二)-- 副本集> 介绍了副本集的配置,这篇文章深入研究一下副本集的内部机制.还是带着副本集的问题来看吧! 副本集故障转移,主节点是如何选举的? ...

  3. 打印 1 到最大的 n 位数（C++ 和 Python 实现）

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数． ...

  4. 小程序UI

    从input组件说起 <input maxlength="10" placeholder="最大输入长度10" /> <div id=&quo ...

  5. HTML后续

    列表标签 <ul>.<ol>.<dl> 列表标签 无序列表 属性: type="属性值".属性值可以选: disc(实心原点,默认),squar ...

  6. 为exchange 2010 owa 添加验证码

    微软给了exchange owa页面加固的方案,如有需要,请查看. https://partnersupport.microsoft.com/zh-hans/par_servplat/forum/pa ...

  7. Hibernate学习---QBC_hibernate完整用法

    QBC(Query By Criteria) API提供了检索对象的另一种方式,它主要有Criteria接口.Criterion接口和Expresson类组成,它支持在运行时动态生成查询语句. Hib ...

  8. 点开无线显示"已连接 安全"，但是点击下面无线图标却显示"无法连接internet"，解决方案

    管理员权限运行“命令提示符” 输入:netsh winsock reset 然后重启电脑即可

  9. 沉淀再出发：关于netty的一些理解和使用

    沉淀再出发:关于netty的一些理解和使用 一.前言 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务 ...

  10. unittest：1 用例编写

    unittest是python自带的单元测试框架,包含测试用例case,测试集suite,测试集加载loader,测试执行runner,测试结果result等. 简单使用:写一个用例类继承自unitt ...