<!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. tensorflow 之模型的保存与加载(一)

    怎样让通过训练的神经网络模型得以复用? 本文先介绍简单的模型保存与加载的方法,后续文章再慢慢深入解读. #!/usr/bin/env python3 #-*- coding:utf-8 -*- ### ...

  2. superobject 序列数据集

    unit uDBJson; interface {$HINTS OFF} uses SysUtils, Classes, Variants, DB, DBClient, SuperObject; ty ...

  3. linux学习笔记6--命令mv

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. mv命令用来对文件或目录重新命名,或者将文 ...

  4. jqgrid删除多行数据,删不全的解决方案

    功能实现: 删除选中的多条数据 bug: 总是删不干净,比如选中5条执行删除操作,后台全删掉了,可是前台仍然有剩余的几条,再次刷新会不见 错误代码: var ids = $("#grid-t ...

  5. 在Linux下搭建git服务器

    http://www.cnblogs.com/dee0912/p/5815267.html 步骤很详细,很受用

  6. Oracle 错误 maximum number of processes(150) exceeded 解决办法

    网上很多同行应该都遇到过这个问题,百度一搜 千篇一律的处理办法,就是加大进程数. 但是我这边情况不一样,因为我的Oracle 11g是早上刚装的,跟本没人用,我用PLSQL链接照样说不能链接. 我就在 ...

  7. Model Binding is not working. MVC3 视图模型绑定不成功

    问题出现在POST方法中,当我要将数据提交到后台的时候,绑定的变量值为null 原因是视图中的名称跟Controller中的视图的名称不一致造成的. 假如你视图中的Model采用的是Html.Labe ...

  8. 排查PHP-FPM占用CPU过高

    发现 如何发现的呢?当然是使用top命令,发现系统的load average>3,这说明系统已经处于比较高的负载中. 尝试解决 当我把php-fpm重启后,没过一会儿又开始cpu狂飙!这是什么鬼 ...

  9. Java实现验证码的制作

    验证码概述 为什么使用验证码? 验证码(CAPTCHA)是一种全自动程序.主要是为了区分“进行操作的是不是人”.如果没有验证码机制,将会导致以下的问题: 对特定网站不断进行登录,破解密码: 对某个网站 ...

  10. 嵌入式驱动开发之dsp fpga通信接口---spi串行外围接口、emif sram接口

    -----------------------------------------author:pkf ------------------------------------------------ ...