JQuery无缝滚动

$(function(){   $("ul li:lt(5)").clone().appendTo("ul");   var $width = $("ul li:lt(5)").width() * 4;   var currIndex = 0;   $("#next").click(function(){      if(currIndex == 2){         currIndex = 0;         $("ul").css("left",0);      }      currIndex++;      $("ul").stop().animate({left:$width * currIndex * -1},500);   });   $("#prev").click(function(){      if(currIndex == 0){         currIndex = 2;         $("ul").css("left",2 * $width * -1);      }      currIndex--;      $("ul").stop().animate({left:$width * currIndex * -1},500);   });   $("ul>li").hover(function(){      $(this).children().eq(1).stop().animate({top:0},400);   },function(){      $(this).children().eq(1).stop().animate({top:240},400);   });});
时间: 2024-10-12 08:03:34

JQuery无缝滚动的相关文章

jquery 无缝滚动 jquery.kxbdmarquee

DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ DOM 结构<div id="element_id">     <ul>         <li></li>     </ul> </div>  CSS 样式/*   * 父容器需要设置溢出隐藏  * 如果是水平滚动,项

jQuery无缝滚动插件

插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults = { derection: "top", interval: 50 }; // 合并后的参数设置 var options = $.extend(defaults, options); var $mar = $(this), original = $mar.children().first

liMarquee – jQuery无缝滚动插件

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>jQuery无缝滚动插件liMarquee演示-向上滚动_dowebok</title><link rel="stylesheet" href="css/liMarquee.css"><style>

jquery无缝滚动效果实现

demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="description" content="" /> <meta name="keywords" content=&quo

jQuery无缝滚动轮播图

//html部分<div class="lunbo right"> <div class="show"> <a href="#"><img src="images/cbda425ea72ec5013b8388ae982e9a52.jpg" alt=""/></a> <a href="#"><img src=&q

jquery图片无缝滚动特效

jquery图片无缝滚动插件制作左右无缝滚动图片和上下无缝滚动图片,一款简单的jQuery无缝滚动代码.JS代码 <script type="text/javascript"> //图片滚动 调用方法 imgscroll({speed: 30,amount: 1,dir: "up"}); $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir:

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-

JQuery中Table标签页和无缝滚动

HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/tab1.css" /> <script src="js/jquery.js"></script> &

自己写了一个无缝滚动的插件(jQuery)

效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img src="img/f1.jpg" alt="f1"/></li> 4 <li><img src="img/f2.jpg" alt="f2"/></li> 5 <li&g