<!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. xshell连接虚拟机Connection failed

    一.问题描述:xshell连接不了虚拟机,出现错误提示:Could not connect to '192.168.1.100' (port 22): Connection failed. 二.查找错 ...

  2. 利用dotnet restore 导入本地 .nupkg 包

    dotnet restore 主要是用于部署.net core 项目中所需的依赖库,集成了nuget包管理软件.因此,dotnet restore 实际上就是根据project.json(今后可能为p ...

  3. Anjular中的路由配置以及服务等模块的一些基本操作

    1.路由的配置: 在Angular.js中,我们可以根据自己的需求来配置路由,以达到当url中的地址改变时,会跳转不同的页面 <script> //一开始的url:"http:/ ...

  4. 利用Java反射实现JavaBean对象相同属性复制并初始化目标对象为空的属性的BeanUtils

    有时遇到将数据传输对象转换成JSON串会将属性值为空的属性去掉,利用Java反射实现JavaBean对象数据传输对象的相同属性复制并初始化数据传输对象属性为空的属性,然后转换成JSON串 packag ...

  5. 为什么java中只允许继承一个类？

      一个类只能继承一个其他的类 在Java语言中禁止多重继承:一个类可以具有多个直接父类.多重继承不合法的原因是容易引发意义不明确.例如,有一个类C,如果允许它同时继承A类与B类(class C ex ...

  6. 安装系统+数据库+Sharepoint全套教程 （摘抄自https://www.cnblogs.com/jianyus/p/5482075.html）

    前言 SharePoint 2016如约而至,之前也装过预览版,但是这次是正式版,还是分享一个完整的安装过程给大家,希望能给有需要的人有所帮助. 1.首先安装操作系统,我这里是Windows Serv ...

  7. 使用FontAwesome

    使用FontAwesome https://github.com/PrideChung/FontAwesomeKit 为什么要使用FontAwesome呢,其实,它的字体就是矢量图,无论是放大还是缩小 ...

  8. 模拟代理安装---User-Agent Switcher for Chrome安装

    模拟代理安装: 1. 百度User-Agent Switcher for Chrome进行下载 2. 直接安装 1. 进入扩展程序界面 2. 拖动插件进行安装 3.安装成功后会显示一个插件标志,里面可 ...

  9. 使用ESP8266连接到Azure

    很多同学在问我,ESP8266如何连接到Azure,因为官方只有Spark Fun之类的DevKit(开发套件)出了教程(我只找到了套件的文档). 先上视频:http://v.youku.com/v_ ...

  10. Android Proguard使用技巧

    1.混淆后解码 ProGuard运行结束后,输出以下文件: dump.txt :描述.apk文件中所有类文件间的内部结构 mapping.txt:列出了原始的类,方法和字段名与混淆后代码间的映射.这个 ...