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重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

随机推荐

Open-Drain V.S. Push-Pull
作者:crifan (http://bbs.chinaunix.net)邮箱:green-waste@163.com [Open-Drain与Push-Pull]GPIO的功能,简单说就是可以根据自己 ...
Leetcode OJ : Compare Version Numbers Python solution
Total Accepted: 12400 Total Submissions: 83230 Compare two version numbers version1 and version2 ...
Python PIL创建文字图片
PIL库中包含了很多模块,恰当地利用这些模块可以做许多图像处理方面的工作. 下面是我用来生成字母或字符串测试图片而写的类及测试代码. 主要用到的模块: PIL.Image,PIL.ImageDraw, ...
uva 12296 Pieces and Discs
题意: 有个矩形,左下角(0,0),左上角(L,W). 思路: 除了圆盘之外,本题的输入也是个PSLG,因此可以按照前面叙述的算法求出各个区域:只需把线段视为直线,用切割凸多边形的方法 :每次读入线段 ...
【转载】strlen与sizeof区别
自己小结: sizeof使用时,若是数组变量,则是数组变量占的大小 char a[10]; sizeof(a)=10 若是指针,则为指针大小,数组变量作为函数参数传递时,会退化成指针,且函数内是不知道 ...
[iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)
A.概述在"[iOS基础控件 - 4.4] APP列表进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能 1.按钮点击后,显示为“已下载”,并且不 ...
win10中android studio中的terminal不能输入
1 打开CMD窗口右击 2 3 重启电脑,你试试就知道了.
cocos2d-x 精灵遮罩
转自:http://bbs.9ria.com/thread-220210-1-4.html 首先得理解一些东西. 1.理解颜色混合.精灵有个成员函数:setBlendFunc(),这个函数以一个ccB ...
Delphi静态加载DLL和动态加载DLL示例
下面以Delphi调用触摸屏动态库xtkutility.dll为例子,说明如何静态加载DLL和动态加载DLL. 直接上代码. 1.静态加载示例 unit Unit1; interface uses W ...
offsetTop和scrollTop的差别
近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...

jQuery图片无缝滚动

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

随机推荐

热门专题