jQuery图片切换,轮播效果

最新推荐文章于 2024-02-20 00:03:41 发布

lzf0514

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量123

点赞数

分类专栏： javascript 文章标签： jQuery JavaScript XHTML CSS HTML ViewUI

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

版权

javascript 专栏收录该内容

39 篇文章 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>Untitled Page</title>
    
    <script type="text/javascript" src="jquery1.3.2.min.js"></script>
    <script type="text/javascript">
        var t = n = count = 0;
        $(function () {
            var piclist = $(".piclist img");
            var numlink = $(".num li");
            count = piclist.length;
            $(".piclist img:not(:first-child)").hide();
            $(numlink).filter(":first-child").addClass("on");
            $(numlink).each(function (i) {
                $(this).click(function () {
                    $(piclist).filter(":visible").fadeOut(500);
                    $(piclist).eq(i).fadeIn(1000);
                    $(this).addClass("on").siblings().removeClass("on");
                });
            });
            t = setInterval("showAuto()", 2000);
            $("#pause").click(function () { clearInterval(t); });
            $("#play").click(function () { t = setInterval("showAuto()", 2000); });
        });

        function showAuto() {
            n = n >= (count - 1) ? 0 : n + 1;
            $(".num li").eq(n).trigger("click");
        }
    </script>
    <style type="text/css">
        ul, li
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .picshow
        {
            width: 300px;
            height: 300px;
            position: relative;
        }
        .num
        {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .num li
        {
            float: left;
            background: #CCC;
            margin: 0 2px;
            padding: 0 3px;
            cursor: pointer;
        }
        .num li.on
        {
            background: #F00;
        }
        .piclist{ position:relative;}
        .piclist img{ position:absolute;}
    </style>
</head>
<body>
    <div class="picshow">
        <div class="piclist">
            <img src="image/pic1.jpg" width="300" height="300" alt="" />
            <img src="image/pic2.jpg" width="300" height="300" alt="" />
            <img src="image/pic3.jpg" width="300" height="300" alt="" />
        </div>
        <ul class="num">
            <li>1</li><li>2</li><li>3</li></ul>
    </div>
    <div id="pause">暂停</div>
    <div id="play">播放</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
复制链接

扫一扫

专栏目录