切换图片尝试写第一个js插件图片轮播-CSDN博客

本文链接：https://blog.csdn.net/javablogs/article/details/8923038

新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正

最近在看怎么写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>

执行JS

$("#picTwo").jsPicPlay({type:2});

如果当前页面的一个或多个轮播都应用同样的设置直接写$.fn.jsPicPlay()来执行;

文章结束给大家分享下程序员的一些笑话语录：警告
有一个小伙子在一个办公大楼的门口抽着烟，一个妇女路过他身边，并对他说， “你知道不知道这个东西会危害你的健康？我是说，你有没有注意到香烟盒上的那个警告（Warning）？”
小伙子说，“没事儿，我是一个程序员”。
那妇女说，“这又怎样？”
程序员说，“我们从来不关心 Warning，只关心 Error”