<!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. Prometheus监控学习记录

    官方文档 Prometheus基础文档 从零开始:Prometheus 进阶之路:Prometheus —— 技巧篇 进阶之路:Prometheus —— 理解篇 prometheus的数据类型介绍 ...

  2. 目标检测（六）YOLOv2__YOLO9000: Better, Faster, Stronger

    项目链接 Abstract 在该论文中,作者首先介绍了对YOLOv1检测系统的各种改进措施.改进后得到的模型被称为YOLOv2,它使用了一种新颖的多尺度训练方法,使得模型可以在不同尺寸的输入上运行,并 ...

  3. ES6 对象

    对象字面量 属性的简洁表示法 ES6允许对象的属性直接写变量,这时候属性名是变量名,属性值是变量值. const age = 12; const name = "Amy"; con ...

  4. 深入浅出--UNIX多进程编程之fork()函数

    0前言 上周都在看都在学习unix环境高级编程的第八章--进程控制.也就是这一章中.让我理解了unix中一些进程的原理.以下我就主要依照进程中最重要的三个函数来进行解说.让大家通过阅读这一篇文章彻底明 ...

  5. 利用django-crontab设定定时任务

    Django中想要设定定时任务的方法有很多,如celery.apscheduler.crontab等等,本文用crontab来实现. 想用apscheduler实现请看本人另一篇博客:使用APSche ...

  6. 002-红黑树【B-树】、二叉查找树

    一.引述-二叉查找树 红黑树(Red Black Tree) 一种特殊的二叉查找树.故先查看二叉查找树 二叉查找树特性:左字数上所有的节点的值都小于或等于他的根节点上的值 右子树上所有节点的值均大于或 ...

  7. python基础(3)-pycharm安装&for循环&format字符串&list列表&set集合使用

    安装IDE(PyCharm)&破解 点击下载安装包,安装. 点击下载破解补丁. 进入pycharm安装bin目录,将破解补丁copy到当前目录. 在bin目录下找到pycharm.exe.vm ...

  8. 【Go语言】基本的语法

    昨天花了几个小时的时间把Go的语法过了一遍,发现Go语言的语法核心和大部分编程语言的规则还是挺相近的,差别的就是不同的书写规范.还有就是前天安装VScode编译器那个插件把人弄得恶心了,总是安装不成功 ...

  9. Python requests库如何下载一个图片资源

    原文地址https://blog.csdn.net/u011541946/article/details/77700074 前面一篇文章介绍了response对象的一些常用API,也已经提到,我们的重 ...

  10. .net core 配置

    .net core 配置包括很多种 例如内存变量.命令行参数.环境变量以及物理文件配置和自定义配置 物理文件配置主要有三种,它们分别是JSON.XML和INI,对应的配置源类型分别是JsonConfi ...