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

最新推荐文章于 2021-06-04 10:28:55 发布

lzf0514

最新推荐文章于 2021-06-04 10:28:55 发布

阅读量212

点赞数

分类专栏： css+xhtml javascript 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/lzf0514/article/details/84011350

版权

javascript 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

css+xhtml

37 篇文章 0 订阅

订阅专栏

<!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>

lzf0514

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片幻灯片切换代码

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &amp
复制链接

扫一扫