当前位置：首页 > news >正文

尝试写第一个js插件图片轮播

news 来源：原创 2024/5/6 12:58:02

最近在看怎么写js插件，尝试写了一个简单的图片轮播插件 jqury.picPlay.js 。

基本html框架为<div class="picPanel"><div class="slider"></div></div>，根据需要往里添加class为.pic、.num、.txt的div来分别放置图片列表，数字列表和文字列表。

调用方式：$.fn.jsPicPlay(setting);

setting可以设置三个参数

type: 图片切换方向，默认为横向切换，值为2的时候为垂直切换

intervalTime:设置图片多久切换一次，默认为3000ms

speed:图片切换的速度，默认为200ms

插件源码

View Code

(function($){
    $.fn.extend({
        jsPicPlay:function(setting){
            var setting = setting || {};
            var config = {
                type:1, //默认横向切换
                intervalTime:3000,
                speed:400
            };
            $.extend(config,setting);
            var panel =  this.length ? this : $(".picPanel");
            panel.each(function(){
                var panel = $(this),pic = $(".pic",panel),num = $(".num",panel),txt = $(".txt",panel),cn="on",intervalTime = config.intervalTime,speed = config.speed,type=config.type,curIndex=0,myTime = 0;
                var picList = $("ul",pic),picItem = $("li",pic),numItem=$("li",num),txtItem = $("li",txt);
                var flash = {
                    setStyle:function(){
                        switch(type){
                            case 2:
                                picList.css({position:"absolute"});    
                                break;
                            default:
                                picList.css({position:"absolute","width":picItem.width()*picItem.length});
                                picItem.css({"float":"left"});
                        }
                    },
                    setNum:function(){
                        var ht="";
                        for(var i=1;i<picItem.length+1;i++){
                            ht+="<li>"+i+"</li>";
                        }
                        num.append("<ul>"+ht+"</ul>");
                        numItem = $("li",num);
                        numItem.first().addClass("on");
                    },
                    play:function(){
                        ++curIndex >= picItem.length && (curIndex=0);
                        switch(type){
                            case 2:
                                picList.animate({
                                    top:-curIndex*picItem.height()
                                },speed);
                                break;
                            default:
                                picList.animate({
                                    left:-curIndex*picItem.width()
                                },speed);
                        }
                        numItem.removeClass(cn).eq(curIndex).addClass(cn);    
                        txt.length && txtItem.eq(curIndex).show().siblings().hide();
                    },
                    start:function(){
                        myTime = picItem.length && setInterval(flash.play,3000);
                    },
                    stop:function() {
                        clearInterval(myTime);
                    }
                    
                };
                flash.setStyle();
                pic.length && num.length && flash.setNum();
                flash.start();
                num.delegate("li",'click',function(){
                    flash.stop();
                    curIndex=numItem.index($(this))-1;
                    flash.play();
                    flash.start();
                });
            });
            return panel;
        }
    });
})(jQuery);

CSS

View Code

.picPanel ul,.picPanelul li{
    padding:0;
    margin:0;
    list-style:none;
}

.picPanel {
    
    font-size:12px;
    font-family:arial,simsun;
}
.slider{
    width:400px;
    height:300px;
    padding:2px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
}
.pic {
    width:400px;
    height:300px;
    overflow:hidden;
    position:absolute;
}
.num {
    position:absolute;
    bottom:20px;
    right:10px;
    height:20px;
}
.num li {
    width:14px;
    height:14px;
    background:#000;
    color:#fff;
    margin:0 3px;
    text-align:center;
    line-height:14px;
    font-size:10px;
    cursor:pointer;
    float:left;
}
.num .on {
    font-weight:bold;
    background:#ff0000;
}
.txt {
    position:absolute;
    bottom:2px;
    height:20px;
    width:400px;
    opacity:0.6;
    filter:alpha(opacity=60);
    background:#000;
    overflow:hidden;
}
.txt li {
    color:#fff;
    height:20px;
    line-height:20px;
    padding-left:8px;
    z-index:99;
}

示例：

完整的带有数字和文字的轮播

风景1
风景2
风景3
风景4

html

<div id="picOne" class="picPanel">
            <div class="slider">
                <div class="pic">
                    <ul>
                        <li><img src="img/1.jpg"/></li>
                        <li><img src="img/2.jpg"/></li>
                        <li><img src="img/3.jpg"/></li>
                        <li><img src="img/4.jpg"/></li>
                    </ul>
                </div>
                <div class="num"></div>
                <div class="txt">
                    <ul>
                        <li>风景1</li>
                        <li>风景2</li>
                        <li>风景3</li>
                        <li>风景4</li>
                    </ul>
                </div>
            </div>
        </div>

执行JS

$("#picOne").jsPicPlay();

仅有图片的轮播

html

<div class="picPanel" id="picTwo">
            <div class="slider">
                <div class="pic">
                    <ul>
                        <li><img src="img/4.jpg"/></li>
                        <li><img src="img/1.jpg"/></li>
                        <li><img src="img/2.jpg"/></li>
                        <li><img src="img/3.jpg"/></li>
                    </ul>
                </div>
            </div>
        </div>