`

jquery实现图片幻灯片切换代码

 
阅读更多

<!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>
    <title></title>
    <script type="text/javascript" src="jquery-1.2.6-vsdoc-cn.js"></script>
    <style type="text/css">
        img{ width:100px; height:100px; }
        a.current{ color:#f00;}
    </style>
    <script type="text/javascript">
        (function ($) {
            var defaults = {
                speed: 3000,
                frist: 0,
                auto: 1
            };
            $.fn.extend({
                slideshowpic: function (options) {
                    var slidedata = $.extend({}, defaults, options);
                    slidedata.slidepicbox = this;
                    $(document).ready(function () {
                        picplay(slidedata.frist, slidedata);

                        if (slidedata.slidebtnbox) {
                            slidebtn = slidedata.slidebtnbox.children();
                            slidebtn.each(function (i) {
                                $(this).bind("click", function () {
                                    //alert(i);
                                    if (slidedata.auto) { clearTimeout(slidedata.autotime); }
                                    picplay(i, slidedata);
                                });
                            });
                        }


                    });
                }
            });

            picplay = function (num, mydata) {
                var slidepic = mydata.slidepicbox.children();
                var total = slidepic.length;
                slidepic.filter(":visible").fadeOut("fast", function () {
                    $(this).removeClass("current");
                    slidepic.eq(num).fadeIn("slow");
                    slidepic.eq(num).addClass("current");
                });
                if (mydata.slidetitlebox) {
                    var slidetitle = mydata.slidetitlebox.children();
                    slidetitle.filter(":visible").hide("fast", function () {
                        $(this).removeClass("current");
                        slidetitle.eq(num).show();
                        slidetitle.eq(num).addClass("current");
                    });
                }
                if (mydata.slidebtnbox) {
                    var slidebtn = mydata.slidebtnbox.children();
                    slidebtn.eq(num).addClass("current");
                    slidebtn.eq(num).siblings().removeClass("current");
                }
                if (mydata.auto) {
                    var index = num >= total - 1 ? 0 : num + 1;
                    //alert(index);
                    mydata.autotime = setTimeout(function () { picplay(index, mydata); }, mydata.speed);
                }
            }


        })(jQuery);
        </script>
</head>
<body>
    <div>
        <div id="slidepic">
            <a href="#" title="标题1"><img src="image/pic1.jpg" />1</a>
            <a href="#" title="标题2"><img src="image/pic2.jpg" />2</a>
            <a href="#" title="标题3"><img src="image/pic1.jpg" />3</a>
            <a href="#" title="标题4"><img src="image/pic2.jpg" />4</a>
        </div>
        <div id="slidetitle">
            <a href="#">标题1</a>
            <a href="#">标题2</a>
            <a href="#">标题3</a>
            <a href="#">标题4</a>
        </div>
        <div id="slidebtn">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
        </div>
        <script type="text/javascript">
            var configdata = {
            slidetitlebox:$("#slidetitle"),//标题对象（可无）
            slidebtnbox: $("#slidebtn"), //按钮对象（可无）
            auto:1,//1自动播放/0不自动播放
            speed: 3000,//播放速度
            frist: 0//从第几张开始
            };
        $("#slidepic").slideshowpic(configdata);
        </script>
    </div>
</body>
</html>

分享到：
| thinkphp 生成静态文件 配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics