<!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. Android开发网【申明：来源于网络】

    Android开发网[申明:来源于网络] 地址:http://www.jizhuomi.com/android/video/

  2. python----下载与安装

    在 Windows 上安装 Python 在 Windows 上安装 Python 请按如下步骤进行. 首先,登录 https://www.python.org/downloads/ 页面,可以在该页 ...

  3. ES6 迭代器

    Iterator Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念: 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.itera ...

  4. spring声明式事务管理方式( 基于tx和aop名字空间的xml配置+@Transactional注解)

    1. 声明式事务管理分类 声明式事务管理也有两种常用的方式, 一种是基于tx和aop名字空间的xml配置文件,另一种就是基于@Transactional注解. 显然基于注解的方式更简单易用,更清爽. ...

  5. pandas 拆分groupby 应用某个函数apply 和聚合结果aggregate

    https://www.jianshu.com/p/2d49cb87626b df.groupby('A').size()

  6. [JavaScript] Frequently used method or solutions for issues

    Get the file name from the file path Solution: var fileName = fullPath.replace(/^.*[\\\/]/, ''); // ...

  7. window中普通用户无法登录远程桌面

    解决方案就是将该用户加到 Remote Desktop Users 这个用户组中. 使用命令 net localgroup "Remote Desktop Users" 用户名 / ...

  8. IP2——IP地址和子网划分学习笔记之《子网掩码详解》

    2018-05-04 16:21:21   在学习掌握了前面的<进制计数><IP地址详解>这两部分知识后,要学习子网划分,首先就要必须知道子网掩码,只有掌握了子网掩码这部分内容 ...

  9. Unity之获取资源包的路径

    先从缓存中获取,如果获取不到,则从包中获取. 如下: public static string GetAssetBundlePath(string path) { // 先尝试从 persist 目录 ...

  10. Docker 基础 (二)

    网络管理 容器网络模式 Docker支持5种网络模式 bridge 默认网络,Docker启动后默认创建一个docker0网桥,默认创建的容器也是添加到这个网桥中 host  容器不会获得一个独立的n ...