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

随机推荐

Newtonsoft.Json.dll使用
1:Newtonsoft.Json.dll 下载 http://json.codeplex.com/ 2:解析JSON字符窜方法1: using Newtonsoft.Json; using Sy ...
php数组使用小结
在PHP中,数组分为两类:索引数组和关联数组.二者可以单独使用,也可以混合使用. 1.一维数组一维数组的定义也很简单,常用的有如下两种方式: 1.1 直接赋值 1: <?php 3: $dwq ...
企业DC Windows运维监控规范及C辅助监控开发实战前奏;
春天来了,小草发芽了,花儿开了,你还在等什么? 人家都自驾游了,ruiy可还是徒步游的,并且还留着汗+油; 什么是生活,我的理解就是跟着gd生,跟着gd活,可是讲到这我又自恋了,人家开二会也没想起我来 ...
MVC4的bundling功能简介
Bundling and Minification是asp.net mvc4中一项可以减少用户请求等待时间,提升用户体验的一项技术.在VS2010中新建MVC4项目是,如果选择"基本&quo ...
射频识别技术漫谈(2)——国际标准【worldsing 笔记】
如果你只是智能卡的用户,通常可以不必关注国际标准,但作为智能卡的专业开发人员,则至少也要对相关标准有所了解.国际标准一般都是西方人制定的,原版都是英文的,而所谓中文版往往是对原版的直译,许多情况下并未 ...
弹出框JBox实例
前几天做的考试系统的一些后台弹出框的一些模板.主要是因为普通的弹出框样式不是很好,颜色也不能调换.这里我们用的是JBox,还是从师傅那得知的.自己小实验了下,这里就做个小结. JBox 插件说明 - ...
c++中类长度解析
通常我们定义一个类,它所占的空间有多大呢? 首先我们看一下下面的这个类 class A{ public: void func1(void){ printf("11111heihei\n&qu ...
iOS 键盘框架IQKeyboardManager使用
框架地址:https://github.com/hackiftekhar/IQKeyboardManager AppDelegate.m文件中 #import <IQKeyboardMana ...
对struts2的基本知识和环境的搭建（配图解）
Struts2的优点: Struts2是由webwork2发展过来的.属于无侵入式设计.而struts1是入侵是设置. Struts2跟servlet API没有紧密的联系. struts2提供了拦截 ...
【不积跬步，无以致千里】mysql 多行合并函数
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

jQuery图片无缝滚动

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

随机推荐

热门专题