<!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. 个人小爱好：Operating System:three easy pieces---第6章第4节_担心并发问题？

    担心并发问题? 微妙,上下文切换大约6微妙.而,现在的系统有着级数级别的提升,在2-3GHz的处理起中消耗只有亚微妙级. 但应该注意到,不是所有的系统性能都跟着CPU性能的提升而提升,根据Ouster ...

  2. ZOJ 4070 - Function and Function - [签到题][2018 ACM-ICPC Asia Qingdao Regional Problem M]

    题目链接:http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5840 Time Limit: 1 Second Mem ...

  3. Linux-003-Resource temporarily unavailable

    Jenkins构建任务向服务器发送war包时提示信息如下所示: 由上述信息可知通过SSH命令连接失败.通过Client连接服务器,提示信息如下: 提示信息说明资源暂时不可用. 原因一般是因为用户或应用 ...

  4. https证书随记

    下载证书之后: 1:域名跳转操作 <system.webServer>         <rewrite>             <rules>          ...

  5. SharePoint开启错误提示

    1,打开80下面的Web.config文件2,CallStack="true" 和 <customErrors mode="Off" /> < ...

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

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

  7. PHP多维数组转一维

    目录 1. array_column函数 2. array_walk函数 3. array_map函数 4. foreach循环 5. array_map变种 参考:https://www.awaim ...

  8. 【Java】NO.120.JDK.1.JDK8.1.001-【Java8实战】

    Style:Mac Series:Java Since:2018-09-26 End:2018-09-26 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  9. repo常用命令及常见问题汇总

    1.执行repo命令的时候,总是显示“project xx no found” 解决: (1)先执行“repo forall -c pwd” 显示所有project的路径,按照这个来写project参 ...

  10. 56.关于vue项目的seo问题

    不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...