JQ图片轮播图的代码怎么写

本篇文章为大家展示了JQ图片轮播图的代码怎么写，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

HTML

<div class="czfl-img">

                <div id="ty_picScroll">

                    <label class="ty_btn ty_left">&lt;</label>

                    <label class="ty_btn ty_right">&gt;</label>

                    <div class="ty_tabBtns">

                        <p>

                            <span class="ty_current">1</span>

                            <span>2</span>

                            <span>3</span>

                        </p>

                    </div>

                    <div class="ty_tabInfo">

                        <iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY15011614021909" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true" width="1000" height="157" class="ty_pic" ></iframe>

                        <iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY15011614031310" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true" width="1000" height="157" class="ty_pic"></iframe>

                        <iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY15061017013512" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true" width="1000" height="157" class="ty_pic"></iframe>

                    </div>

                </div>

            </div>

CODE

<script type="text/javascript">

    //banner图片切换 0918

    var ty_picScroll = function(options){

        var fa = this;

        var opts = {};

        var clear;

        this.init = function(){

            opts = {

                box: $("#"+options.box),

                msg: (options.msg==undefined)?true:options.msg,

                auto: (options.auto==undefined)?true:options.auto,

                speed: options.speed || 5000,

                flag:0

            }

            opts.box.on("click","span",function(){

                clearInterval(clean);

                clean = setInterval(fa.auto,options.speed);

                index = opts.box.find("span").index(this);

                if(opts.flag!=index){

                    fa.picScroll(index);

                    opts.flag = index;

                }

            })

            opts.box.find('.ty_right').click(function(){

                clearInterval(clean);

                clean = setInterval(fa.auto,options.speed);

                fa.auto();

            });

            opts.box.find('.ty_left').click(function(){

                clearInterval(clean);

                clean = setInterval(fa.auto,options.speed);

                fa.auto1();

            });

            // opts.box.mouseenter(function(){

            //     clearInterval(clean)

            // }).mouseleave(function(){

            //     clean = setInterval(fa.auto,options.speed);

            // })

            if(opts.auto){

                clean = setInterval(fa.auto,options.speed);

            }

            if(!opts.msg){

                opts.box.find(".ty_picMsg").hide();

            }

        }

        this.picScroll = function(obj){

            opts.box.find("span").removeClass("ty_current").eq(obj).addClass("ty_current");

            opts.box.find(".ty_pic").fadeOut(500).eq(obj).fadeIn(500);

            if(opts.msg){

                var msg = opts.box.find("a").eq(obj).attr("data-msg");

                opts.box.find(".ty_picMsg").fadeIn(500).find("p").html(msg);

            }

        };

        this.auto = function(){

            var len = opts.box.find("span").length;

            opts.flag++;

            if(opts.flag>(len-1))opts.flag = 0;

            fa.picScroll(opts.flag);

        }

        this.auto1=function(){

            var len=opts.box.find('span').length;

            if(opts.flag==0) opts.flag=len;

            opts.flag--;

            fa.picScroll(opts.flag);

        };

        this.init();

    }

    var picScroll = new ty_picScroll({

        box:"ty_picScroll",        //盒子名称

        msg:false,                 //是否显示说明文字

        auto:true,                 //是否自动播放

        speed:5000                 //轮播速度

    });

    $("#ty_picScroll").hover(function(){

        $(this).find(".ty_btn").show();

    },function(){

        $(this).find(".ty_btn").hide();

    });

</script>

上述内容就是JQ图片轮播图的代码怎么写，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。