ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > IT职业 > IT图书 > jQuery jflow无缝滚动代码及实例

jQuery jflow无缝滚动代码及实例

翻译 IT图书 作者：chunzhisu 时间：2014-07-28 11:17:00 0 删除 编辑
  • jquery jflow无缝滚动代码及实例，无缝滚动原理其实就是当滚动到最后一张的时候，让第一个排到最后一张的后边，其实也就是下一张的位置，代码还有优化的空间，高手有意可继续完善代码。

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3. <head>
  4. <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
  5. <title>jFlow Plus v2</title>
  6. <style>
  7. #sliderContainer { width: 940px; height: 300px; position: relative; border-top: 5px solid #999; border-bottom: 5px solid #999; margin: 0 auto; }
  8. .slideContent { background:url(\"/jscss/demoimg/201303/contentBg.png\") repeat scroll 0 0 transparent; position: absolute; bottom:0px; right:0px; padding: 10px; width: 920px; }
  9. .slide h3 { font: 26px/1em \'Rokkitt\', serif; color: #FFF; margin: 0 0 5px 0; }
  10. .slide p { font-size: 14px; color: #FFF; margin: 0; }
  11. .jFlowSlideContainer { overflow: hidden; }
  12. .jFlowSlideContainer a { color: #F90; text-decoration: none; font-style: italic; }
  13. .jFlowSlideContainer a:hover { text-decoration: none; }
  14. .jFlowSlideContainer a:focus { position: relative; top: 1px; }
  15. .jFlowNext { background:url(\"/jscss/demoimg/201303/arrows.png\") no-repeat scroll 0 -35px transparent; height:130px; position:absolute; top:75px; right: -50px; width:50px; cursor:pointer; }
  16. .jFlowPrev { background:url(\"/jscss/demoimg/201303/arrows.png\") no-repeat scroll -84px -35px transparent; height:130px; position:absolute; top:75px; left: -50px; width:50px; cursor:pointer; }
  17. .jFlowPrev:hover { background-position: -84px -235px; }
  18. .jFlowNext:hover { background-position: 0px -235px; }
  19. #myController {position: absolute; top: 5px; right: 5px; }
  20. .jFlowControl { background:url(\"/jscss/demoimg/201303/bullet.png\") no-repeat scroll 0px 0px transparent; float: left; width: 15px; height: 15px;}
  21. .jFlowControl:hover { background-position: -32px 0px; cursor: pointer; }
  22. .jFlowSelected, .jFlowSelected:hover {background-position: -15px 0px; }
  23. </style>
  24. <script type=\"text/javascript\" src=\"/ajaxjs/jquery-1.7.2.min.js\"></script>
  25. <script type=\"text/javascript\">
  26. (function ($) {
  27.     $.fn.jFlow = function (options) {
  28.         var opts = $.extend({}, $.fn.jFlow.defaults, options);
  29.         var randNum = Math.floor(Math.random() * 11);
  30.         var jFC = opts.controller;
  31.         var jFS = opts.slideWrapper;
  32.         var jSel = opts.selectedWrapper;
  33.         var cur = 0;
  34.         var timer;
  35.         var maxi = $(jFC).length;
  36.         var width = $(opts.slides).children().outerWidth();
  37.         var slidesNum = $(opts.slides).children().size();
  38.         var totalWidth = width * slidesNum;
  39.         var lastSlide = (slidesNum - 1);
  40.         var additionalSlide = slidesNum + 1;
  41.         var pause = opts.pause;
  42.         var slide = function (dur, i) {
  43.                 $(opts.slides).children().css({
  44.                     overflow: \"hidden\"
  45.                 });
  46.                 $(opts.slides + \" iframe\").hide().addClass(\"temp_hide\");            
  47.                 if (opts.effect == \"rewind\") {
  48.                     $(opts.slides).animate({
  49.                         marginLeft: \"-\" + (i * $(opts.slides).find(\":first-child\").width() + \"px\")
  50.                     }, opts.duration * (dur), opts.easing, function () {
  51.                         $(opts.slides).children().css({
  52.                             overflow: \"hidden\"
  53.                         });
  54.                         $(\".temp_hide\").show();
  55.                     });
  56.                 }
  57.                 else if (opts.effect == \"flow\") {
  58.                     if (i != 0) {
  59.                         $(\"#mySlides\").animate({
  60.                             left: -(i * width)
  61.                         }, function () {
  62.                             //if we are on the last slide then move the first slide into position
  63.                             if ((slidesNum - 1) == i) {
  64.                                 $(\".jFlowSlideContainer\").first().css({
  65.                                     left: (width * slidesNum)
  66.                                 });
  67.                             }
  68.                         });
  69.                         
  70.                         //fire off the paging function
  71.                         movePagingClass();
  72.                         
  73.                     }
  74.                     else {
  75.                     
  76.                         //animate the first slide container into position
  77.                         $(\".jFlowSlideContainer\").first().animate({
  78.                             //left slide distance is equal to width of slide times number of slides        
  79.                             left: (width * slidesNum)
  80.                        });
  81.                         $(opts.slides).css({
  82.                             // width is equal to the outer width of the container plus width one slide
  83.                             width: (width * additionalSlide)
  84.                          
  85.                         });
  86.                         $(opts.slides).animate({
  87.                             left: \"-\"+totalWidth
  88.                         },
  89.                         function () {
  90.                             //position the slide container element back to start
  91.                             $(this).css(\'left\', \'0px\');
  92.                             //position the first slide back to start
  93.                             $(\".jFlowSlideContainer\").first().css(\'left\', \'0px\');
  94.                      });
  95.                         $(\'.jFlowSelected\').removeClass(\'jFlowSelected\');
  96.                         $(jFC).first().addClass(\'jFlowSelected\');
  97.                     }
  98.                 }
  99.             }
  100.         var movePagingClass = function() {
  101.                 //advance the \'selected\' pagination class
  102.                 var thisController = $(\'.jFlowSelected\');
  103.                 $(thisController).removeClass(\'jFlowSelected\');
  104.                 $(thisController).next().addClass(\'jFlowSelected\');        
  105.         }
  106.         $(this).find(jFC).each(function (i) {
  107.             $(jFC).first().click(function() {
  108.                 $(\'.jFlowSlideContainer\').first().css({
  109.                     left: \'0px\'
  110.                 });
  111.                 $(\'#mySlides\').animate({
  112.                     left: \'0px\'
  113.                 });
  114.                  $(jFC).removeClass(jSel);
  115.                  $(this).addClass(jSel);
  116.             });
  117.             $(this).click(function () {
  118.                 dotimer();
  119.                 if ($(opts.slides).is(\":not(:animated)\")) {
  120.                     //slide to the page clicked
  121.                     var dur = Math.abs(cur - i);
  122.                     slide(dur, i);
  123.                     cur = i;
  124.                     $(jFC).removeClass(jSel);
  125.                     $(this).addClass(jSel);
  126.                 }
  127.             });
  128.         });        

  130.         $(opts.slides).before(\'
    + jFS.substring(1, jFS.length) + \'\">
    \'    ).appendTo(jFS);
  131.         $(opts.slides).find(\".slide\").each(function () {
  132.             $(this).before(\'
    \'    ).appendTo($(this).prev());
  133.         });
  134.         $(jFC).eq(cur).addClass(jSel);
  135.         var resize = function (x) {
  136.                 $(jFS).css({
  137.                     position: \"relative\",
  138.                     width: opts.width,
  139.                     height: opts.height,
  140.                     overflow: \"hidden\"
  141.                 });
  142.                 $(opts.slides).css({
  143.                     position: \"relative\",
  144.                     width: $(jFS).width() * $(jFC).length + \"px\",
  145.                     height: $(jFS).height() + \"px\",
  146.                     overflow: \"hidden\"
  147.                 });
  148.                 $(opts.slides).children().css({
  149.                     position: \"relative\",
  150.                     width: $(jFS).width() + \"px\",
  151.                     height: $(jFS).height() + \"px\",
  152.                     \"float\": \"left\",
  153.                     overflow: \"hidden\"
  154.                 });
  155.                 $(opts.slides).css({
  156.                     marginLeft: \"-\" + (cur * $(opts.slides).find(\":eq(0)\").width() + \"px\")
  157.                 });
  158.             }
  159.             resize();
  160.         $(window).resize(function () {
  161.             resize();
  162.         });
  163.         $(opts.prev).click(function () {
  164.             dotimer();
  165.             doprev();
  166.         });
  167.         $(opts.next).click(function () {
  168.             dotimer();
  169.             donext();
  170.         });
  171.         var doprev = function (x) {
  172.                 if (opts.effect == \'rewind\') {
  173.                     if ($(opts.slides).is(\":not(:animated)\")) {
  174.                         var dur = 1;
  175.                         if (cur > 0) {
  176.                             cur--;
  177.                         } else {
  178.                             cur = maxi - 1;
  179.                             dur = cur;
  180.                         }
  181.                         $(jFC).removeClass(jSel);
  182.                         slide(dur, cur);
  183.                         $(jFC).eq(cur).addClass(jSel);
  184.                     }
  185.                 }
  186.                 else if (opts.effect == \'flow\') {
  187.                     if(cur == 0) {
  188.                      $(opts.slides).css({
  189.                             width: (width * additionalSlide)
  190.                         });
  191.                                         
  192.                         $(\'.jFlowSlideContainer:last\').css({
  193.                             position: \"absolute\",
  194.                             left: \"-\"+width+\"px\"
  195.                         });
  196.                         $(\'#mySlides\').animate({
  197.                             paddingLeft: width+\"px\"
  198.                         });
  199.                         $(\'.jFlowSlideContainer:last\').animate({
  200.                             left: \"0px\"
  201.                         }, function () {
  202.                             $(this).css({
  203.                                 position: \"relative\",
  204.                                 left: \"\"
  205.                             });
  206.                             $(\'#mySlides\').css({
  207.                                 padding: \"0px\",
  208.                                 left: \"-\"+(totalWidth - width)+\"px\"
  209.                             });
  210.                         
  211.                         });
  212.                          cur = slidesNum - 1;
  213.                         $(\'.jFlowSelected\').removeClass(\'jFlowSelected\');
  214.                         $(jFC).last().addClass(\'jFlowSelected\');
  215.                         
  216.                     } //else slide as normal
  217.                     else {
  218.                         if($(opts.slides).find(\":first-child\").css({ left: totalWidth })) {
  219.                             $(opts.slides).find(\":first-child\").css(\'left\',\'0px\');
  220.                         }
  221.                         $(\'#mySlides\').animate({
  222.                             left: -(width * (cur - 1))
  223.                         }, {
  224.                             queue: false
  225.                         });
  226.                         cur = cur - 1;
  227.                         var thisController = $(\'.jFlowSelected\');
  228.                         $(thisController).removeClass(\'jFlowSelected\');
  229.                         $(thisController).prev().addClass(\'jFlowSelected\');    
  230.                     }
  231.                 } else {
  232.                     alert(\'Error: No effect entered as option!\');
  233.                 }
  234.             }
  235.         var donext = function (x) {
  236.             if(cur == lastSlide) {
  237.                     $(\".jFlowSlideContainer\").first().css({
  238.                         \"left\": totalWidth+\"px\"
  239.                         });
  240.                 }
  241.              if (opts.effect == \'rewind\') {
  242.                     if ($(opts.slides).is(\":not(:animated)\")) {
  243.                         var dur = 1;
  244.                         if (cur < maxi - 1) cur++;
  245.                         else {
  246.                             cur = 0;
  247.                             dur = maxi - 1;
  248.                         }
  249.                         $(jFC).removeClass(jSel);
  250.                         //$(jFS).fadeOut(\"fast\");
  251.                         slide(dur, cur);
  252.                         //$(jFS).fadeIn(\"fast\");
  253.                         $(jFC).eq(cur).addClass(jSel);
  254.                     }
  255.                 }
  256.                 else if (opts.effect == \'flow\') {
  257.                     //check to see which slide we are on and set \"cur\" variable
  258.                     if ($(opts.slides).is(\":not(:animated)\")) {
  259.                         var dur = 1;
  260.                         if (cur < maxi - 1) cur++;
  261.                         else {
  262.                             cur = 0;
  263.                             dur = maxi - 1;
  264.                         }
  265.                     }
  266.                     slide(dur, cur);
  267.                 } //end: \"flow\'
  268.                 $(\"#della\").html(cur);
  269.             } //end: donext function
  270.             
  271.         //the jFlow Timer
  272.         var dotimer = function (x) {
  273.                 if ((opts.auto) == true) {
  274.                     if (timer != null) clearInterval(timer);
  275.                     timer = setInterval(function () {
  276.                         $(opts.next).click();
  277.                     }, pause);
  278.                 }
  279.             }
  280.             dotimer();
  281.         $(opts.slides).hover(
  282.         function () {
  283.             clearInterval(timer);
  284.         }, function () {
  285.             dotimer();
  286.         });
  287.     };
  288.     $.fn.jFlow.defaults = {
  289.         controller: \".jFlowControl\",
  290.         slideWrapper: \"#jFlowSlider\",
  291.         slides: \"#mySlides\",
  292.         selectedWrapper: \"jFlowSelected\",
  293.         effect: \"flow\",
  294.         width: \"800px\",
  295.         height: \"350px\",
  296.         duration: 400,
  297.         pause: 5000,
  298.         prev: \".jFlowPrev\",
  299.         next: \".jFlowNext\",
  300.         auto: true
  301.     };
  302. })(jQuery);




  307. ">
  308.   
    ">
  309.     
    ">
  310.       
    " class=\"slide\"> /jscss/demoimg/201303/jflow-sample-slide1.jpg\" alt=\"Slide 1 jFlow Plus\" />
  311.         
    ">
  312.           

    You Asked, jFlow Delivered


  313.           

    It\'s all about the Community and giving back. To keep with this tradition, jFlow Plus now has more of the features you want.


  314.         

  •       

  •       
    " class=\"slide\"> /jscss/demoimg/201303/jflow-sample-slide2.jpg\" alt=\"Slide 2 jFlow Plus\" />
  •         
    ">
  •           

    W3C Valid


  •           

    Are you a stickler for writing valid code? So is jFlow. Run this puppy through W3C\'s validator to see it pass the test!


  •         

  •       

  •       
    " class=\"slide\"> /jscss/demoimg/201303/jflow-sample-slide3.jpg\" alt=\"Slide 3 jFlow Plus\" />
  •         
    ">
  •           

    Frequent Code Updates


  •           

    This slider is actively developed and used by thousands of websites. More features coming soon including more effects and options.


  •         

  •       

  •       
    " class=\"slide\"> /jscss/demoimg/201303/jflow-sample-slide4.jpg\" alt=\"Slide 3 jFlow Plus\" />
  •         
    ">
  •           

    Notice the Slide Navigation?


  •           

    That\'s a new feature. Click on the paging buttons in the top-right to quickly jump to any jFlow slide number.


  •         

  •       

  •     
  •     
    "> jFlowControl\"> jFlowControl\"> jFlowControl\"> jFlowControl\">

  •     
    ">

  •     
    ">

  •   
  •  
  • <!--end: container -->


  • 来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29737856/viewspace-1239953/ ，如需转载，请注明出处，否则将追究法律责任。

    0
    0
    上一篇： CSS背景渐变之从左往右渐变
    下一篇： 无缝滚动，JS代码，适用文字和图片
    请登录后发表评论 登录
    全部评论
    chunzhisu

    注册时间：2014-07-04

    • 博文量
      95
    • 访问量
      122213

    最新文章

    支持我们 作者招募 用户协议 FAQ Contact Us

    北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

    广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

    违法和不良信息举报电话:18101376593