<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            padding: ;

            margin: ;

            list-style: none;

            border: ;

        }

        .all {

            width: 500px;

            height: 200px;

            padding: 7px;

            border: 1px solid #ccc;

            margin: 100px auto;

            position: relative;

        }

        .screen {

            width: 500px;

            height: 200px;

            overflow: hidden;

            position: relative;

        }

        .screen li {

            width: 500px;

            height: 200px;

            overflow: hidden;

            float: left;

        }

        .screen ul {

            position: absolute;

            left: ;

            top: 0px;

            width: 3000px;

        }

        .all ol {

            position: absolute;

            right: 10px;

            bottom: 10px;

            line-height: 20px;

            text-align: center;

        }

        .all ol li {

            float: left;

            width: 20px;

            height: 20px;

            background: #fff;

            border: 1px solid #ccc;

            margin-left: 10px;

            cursor: pointer;

        }

        .all ol li.current {

            background: yellow;

        }

        #arr {

            display: none;

        }

        #arr span {

            width: 40px;

            height: 40px;

            position: absolute;

            left: 5px;

            top: %;

            margin-top: -20px;

            background: #;

            cursor: pointer;

            line-height: 40px;

            text-align: center;

            font-weight: bold;

            font-family: '黑体';

            font-size: 30px;

            color: #fff;

            opacity: 0.3;

            border: 1px solid #fff;

        }

        #arr #right {

            right: 5px;

            left: auto;

        }

    </style>

</head>

<body>

<div class="all" id='box'>

    <div class="screen">

        <ul>

            <li><img src="data:images/1.jpg" width="" height=""/></li>

            <li><img src="data:images/2.jpg" width="" height=""/></li>

            <li><img src="data:images/3.jpg" width="" height=""/></li>

            <li><img src="data:images/4.jpg" width="" height=""/></li>

            <li><img src="data:images/5.jpg" width="" height=""/></li>

        </ul>

        <ol>

            <li class="current"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ol>

    </div>

    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>

</div>

<script src="jquery-1.12.2.js"></script>

<script>

    $(function(){

         var n=;

         var $li=$(".screen ul li"); //声明变量减少服务器的请求次数

         var $ul=$(".screen ul");

         var $oli=$(".screen ol li");

         var $arr=$("#arr");

         var imgWidth=$li.width();

         // var timer=null;

         //克隆第一个图片

         var oLi=$li.eq().clone(true);

         //把克隆的图片加到ul后面

         $ul.append(oLi);

         var size=$li.size(); //获取li的个数

         // console.log(size);

         //滑过数字小图标大图跟着动

         $oli.mouseenter(function(){

            n=$(this).index();

            tab();

         })

         //点击右箭头移动轮播图

         $("#box #arr #right").click(function(){

            toRight();

         })

         //点击左箭头移动轮播图

         $("#box #arr #left").click(function(){

            toLeft();

         })

         //指到盒子上左右箭头出现  离开隐藏

         $("#box").hover(function(){

            $arr.css("display","block");

            clearInterval(timer);

         },function(){

            $arr.css("display","none");

            autoPlay();

         })

         //自动轮播

         autoPlay();

         function autoPlay(){

            timer=setInterval(function(){

                toRight();

            },)

         }

         //封装左箭头

         function toLeft(){

            n--;

            if(n<){

                $ul.css("left",-size*imgWidth+"px");

                n=size-;

            }

            tab();

         };

         //封装右箭头

         function toRight(){

            n++;

            if(n>size){

                n=;

                $ul.css("left",);

            }

            if(n==size){

                $oli.eq().addClass("current").siblings().removeClass("current");

            }

            tab();

         }

         //封装移动动画

         function tab(){

            $ul.stop().animate({left:-imgWidth*n+"px"},);

            $oli.eq(n).addClass("current").siblings().removeClass("current");

         }

    })

</script>

</body>

</html>

特效 左右滑动轮播图jQuery思路的更多相关文章

  1. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  2. 最最最简单的轮播图(JQuery)

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 轮播图jQuery

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

  4. 纯 CSS 实现滑动轮播图效果

    只使用css实现轮播图简单的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. 【html】【12】特效篇--轮播图

    必看参考: http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 代码: <!DOCTYPE html> <h ...

  6. jquery一个比较好的轮播图jQuery.kinMaxShow介绍

    kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...

  7. 纯CSS手动滑动轮播图（隐藏滚动条）

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  8. 轮播图(jQuery)

    效果图: -----------------------------------------html------------------------------------------------- ...

  9. 用jQuery实现优酷首页轮播图

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

随机推荐

  1. 洛谷P3376 【模板】网络最大流

    题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行 ...

  2. HTTP Get Post究竟有哪些区别

    get在浏览器回退时是无害的,而post会再次提交请求. get产生的url地址可以被bookmark,而post不可以. get请求会被浏览器主动cache,而post不会,除非手动设置. get请 ...

  3. iptables 分析(1)

    原文:http://blog.chinaunix.net/uid-24207747-id-2622900.html iptables 是用户空间中用于管理包过滤及NAT 等的工具应用程序.它设置防火墙 ...

  4. C# 如何使用长度来切分字符串

    参考网址:https://blog.csdn.net/yenange/article/details/39637211 using System; using System.Collections.G ...

  5. 快速构建一个使用axios的vue应用程序（转）

    英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...

  6. Oracle 数据库逻辑结构.md

    一.存储关系Oracle 数据库逻辑上是由一个或多个表空间组成的,表空间物理上是由一个或多个数据文件组成的:而在逻辑上表空间又是由一个或多个段组成的.在Oracle 数据库中,通过为每种不同的数据对象 ...

  7. webstorm 配置 开发微信小程序

    默认情况下,webstorm是不支持wxml和wxss的文件类型,不会有语法高亮 设置高亮 除了高亮,还需要代码提示, 所幸已经有前辈整理了小程序的代码片段,只需要导入其安装包即可使用,包文件路径如下 ...

  8. git bash支持中文

    打开Git Bash窗口-->右键-->Options-->text Locale:设置为zh_CN Charachter set:设置为UTF-8 保存,重新打开Git Bash, ...

  9. 7.mongo python 库 pymongo的安装

    1.Python 中如果想要和 MongoDB 进行交互就需要借助于 PyMongo 库,在CMD中使用命令即可[注意此处是pip3,pip无法安装]: pip3 install pymongo 2. ...

  10. 一文理解 Java NIO 核心组件

    同步.异步.阻塞.非阻塞 首先,这几个概念非常容易搞混淆,但NIO中又有涉及,所以总结一下[1]. 同步:API调用返回时调用者就知道操作的结果如何了(实际读取/写入了多少字节). 异步:相对于同步, ...