<!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. PRINCE2认证与其他项目管理认证标准有何不同？

    国际项目管理协会 (IPMA)根据国际能力基线建立了一种国际公认的标准,并由其各国协会译成各国语言.这是IPMA四级证书的基础,现在已在全世界推广.可喜的是,PRINCE2与这个标准高度一致. 美国项 ...

  2. 构建微软智能云：介绍新的Azure业务转型创新技术

    在我和用户的交流中发现,在任何类型和规模的组织中,每当涉及到在云中实现商业价值的最大化并取得竞争优势的时候,就会明显呈现三个趋势.首先,应用程序促进着组织更快速实现价值.同时,诸如机器学习.数据预测分 ...

  3. java笔记--多线程基础

    多线程技术 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3889579.html  "谢谢-- 在java中实现多线程技术 ...

  4. Navicat for mysql 导出导入的问题

    问题现象   1:使用navicat 导出5.6.20版本数据库,然后导入到5.7.19mysql出现错误:  

  5. Storm 实现滑动窗口计数和TopN排序

    计算top N words的topology, 用于比如trending topics or trending images on Twitter. 实现了滑动窗口计数和TopN排序, 比较有意思,  ...

  6. Mysql学习---索引的学习 180101

    索引:约束 + 快速查找 索引是数据库中用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可. 问:为什么索引可以这么快?[类似 ...

  7. Mysql常用函数汇总-经典实用

    以下是对mysql中的常用函数进行了汇总介绍.需要的朋友可以过来参考下. 一.数学函数ABS(x) 返回x的绝对值BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制)CEILING(x ...

  8. 在oracle电子商务套件中输出信息

    一.用自定义用户HAND_SL登陆http://zd01.haasgz.hand-china.com:30000/ 添加可执行并发程序 执行文件名填写自己的包名称.入口函数/过程名 二.将可执行程序添 ...

  9. 如何查看SharePoint Server的版本信息

    可以通过查看注册表来得你当前运行的是SharePoint 2010的哪个版本,具体步骤如下: 1. 登录到安装了SharePoint Central Administration 的服务器. 2. 点 ...

  10. FLV视频封装格式详解

    FLV视频封装格式详解 分类: FFMpeg编解码 2012-04-04 21:13 1378人阅读 评论(2) 收藏 举报 flvheaderaudiovideocodecfile 目录(?)[-] ...