<!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. jQuery 中的 39 个技巧【申明：来源于网络】

    jQuery 中的 39 个技巧[申明:来源于网络] 地址:http://blog.csdn.net/zhongqi2513/article/details/53704812?ref=myread

  2. Docker命令详解（run篇）

    命令格式:docker run [OPTIONS] IMAGE [COMMAND] [ARG...] Usage: Run a command in a new container 中文意思为:通过r ...

  3. sql 范式:1NF、2NF、3NF、BCNF（函数依赖）

    第一范式(1NF) 每个属性都是不可分的基本数据项.(必须有主键,列不可分) eg:非第一范式的表:(列可再分) 学院名称 高级职称人数 教授 副教授 信电学院 3 34 管理学院 5 23 外语学院 ...

  4. VoiceXML简介

    简单来说,VoiceXML就是语音网络世界的HTML,一种用于语音应用的开放标准的标记语言.VoiceXML的问世使得为HTML发展起来的web体系也能够轻松地创建和使用语音应用. 发展历史: 199 ...

  5. [js]浏览器同源策略(same-origin policy)

    浏览器的同源策略 浏览器同源政策及其规避方法 什么是同源策略 A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源".所谓"同源"指的是" ...

  6. Python Pyinstaller打包含pandas库的py文件遇到的坑

    今天的主角依然是pyinstaller打包工具,为了让pyinstaller打包后exe文件不至过大,我们的py脚本文件引用库时尽可能只引用需要的部分,不要引用整个库,多使用“from *** imp ...

  7. 关于Mysql数据库的学习总结

    关于Mysql操作指令: 1.键盘win + R 弹出windows运行输入框,输入cmd命令,进入windows数据库;   2.在windows数据库里输入mysql(数据库) -uroot(用户 ...

  8. K-wolf Number (数位DP)

    题意:求区间内有多少个数满足条件:任意相邻的k个数位都不相等. 思路:老套路 #include<bits/stdc++.h> using namespace std; typedef lo ...

  9. Apriori

    基本概念 项与项集:设itemset={item1, item_2, …, item_m}是所有项的集合,其中,item_k(k=1,2,…,m)成为项.项的集合称为项集(itemset),包含k个项 ...

  10. python locust 性能测试：locust参数-保证并发测试数据唯一性，循环取数据

    from locust import TaskSet, task, HttpLocustimport queue class UserBehavior(TaskSet): @task def test ...