<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>

    <title>左右点击幻灯片</title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        ul{ list-style: none;}

       .wrapper{width: 300px;height: 200px; margin:100px auto;overflow: hidden;border: 2px solid #ccc;position: relative;}

        .scroll{width: 205px;margin: 0 auto; overflow: hidden;}

       .scroll li{float: left; margin: 5px; height:160px; font-size:60px; text-align:center; line-height:100px; font-weight:800; background:#FF3F00; color:#fff; width:200px;}

        .prev,.next{ width: 30px;height: 30px;background: #daa520;color: #fff;cursor: pointer;position: absolute;top:80px; text-align: center;line-height: 30px;}

        .next{ right: 0;}

    </style>

</head>

<script>

    $(function(){

        var oScroll=$('.scroll>ul'),oLi=oScroll.find('li'),oLen=oLi.length,oPrev=$('.prev'),oNext=$('.next'),oWidth=oLi.eq(0).outerWidth(true),iNow= 1,oCur=$('.count>em'),oCount=$('.count>i'),iTimer=null;

        oScroll.width(oWidth*oLen);

        oCount.html(oLen);

        function count(){

            oCur.html(iNow);

        }

        function Prev(){

            oScroll.css({marginLeft:-oWidth+'px'}).find('li:last').prependTo(oScroll);

            oScroll.stop(true,true).animate({marginLeft:0+'px'},600);

            iNow=iNow>1?iNow-1:oLen;

            count(iNow);

        }

        function Next(){

            oScroll.stop(true,true).animate({marginLeft:-oWidth+'px'},600,function(){

            oScroll.css({marginLeft:0}).find('li:first').appendTo(oScroll);

            })

            iNow=iNow<oLen?iNow+1:1;

            count(iNow);

        }

        oPrev.bind('click',Prev);

        oNext.bind('click',Next);

        iTimer=setInterval(Next,3000);

        $('.wrapper').hover(function(){

            clearInterval(iTimer);

        },function(){

            iTimer=setInterval(Next,3000);

        })

    })

</script>

<body>

<div class="wrapper">

    <span class="prev">《</span>

    <span class="next">》</span>

    <div class="scroll">

           <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

    <div class="count"><em>1</em>/<i>0</i></div>

</div>

</body>

</html>

jq左右按钮点击幻灯片的更多相关文章

  1. jq实现 按钮点击一次后 3秒后在可点击

    if(printRemind(selectPrintTemplate,selectOrders,orderStatus,isPreview)) //调用打印数据并打印 ajaxDataAndDoPri ...

  2. Runtime应用防止按钮连续点击 （转）

    好久之前就看到过使用Runtime解决按钮的连续点击的问题,一直觉得没啥好记录的.刚好今天旁边同时碰到这个问题,看他们好捉急而且好像很难处理,于是我先自己看看… 前面自己也学习了很多Runtime的东 ...

  3. android 自定义控件——（五）按钮点击变色

    ----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...

  4. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  5. 友盟(Swift)-集成、统计用户数量、具体页面访问数量、具体按钮点击数量

    什么是友盟.有什么用? 这些傻瓜问题这里就不解释了,可以自己百度去. 友盟提供的文档和demo都是oc的,这里用swift写了一个小demo,在此分享一下. 步骤1:友盟后台注册应用(iOS),拿到a ...

  6. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  7. React初识（按钮点击+输入绑定）

    简单按钮点击事件: <!DOCTYPE html><html>  <head>  <meta charset="utf-8">    ...

  8. android 按钮点击效果实现

    在其他人的博客里看到其实实现按钮点击效果的方法有很多,这里提到的只是其中一个办法 图片素材(我自己用截图截的,可以自己搞) 放到mipmap目录下(studio是在这个目录下 , eclipse 直接 ...

  9. 按钮点击事件，打开新的Activity

    按钮点击事件,打开新Activity, 打开网页 findViewById(R.id.btnStartBAty).setOnClickListener(new View.OnClickListener ...

随机推荐

  1. sql中的SET NOCOUNT ON/OFF

    当 SET NOCOUNT 为 ON 时,不返回计数(表示受Transact-SQL 语句影响的行数). 当 SET NOCOUNT 为 OFF 时,返回计数(默认为OFF). 即使当 SET NOC ...

  2. 点滴积累【C#】---验证码，ajax提交

    效果: 思路: 借用ashx文件创建四位验证,首先生成四位随机数字.然后创建画布,再将创建好的验证码存入session,然后前台进行button按钮将文本框中的值进行ajax请求到后台,和sessio ...

  3. Docker Python API 与 Docker Command

    span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span. ...

  4. Atitit. 注册表操作查询 修改 api与工具总结 java c# php js python 病毒木马的原理

    Atitit. 注册表操作查询 修改 api与工具总结 java c# php js python 病毒木马的原理 1. reg 工具 这个cli工具接口有,优先使用,jreg的要调用dll了,麻烦的 ...

  5. 735. Replace With Greatest From Right【medium】

    Given an array of integers, replace every element with the next greatest element (greatest element o ...

  6. PHP命名空间规则解析及高级功能

    日前发布的PHP .3中,最重要的一个新特性就是命名空间的加入.本文介绍了PHP命名空间的一些术语,其解析规则,以及一些高级功能的应用,希望能够帮助读者在项目中真正使用命名空间. 在这里中我们介绍了P ...

  7. 跟着百度学PHP[14]-PDO-优化驱动

    使用方法设置预定义变量 PDO的方法/属性 PDO::beginTransaction — Initiates a transaction PDO::commit — Commits a transa ...

  8. 下一个时代，对话即平台 —— 开始使用Bot Framework和Cognitive Service来打造你的智能对话服务

    在16年3月30号微软的全球开发者大会Build上发布了Bot Framework,微软认为下一个big thing是Conversation as a Platform,简称CaaP,中文应该叫做& ...

  9. R语言中将hello打印10次的两种方法

    我们有两种方法来做这件事情: 1.for结构 for循环重复的执行一个语句,直到某个变量的值不再包含在序列seq中为止. 语法: for (var in seq) statement 例如: > ...

  10. nodejs操作图片方法

    最近项目中用到nodejs做图片服务器,用户上传图片生成缩略图返回地址一系列操作. 原来一直用.net平台,所有都封装好了生成缩略图这种分分钟就解决了,遂度娘一番全是调用imagemagick和gra ...