jQuery jflow无缝滚动代码及实例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>jFlow Plus v2</title>
<style>
#sliderContainer { width: 940px; height: 300px; position: relative; border-top: 5px solid #999; border-bottom: 5px solid #999; margin: 0 auto; }
.slideContent {  background:url("//ku.shouce.ren/files/images/201601/56a3540b77036.png") repeat scroll 0 0 transparent; position: absolute; bottom:0px; right:0px; padding: 10px; width: 920px; }
.slide h3 {  font: 26px/1em 'Rokkitt', serif; color: #FFF;  margin: 0 0 5px 0; }
.slide p { font-size: 14px; color: #FFF; margin: 0; }
.jFlowSlideContainer { overflow: hidden; }
.jFlowSlideContainer a { color: #F90; text-decoration: none; font-style: italic; }
.jFlowSlideContainer a:hover { text-decoration: none; }
.jFlowSlideContainer a:focus { position: relative; top: 1px; }
.jFlowNext { background:url("//ku.shouce.ren/files/images/201601/56a3540c3b15d.png") no-repeat scroll 0 -35px transparent; height:130px; position:absolute; top:75px; right: -50px; width:50px; cursor:pointer; }
.jFlowPrev { background:url("//ku.shouce.ren/files/images/201601/56a3540c3b15d.png") no-repeat scroll -84px -35px transparent; height:130px; position:absolute; top:75px; left: -50px; width:50px; cursor:pointer; }
.jFlowPrev:hover { background-position: -84px -235px; }
.jFlowNext:hover { background-position: 0px -235px; }
#myController {position: absolute; top: 5px; right: 5px; }
.jFlowControl { background:url("//ku.shouce.ren/files/images/201601/56a3540cc2a6f.png") no-repeat scroll 0px 0px transparent;  float: left; width: 15px; height: 15px;}
.jFlowControl:hover { background-position: -32px 0px; cursor: pointer; }
.jFlowSelected, .jFlowSelected:hover {background-position: -15px 0px;   }
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
    $.fn.jFlow = function (options) {
        var opts = $.extend({}, $.fn.jFlow.defaults, options);
        var randNum = Math.floor(Math.random() * 11);
        var jFC = opts.controller;
        var jFS = opts.slideWrapper;
        var jSel = opts.selectedWrapper;
        var cur = 0;
        var timer;
        var maxi = $(jFC).length;
        var width = $(opts.slides).children().outerWidth();
		var slidesNum = $(opts.slides).children().size();
		var totalWidth = width * slidesNum;
		var lastSlide = (slidesNum - 1);
        var additionalSlide = slidesNum + 1;
		var pause = opts.pause;
        var slide = function (dur, i) {
                $(opts.slides).children().css({
                    overflow: "hidden"
                });
                $(opts.slides + " iframe").hide().addClass("temp_hide");			
                if (opts.effect == "rewind") {
                    $(opts.slides).animate({
                        marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
                    }, opts.duration * (dur), opts.easing, function () {
                        $(opts.slides).children().css({
                            overflow: "hidden"
                        });
                        $(".temp_hide").show();
                    });
                }
                else if (opts.effect == "flow") {
                    if (i != 0) {
                        $("#mySlides").animate({
                            left: -(i * width)
                        }, function () {
                            //if we are on the last slide then move the first slide into position
                            if ((slidesNum - 1) == i) {
                                $(".jFlowSlideContainer").first().css({
                                    left: (width * slidesNum)
                                });
                            }
                        });
						
						//fire off the paging function 
						movePagingClass();
						
                    }
                    else {
					
                        //animate the first slide container into position
                        $(".jFlowSlideContainer").first().animate({
                            //left slide distance is equal to width of slide times number of slides		
                            left: (width * slidesNum)
                       });
                        $(opts.slides).css({
                            // width is equal to the outer width of the container plus width one slide
                            width: (width * additionalSlide)
                         
                        });
                        $(opts.slides).animate({
                            left: "-"+totalWidth 
                        },
						function () {
                            //position the slide container element back to start
                            $(this).css('left', '0px');
                            //position the first slide back to start
                            $(".jFlowSlideContainer").first().css('left', '0px');
					    });
						$('.jFlowSelected').removeClass('jFlowSelected');
						$(jFC).first().addClass('jFlowSelected');
                    }
                }
            }
		var movePagingClass = function() {
				//advance the 'selected' pagination class 
				var thisController = $('.jFlowSelected');
				$(thisController).removeClass('jFlowSelected');
				$(thisController).next().addClass('jFlowSelected');		
		}
        $(this).find(jFC).each(function (i) {
			$(jFC).first().click(function() {
				$('.jFlowSlideContainer').first().css({
					left: '0px'
				});
				$('#mySlides').animate({
					left: '0px'
				});
				 $(jFC).removeClass(jSel);
                 $(this).addClass(jSel);
			});
            $(this).click(function () {
                dotimer();
                if ($(opts.slides).is(":not(:animated)")) {
					//slide to the page clicked
                    var dur = Math.abs(cur - i);
                    slide(dur, i);
                    cur = i;
                    $(jFC).removeClass(jSel);
                    $(this).addClass(jSel);
                } 
            });
        });

$(opts.slides).before('<div id="' + jFS.substring(1, jFS.length) + '"></div>').appendTo(jFS);
        $(opts.slides).find(".slide").each(function () {
            $(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev());
        });
        $(jFC).eq(cur).addClass(jSel);
        var resize = function (x) {
                $(jFS).css({
                    position: "relative",
                    width: opts.width,
                    height: opts.height,
                    overflow: "hidden"
                });
                $(opts.slides).css({
                    position: "relative",
                    width: $(jFS).width() * $(jFC).length + "px",
                    height: $(jFS).height() + "px",
                    overflow: "hidden"
                });
                $(opts.slides).children().css({
                    position: "relative",
                    width: $(jFS).width() + "px",
                    height: $(jFS).height() + "px",
                    "float": "left",
                    overflow: "hidden"
                });
                $(opts.slides).css({
                    marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
                });
            }
            resize();
        $(window).resize(function () {
            resize();
        });
        $(opts.prev).click(function () {
            dotimer();
            doprev();
        });
        $(opts.next).click(function () {
            dotimer();
            donext();
        });
        var doprev = function (x) {
                if (opts.effect == 'rewind') {
                    if ($(opts.slides).is(":not(:animated)")) {
                        var dur = 1;
                        if (cur > 0) {
                            cur--;
                        } else {
                            cur = maxi - 1;
                            dur = cur;
                        }
                        $(jFC).removeClass(jSel);
                        slide(dur, cur);
                        $(jFC).eq(cur).addClass(jSel);
                    }
                }
                else if (opts.effect == 'flow') {
					if(cur == 0) { 
					  $(opts.slides).css({
                            width: (width * additionalSlide)
                        });
										
                        $('.jFlowSlideContainer:last').css({
                            position: "absolute",
                            left: "-"+width+"px"
                        });
                        $('#mySlides').animate({
                            paddingLeft: width+"px"
                        });
                        $('.jFlowSlideContainer:last').animate({
                            left: "0px"
                        }, function () {
                            $(this).css({
                                position: "relative",
                                left: ""
                            });
                            $('#mySlides').css({
                                padding: "0px",
                                left: "-"+(totalWidth - width)+"px"
                            });
						
                        });
                         cur = slidesNum - 1;
						$('.jFlowSelected').removeClass('jFlowSelected');
						$(jFC).last().addClass('jFlowSelected');
						 
                    } //else slide as normal
                    else {
						if($(opts.slides).find(":first-child").css({ left: totalWidth })) {
							$(opts.slides).find(":first-child").css('left','0px');
						}
                        $('#mySlides').animate({
                            left: -(width * (cur - 1))
                        }, {
                            queue: false
                        });
                        cur = cur - 1;
						var thisController = $('.jFlowSelected');
						$(thisController).removeClass('jFlowSelected');
						$(thisController).prev().addClass('jFlowSelected');	
					}
                } else {
                    alert('Error: No effect entered as option!');
                }
            }
        var donext = function (x) {
			if(cur == lastSlide) {
					$(".jFlowSlideContainer").first().css({
						"left": totalWidth+"px"
						});
				}
			     if (opts.effect == 'rewind') {
                    if ($(opts.slides).is(":not(:animated)")) {
                        var dur = 1;
                        if (cur < maxi - 1) cur++;
                        else {
                            cur = 0;
                            dur = maxi - 1;
                        }
                        $(jFC).removeClass(jSel);
                        //$(jFS).fadeOut("fast");
                        slide(dur, cur);
                        //$(jFS).fadeIn("fast");
                        $(jFC).eq(cur).addClass(jSel);
                    }
                }
                else if (opts.effect == 'flow') {
					//check to see which slide we are on and set "cur" variable
                    if ($(opts.slides).is(":not(:animated)")) {
                        var dur = 1;
                        if (cur < maxi - 1) cur++;
                        else {
                            cur = 0;
                            dur = maxi - 1;
                        }
                    }
                    slide(dur, cur);
                } //end: "flow'
				$("#della").html(cur);
            } //end: donext function
			
		//the jFlow Timer
        var dotimer = function (x) {
                if ((opts.auto) == true) {
                    if (timer != null) clearInterval(timer);
                    timer = setInterval(function () {
                        $(opts.next).click();
                    }, pause);
                }
            }
            dotimer();
        $(opts.slides).hover(
        function () {
            clearInterval(timer);
        }, function () {
            dotimer();
        });
    };
    $.fn.jFlow.defaults = {
        controller: ".jFlowControl",
        slideWrapper: "#jFlowSlider",
        slides: "#mySlides",
        selectedWrapper: "jFlowSelected",
        effect: "flow",
        width: "800px",
        height: "350px",
        duration: 400,
		pause: 5000,
        prev: ".jFlowPrev",
        next: ".jFlowNext",
        auto: true
    };
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
	    $("#myController").jFlow({
			controller: ".jFlowControl", // must be class, use . sign
			slideWrapper : "#jFlowSlider", // must be id, use # sign
			slides: "#mySlides",  // the div where all your sliding divs are nested in
			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			
			effect: "flow", //this is the slide effect (rewind or flow)
			width: "940px",  // this is the width for the content-slider
			height: "300px",  // this is the height for the content-slider
			duration: 400,  // time in milliseconds to transition one slide
			
			pause: 5000, //time between transitions
			prev: ".jFlowPrev", // must be class, use . sign
			next: ".jFlowNext", // must be class, use . sign
			auto: true	
    });
});

</script>
</head>
<body>
<div id="container">  
  <div id="sliderContainer">
    <div id="mySlides">
      <div id="slide1" class="slide"> <img src="//ku.shouce.ren/files/images/201601/56a3540db39c8.jpg" alt="Slide 1 jFlow Plus" />
        <div class="slideContent">
          <h3>You Asked, jFlow Delivered</h3>
          <p>It's all about the Community and giving back.  To keep with this tradition, jFlow Plus now has more of the features you want.</p>
        </div>
      </div>
      <div id="slide2" class="slide"> <img src="//ku.shouce.ren/files/images/201601/56a354110eb18.jpg" alt="Slide 2 jFlow Plus" />
        <div class="slideContent">
          <h3>W3C Valid</h3>
          <p>Are you a stickler for writing valid code?  So is jFlow.  Run this puppy through W3C's validator to see it pass the test!</p>
        </div>
      </div>
      <div id="slide3" class="slide"> <img src="//ku.shouce.ren/files/images/201601/56a3541212e63.jpg" alt="Slide 3 jFlow Plus" />
        <div class="slideContent">
          <h3>Frequent Code Updates</h3>
          <p>This slider is actively developed and used by thousands of websites.  More features coming soon including more effects and options.</p>
        </div>
      </div>
      <div id="slide4" class="slide"> <img src="" alt="Slide 3 jFlow Plus" />
        <div class="slideContent">
          <h3>Notice the Slide Navigation?</h3>
          <p>That's a new feature.  Click on the paging buttons in the top-right to quickly jump to any jFlow slide number.</p>
        </div>
      </div>
    </div>
    <div id="myController"> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> </div>
    <div class="jFlowPrev"></div>
    <div class="jFlowNext"></div>
  </div>
 </div>

<div id="della"></div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery jflow无缝滚动代码及实例

分类

图片代码

描述

jquery jflow无缝滚动代码及实例，无缝滚动原理其实就是当滚动到最后一张的时候，让第一个排到最后一张的后边，其实也就是下一张的位置，代码还有优化的空间，高手有意可继续完善代码。