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

随机推荐

I2c串行总线组成及其工作原理
采用串行总线技术可以使系统的硬件设计大大简化,系统的体积减小,可靠性提高,同时系统更容易更改和扩充常用的串行扩展总线有:I2c总线,单总线,SPI总线,以及microwire.Plus等等 I2c总 ...
SQL Server: Difference Between Locking, Blocking and Dead Locking
Like ever, today’s article of Pinal Dave was interesting and informative. After, our mutual discussi ...
关于win10安装VisualSVN遇到的一个问题及解决办法
问题:在win10系统中安装VisaulSVN遇到问题,错误提示:There is problem with this Windows Installer package. A DLL require ...
[Objective-c 基础 - 1.2] OC的基本类
#import <Foundation/Foundation.h> typedef enum {GenderMan, GenderFemale} Gender; typedef enum ...
RocketMQ入门（3）拉取消息
转自:http://www.changeself.net/archives/rocketmq入门(3)拉取消息.html RocketMQ入门(3)拉取消息 RocketMQ不止可以直接推送消息,在消 ...
利用接口做参数，写个计算器，能完成+-*/运算（1）定义一个接口Compute含有一个方法int computer(int n,int m); （2）设计四个类分别实现此接口，完成+-*/运算（3）设计一个类UseCompute，含有方法： public void useCom(Compute com, int one, int two) 此方法要求能够：1．用传递过来的对象调用compute
package com.homework5; public interface Compute { //声明抽象方法 int computer(int n,int m); } package com. ...
OC/Swift第三方添加出错解决方法
(未经同意,不得转载!) ------------------------华丽分割线-----------------------
LVS+DR源码安装
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
cocos2d-x 网格动画深入分析
转自:http://www.2cto.com/kf/201212/179828.html 在TestCpp中的EffectsTest示例中展示了一些屏幕特效,它是将屏幕划分为多个格子,并对这些格子进行 ...
UIView中触摸事件touchBegin
UIView触摸事件touchBegin 等一系列方法 1)手指按下 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; ...

jQuery图片无缝滚动

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

随机推荐

热门专题