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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>jquery图片无缝滚动js代码ul./li结构，可重用 - 懒人建站</title>

<meta name="keywords" content="jquery特效,JS代码,js特效代码大全,js特效广告代码,导航菜单代码" />

<meta name="description" content="懒人建站为您提供-JS代码，js特效代码大全，js特效广告代码，下拉菜单，下拉菜单代码，导航菜单代码和基于jquery的各种特效与jquery插件。" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script>

//滚动

(function($){

    $.fn.kxbdMarquee = function(options){

        var opts = $.extend({},$.fn.kxbdMarquee.defaults, options);

        return this.each(function(){

            var $marquee = $(this);//滚动元素容器

            var _scrollObj = $marquee.get(0);//滚动元素容器DOM

            var scrollW = $marquee.width();//滚动元素容器的宽度

            var scrollH = $marquee.height();//滚动元素容器的高度

            var $element = $marquee.children(); //滚动元素

            var $kids = $element.children();//滚动子元素

            var scrollSize=0;//滚动元素尺寸

            var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下

            //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度

            $element.css(_type?'width':'height',10000);

            //获取滚动元素的尺寸

            if (opts.isEqual) {

                scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;

            }else{

                $kids.each(function(){

                    scrollSize += $(this)[_type?'outerWidth':'outerHeight']();

                });

            }

            //滚动元素总尺寸小于容器尺寸，不滚动

            if (scrollSize<(_type?scrollW:scrollH)){scrollSize=scrollW*2;}

            //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度

            $element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);

            var numMoved = 0;

            function scrollFunc(){

                var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';

                if (opts.loop > 0) {

                    numMoved+=opts.scrollAmount;

                    if(numMoved>scrollSize*opts.loop){

                        _scrollObj[_dir] = 0;

                        return clearInterval(moveId);

                    }

                }

                if(opts.direction == 'left' || opts.direction == 'up'){

                    var newPos = _scrollObj[_dir] + opts.scrollAmount;

                    if(newPos>=scrollSize){

                        newPos -= scrollSize;

                    }

                    _scrollObj[_dir] = newPos;

                }else{

                    var newPos = _scrollObj[_dir] - opts.scrollAmount;

                    if(newPos<=0){

                        newPos += scrollSize;

                    }

                    _scrollObj[_dir] = newPos;

                }

            };

            //滚动开始

            var moveId = setInterval(scrollFunc, opts.scrollDelay);

            //鼠标划过停止滚动

            $marquee.hover(

                function(){

                    clearInterval(moveId);

                },

                function(){

                    clearInterval(moveId);

                    moveId = setInterval(scrollFunc, opts.scrollDelay);

                }

            );

            //控制加速运动

            if(opts.controlBtn){

                $.each(opts.controlBtn, function(i,val){

                    $(val).bind(opts.eventA,function(){

                        opts.direction = i;

                        opts.oldAmount = opts.scrollAmount;

                        opts.scrollAmount = opts.newAmount;

                    }).bind(opts.eventB,function(){

                        opts.scrollAmount = opts.oldAmount;

                    });

                });

            }

        });

    };

    $.fn.kxbdMarquee.defaults = {

        isEqual:true,//所有滚动的元素长宽是否相等,true,false

        loop: 0,//循环滚动次数，0时无限

        direction: 'left',//滚动方向，'left','right','up','down'

        scrollAmount:1,//步长

        scrollDelay:40,//时长

        newAmount:3,//加速滚动的步长

        eventA:'mousedown',//鼠标事件，加速

        eventB:'mouseup'//鼠标事件，原速

    };

    $.fn.kxbdMarquee.setDefaults = function(settings) {

        $.extend( $.fn.kxbdMarquee.defaults, settings );

    };

})(jQuery);

</script>

<style>

a{ font-size:13px; color:#333333; text-decoration:none;}

a:hover{color:red; text-decoration:underline;}

img{ border:none;}

.marquee {width:560px;height:260px;overflow:hidden;border:1px solid #333; margin-top:20px;}

.marquee li{ display:inline; float:left; margin-right:12px;}

.marquee li a{ width:230px; height:260px; display:block; float:left; text-align:center; font-size:14px;}

.marquee li a:hove{ text-decoration:none;}

.marquee li img {width:160px; height:160px;}

.marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;}

</style>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){

    $('.marquee').kxbdMarquee({

            direction:'left',

            eventA:'mouseenter',

            eventB:'mouseleave'

    });

});

</script> 

<div class="marquee">

    <ul>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

    </ul>

</div>

<div class="marquee">

    <ul>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a><em>google 404</em></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

    </ul>

</div>

<div class="marquee">

    <ul>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

        <li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>

    </ul>

</div> 

<p>jquery图片无缝滚动js代码ul./li结构，可重用。</p>

</body>

</html>

jQuery图片无缝滚动的更多相关文章

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

    <!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. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  5. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

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

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

  7. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  8. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. div+css+jQuery图片横向滚动代码（带左右点击按钮）

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

随机推荐

  1. class0513(html基础加强2）

    使用VS创建网页 新建Web项目(新建→ASP.Net Web应用程序),新建html页面(添加→新建项→Web→HTML页) 查看页面的方式: 切换到“设计”视图,可以在这里查看初步的预览效果,不是 ...

  2. uvalive 2797 Monster Trap

    题意:给定一些线段障碍,判断怪物能不能逃离到无穷远处. 思路:从(0,0)点能否到无穷远处.用BFS搜索.那满足什么样的点符合要求,能加入到图中呢? 遍历每个点,显然一开始已经在某些线段上的点要删去. ...

  3. C++默认参数不能是一个引用

    引用做参数时不能传一个定值(如数字或者const等~~~) somefunc(int& a = 4) -> default argument for ‘int& a’ has t ...

  4. 用Java实现一个通用并发对象池

    这篇文章里我们主要讨论下如何在Java里实现一个对象池.最近几年,Java虚拟机的性能在各方面都得到了极大的提升,因此对大多数对象而言,已经没有必要通过对象池来提高性能了.根本的原因是,创建一个新的对 ...

  5. 第十三章、学习 Shell Scripts 简单的 shell script 练习

    简单的 shell script 练习 简单范例 对谈式脚本:变量内容由使用者决定 [root@www scripts]# vi sh02.sh #!/bin/bash # Program: # Us ...

  6. 按要求编写Java程序： （1）编写一个接口：InterfaceA，只含有一个方法int method(int n)； （2）编写一个类：ClassA来实现接口InterfaceA，实现int method(int n)接口方 法时，要求计算1到n的和； （3）编写另一个类：ClassB来实现接口InterfaceA，实现int method(int n)接口 方法时，要求计算n的阶乘（n!）；

    package com.homework2; public class ClassA implements InterfaceA { @Override public int method(int n ...

  7. Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  8. 修改cas登陆页面-服务器端

    原文地址:http://www.cnblogs.com/liveandevil/archive/2013/03/06/2946341.html 1.cas统一认证的登陆页面位于:cas目录/WEB-I ...

  9. php empty()和isset()的区别<转载>

    在使用 php 编写页面程序时,我经常使用变量处理函数判断 php 页面尾部参数的某个变量值是否为空,开始的时候我习惯了使用 empty() 函数,却发现了一些问题,因此改用 isset() 函数,问 ...

  10. hadoop学习；block数据块；mapreduce实现样例；UnsupportedClassVersionError异常；关联项目源代码

    对于开源的东东,尤其是刚出来不久,我认为最好的学习方式就是能够看源代码和doc,測试它的样例 为了方便查看源代码,关联导入源代码的项目 先前的项目导入源代码是关联了源代码文件 block数据块,在配置 ...