首先感谢Blue老师的javascript教程，给了我很多的启发，这是我在看完10 - 定时器的使用 - 2这节视频后，自己试着用jQuery重新改写了一下代码，感觉至少比百度搜出来的那一坨靠谱多了，上代码：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src = "jquery_v1.7.2.js"></script>

    <script type="text/javascript">

$(document).ready(function (){

/*=============

Author:Gino

Blog:http://www.cnblogs.com/ginowang42

Thanks：@Blue--http://www.zhinengshe.com/video.html#1

Name:jQuery插件图片左右无缝滚动

Arguments:

    @leftBtn:向左滚动按钮DOM引用

    @rightBtn:向右滚动按钮DOM引用

    @speed：滚动速度（每次滚动像素数）

CSS keyed Attribute:

    #noSeamScroll{position:relative;overflow:hidden;}

    #noSeamScroll ul{position:absolute;}

    #noSeamScroll ul li {float:left;}

===============*/

    $.fn.extend({noSeamScroll:function (leftBtn,rightBtn,speed){

        var timeFlag = speed = speed || 4;;

        var timer = null;

        var _this = this;//把this重新保存在一个私有变量里面，以防止setInterval误把this指向了window

        this.oUl = $("ul",this);

        this.oUl.html(this.oUl.html() + this.oUl.html());//把li复制一份

        this.oLis = $("ul li",this);//之后再变量保存li的全部节点

        this.oUl.width(this.oLis.eq(0).outerWidth(true)*this.oLis.length + "px");

        var fnMove = function (){

            $("ul",_this).css("left",function (){

                if ($(this).position().left > 0){//这里的this指的是$("ul",element)

                    return -$(this).outerWidth(true)/2 + "px";

                }

                if ($(this).position().left < -$(this).outerWidth(true)/2 ){

                    return "0px";

                }

                return $(this).position().left  + timeFlag + "px";

            })

        }

        timer = setInterval(fnMove,30);

        this.mouseover(function () {clearInterval(timer);});

        this.mouseout(function () {timer = setInterval(fnMove,30)});

        leftBtn.click(function (){

            clearInterval(timer);

            timeFlag = -speed;

            timer = setInterval(fnMove,30);

        })

        rightBtn.click(function (){

            clearInterval(timer);

            timeFlag = speed;

            timer = setInterval(fnMove,30);

        })

    }

    });

    //test

    $("#noSeamScroll").noSeamScroll($("#leftArr"),$("#rightArr"),2);

})

    </script>

    <style type="text/css">

    *{margin:0;padding:0;}

    #noSeamScroll{width:752px;height:108px;margin:20px auto;position:relative;overflow:hidden;}

    #noSeamScroll ul{position:absolute;list-style:none;}

    #noSeamScroll ul li {float:left;width:178px;height:108px;margin-right:10px;}

    </style>

</head>

<body>

<a href="javascript:;" id="leftArr">向左移动</a>

<a href="javascript:;" id="rightArr">向右移动</a>

    <div id = "noSeamScroll">

        <ul>

            <li><img src="data:images/1.jpg" alt="" /></li>

            <li><img src="data:images/2.jpg" alt="" /></li>

            <li><img src="data:images/3.jpg" alt="" /></li>

            <li><img src="data:images/4.jpg" alt="" /></li>

        </ul>

    </div>

</body>

</html>

div+css+jQuery图片横向滚动代码（带左右点击按钮）的更多相关文章

  1. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  5. flash滑杆控制图片横向滚动

    flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html

  6. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  7. jQuery 1.9 Ajax代码带注释

    /* -----------ajax模块开始 -----------*/ var // Document location ajaxLocParts, ajaxLocation, ajax_nonce ...

  8. 用DIV+Css+Jquery 实现的旧版微信飞机大战。

    用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...

  9. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

随机推荐

  1. [ActionScript 3.0] AS3.0 水面波纹效果

    import flash.geom.Point; import flash.display.BitmapData; import flash.filters.DisplacementMapFilter ...

  2. char 汉字

    Unicode/UCS总结: UCS和Unicode使用最大32bit来表示字符(它的范围很大,但不一定全使用,常使的是UCS-2),它用2~4个字节的空间描述了已知的接近全部的字符(并且仍在更新,还 ...

  3. Java错误：很奇怪的错误。。。

    刚刚调试java web中出现了一个很奇怪的现象,前端有一个页面通过ajax调用后台的servlet,当我把后台的servlet代码修改后(将返回值由a修改为b),前端页面仍然获取的是a.调试跟踪se ...

  4. ELK stack elasticsearch/logstash/kibana 关系和介绍

    ELK stack elasticsearch 后续简称ES logstack 简称LS kibana 简称K 日志分析利器 elasticsearch 是索引集群系统 logstash 是日志归集集 ...

  5. Enterprise Library 5.0 系列教程

    1. Microsoft Enterprise Library 5.0 系列教程(一) Caching Application Block (初级) 2. Microsoft Enterprise L ...

  6. What is the Database Initialization Parameter That is Associated to an ORA-32004 Error ?

    APPLIES TO: Oracle Database - Enterprise Edition - Version 9.2.0.1 to 11.2.0.3 [Release 9.2 to 11.2] ...

  7. Tile-Based Deferred Rendering

    目前所有的移动设备都使用的是 Tile-Based Deferred Rendering(TBDR) 的渲染架构.TBDR 的基本流程是这样的,当提交渲染命令的时候,GPU 不会立刻进行渲染,而是一帧 ...

  8. Laxcus大数据管理系统2.0（2）- 第一章 基础概述 1.1 基于现状的一些思考

    第一章 基础概述 1.1 基于现状的一些思考 在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...

  9. c# 图片路径转byte[] 插到数据库BLOB 图片长宽自定义

    //根据图片路径读取图片并且转byte[]   类型 FileStream fs = new FileStream(filePath, FileMode.Open); byte[] byData = ...

  10. Avl树的基本操作（c语言实现）

    #include<stdio.h> #include<stdlib.h> typedef struct AvlNode *Position; typedef struct Av ...