jQuery焦点图、轮播图插件

本文由清尘发表于2015-06-20 18:35属于jQuery分类

随手写的一个jQuery的焦点图插件:

点击查看演示

HTML代码部分:

<div class="slide" id="slide">
	<ul class="slideFul">
		<li><a href=""><img src="p1.jpg" alt=""></a></li>
		<li><a href=""><img src="p2.jpg" alt=""></a></li>
		<li><a href=""><img src="p1.jpg" alt=""></a></li>
		<li><a href=""><img src="p2.jpg" alt=""></a></li>
	</ul>
	<div class="slideBtn">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</div>
	<span class="preBtn">&lt;上一张</span>
	<span class="nextBtn">下一张&gt;</span>
</div>
<div>以上是全屏居中的焦点图演示。容器宽为100%</div>

<div class="page">
	<div class="slide" id="slide2">
		<ul class="slideFul">
			<li><a href=""><img src="p1.jpg" alt=""></a></li>
			<li><a href=""><img src="p2.jpg" alt=""></a></li>
			<li><a href=""><img src="p1.jpg" alt=""></a></li>
			<li><a href=""><img src="p2.jpg" alt=""></a></li>
		</ul>
		<div class="slideBtn">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<span class="preBtn">&lt;上一张</span>
		<span class="nextBtn">下一张&gt;</span>
	</div>


	<div>非全屏 960px 居中的其它内容</div>
</div>

JS部分:

<script src="js/jquery.min.js"></script>
<script src="js/focus.js"></script>
<script>
	$("#slide").focusSlide({fullScreen:true});
	$("#slide2").focusSlide();
</script>

插件代码:focus.js

/**
 * code by https://blog.ipsfan.com/ on 2015/6/18.
 */
(function($){
$.fn.focusSlide=function(options){
    var defaults={
        btn:".slideBtn span",
        scrollBox:".slideFul",
        next:".nextBtn",
        pre:".preBtn",
        speed:4000,
        autoPlay:true,
        fullScreen:false
            },
        opts= $.extend(defaults,options);
//opts end
    var obj=this,
        scrollBox=obj.find(opts.scrollBox),
        scrollWidth=scrollBox.width(),
        scrollEle=obj.find("li"),
        btn=obj.find(opts.btn),
        next=obj.find(opts.next),
        pre=obj.find(opts.pre),
        slideId= 0,
        timer,
        speed=opts.speed,
        autoPlay=opts.autoPlay,
        fullScreen=opts.fullScreen;

    scrollEle.eq(slideId).fadeIn(500);
    btn.eq(slideId).addClass("on");
    function updateTimer(){
        scrollEle.stop(true,true).fadeOut(500);
        btn.removeClass("on");
        slideId++;
        if(slideId>=scrollEle.length){
            slideId=0;
        }else if(slideId<0){
            slideId=scrollEle.length-1;
        }
        scrollEle.eq(slideId).stop(true,true).fadeIn(500);
        btn.eq(slideId).addClass("on");
    }
    if (autoPlay) timer = setInterval(updateTimer, speed);
    obj.hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(updateTimer, speed);
    });
    btn.bind("mouseenter",function(){
        var index=$(this).index();
        slideId=index-1;
        updateTimer();
    });
    pre.bind("click",function(){
        slideId=slideId-2;
        updateTimer();
    });
    next.bind("click",function(){
        updateTimer();
    });

    //fullScreen
    if(fullScreen){
        function setPos(){
            var objWidth=obj.width(),
                scLeft=scrollWidth/2-objWidth/2;
            scrollBox.css({"left":-scLeft});
        }
        setPos();
        $(window).bind("resize",function(){
            setPos();
        });
    }

}
})(jQuery);

CSS部分:

/*slide*/
.slide{width:100%; height:654px; overflow:hidden; position:relative;}
.slideFul {width:1920px; position:absolute; left:0;top:0; }
.slideFul li{position:absolute; display: none;}
.slideBtn {position:absolute; z-index:99; bottom:10px; width:100%; text-align:center;}
.slideBtn span{background-color:#ccc; color:#000; padding:5px 8px; cursor:pointer;}
.slideBtn span.on{color:#fff; background-color:#ff0000;}
.preBtn,.nextBtn{position: absolute; border: 1px solid #000000; z-index: 99; top:300px; background-color: #fff; cursor:pointer; }
.nextBtn{right: 10px;}
/*slide end	*/
/*slide2 test css	*/
.page{width: 960px; margin: 0 auto; border: 1px solid #ff0000;}
#slide2{width: 600px;  height: 400px;}
#slide2 .slideFul{width: 600px;  height: 400px;}
#slide2 img{width:600px; height: 400px;}

插件的可选参数配置:

$("#obj").focusSlide({
		btn:".slideBtn span", //索引的按钮class名
		scrollBox:".slideFul", //滚动区域的class名
		next:".nextBtn", //下一张按钮class名
		pre:".preBtn", //上一张按钮class名
		speed:4000,  //切换的速度默认为4秒
		autoPlay:true, //是否自动播放
		fullScreen:false //是否是全屏居中,默认未开启
	});