jQuery图片无缝滚动

<!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图片无缝滚动的更多相关文章

jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery图片无缝滚动代码左右上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS和jQuery分别实现图片无缝滚动效果
一.效果图二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
JavaScript----marquee滚动标签图片无缝滚动插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
JavaScript学习笔记5 之计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
div+css+jQuery图片横向滚动代码（带左右点击按钮）
首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

随机推荐

C语言断言
1.概述断言是对某种假设条件进行检查(可理解为若条件成立则无动作,否则应报告),它可以快速发现并定位软件问题,同时对系统错误进行自动报警.断言可以对在系统中隐藏很深,用其它手段极难发现的问题进行定位 ...
你知道C/S和B/S两种架构有什么区别吗？
C/S和B/S,是再普通不过的两种软件架构方式,都可以进行同样的业务处理,甚至也可以用相同的方式实现共同的逻辑.既然如此,为何还要区分彼此呢?那我们就来看看二者的区别和联系. 一.C/S 架构 ...
手机模拟器上安装与卸载apk
一.安装apk 将apk放到sdk安装目录下的platform-tools(不同版本的sdk也可能是tools) 1.adb kill-server2.adb start-server3.adb re ...
Petshop学习第一天
1.PetShop的体系架构: 2.分层设计的目的: 分散关注.松散耦合.逻辑复用.标准定义 3.一些不明白的地方: item和product是什么关系??? Model类库中的Linq To Sql ...
转载总结一些关于Google chart api的知识
<script type="text/javascript"> google.setOnLoadCallback(drawChartLine); f ...
Struts2中DMI(动态方法调用)的错误问题(There is no Action mapped for namespace [/xxx] and action name [xxx!yyy] a)
默认的Struts.xml中是这样的 <constant name="struts.enable.DynamicMethodInvocation" value="f ...
【Stage3D学习笔记续】真正的3D世界（五）：粒子特效
先看效果,按下空格键添加粒子特效: 一般而言粒子特效的实现都是比较复杂的,且不说实现粒子特效的编码和设计,光是编写一个粒子编辑器就不是简单的一件事,但是作者使用了很取巧的方式来完成,我们接下来深入代码 ...
Stage3D学习笔记（一）：3D术语简介
网格(Mesh) 3D中,所有可见的模型都被称作网格.网格是由3DMax等建模软件制作,定义了一个3D物体的形状.一个网格是由多个多边形组成的. 多边形(Polygon) 一个多边形是组成网格的一个最 ...
在idea中如何添加log日志
1.首先下载log4的jar包,官方路径为:http://www.apache.org/dyn/closer.cgi/logging/log4j/1.2.17/log4j-1.2.17.zip 2.下 ...
C#程序实现动态调用DLL的研究
摘要:在<csdn开发高手>2004年第03期中的<化功大法——将DLL嵌入EXE>一文,介绍了如何把一个动态链接库作为一个资源嵌入到可执行文件,在可执行文件运行时,自动从资 ...

jQuery图片无缝滚动

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

随机推荐

热门专题