<!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>

 <script src="http://code.jquery.com/jquery-2.2.3.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)) return;

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

             $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:10,//时长

         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="demo/01.jpg"/><em>jquery 特效</em></a></li>

         <li><a href="#"><img src="demo/02.jpg"/><em>滚动</em></a></li>

         <li><a href="#"><img src="demo/01.jpg"/><em>导航</em></a></li>

         <li><a href="#"><img src="demo/02.jpg"/><em>大全</em></a></li>

     </ul>

 </div>

 </body>

 </html>

jQuery图片无缝滚动JS代码ul/li结构的更多相关文章

  1. jQuery图片无缝滚动

    <!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. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  5. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. 竖向折叠二级导航JS代码（可防刷新ul/li结构）

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

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

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

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

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

随机推荐

  1. Objective-C语言介绍 、 Objc与C语言 、 面向对象编程 、 类和对象 、 属性和方法 、 属性和实例变量

    1 第一个OC控制台程序 1.1 问题 Xcode是苹果公司向开发人员提供的集成开发环境(非开源),用于开发Mac OS X,iOS的应用程序.其运行于苹果公司的Mac操作系统下. 本案例要求使用集成 ...

  2. IE下背景图片 不显示问题

    转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情 ...

  3. dede默认的表

    1.搜索关键词 表: dede_search_keywords 2.栏目关键 词描述 表 dede_arctype

  4. Eclipse 安装 CDT

    最近准备开始重新学C++,先从IDE开始准备起 Ubuntu下安装非常简单: 打开Eclipse: help -> Install new software ->  http://down ...

  5. Sprint第二个冲刺（第七天）

    一.Sprint 计划会议: 现在简单的说下今天的会议情况:组员们除了完善之前做的功能,还打算实现把轮播图迁移到一个fragment中,方便管理.现在也准备着手实现商家上传商品的图片这个功能,虽说现在 ...

  6. ZOJ 1205 Martian Addition

    原题链接 题目大意:大数,20进制的加法计算. 解法:convert函数把字符串转换成数组,add函数把两个大数相加. 参考代码: #include<stdio.h> #include&l ...

  7. iframe session过期跳转到登陆页面

    在login.jsp中添加js: if(window !=top){ top.location.href=location.href; } <script type="text/jav ...

  8. hilbert矩阵 分类： 数学 2015-07-31 23:03 2人阅读 评论(0) 收藏

    希尔伯特矩阵 希尔伯特矩阵是一种数学变换矩阵 Hilbert matrix,矩阵的一种,其元素A(i,j)=1/(i+j-1),i,j分别为其行标和列标. 即: [1,1/2,1/3,--,1/n] ...

  9. 排序算法总结（一）插入排序【Insertion Sort】

    最近在忙着找工作,以前看的排序算法都忘记了,悲剧啦T  T现在来回顾一下吧. 这边推荐一个算法可视化的网站,非常有用.http://visualgo.net/ 一.插入排序的思想(Wikipedia) ...

  10. C++@重载函数

    关于重载详细分析参考: http://www.cnblogs.com/skynet/archive/2010/09/05/1818636.html 内部机制涉及重载函数如何解决命名冲突,调用匹配的问题 ...