jQuery 点击图片跳转上一张或下一张功能的实现代码

时间：2022-11-28 22:14:30
求jQuery 点击图片跳转上一张或下一张功能的实现代码 
？

4 个解决方案

#1

推荐个插件
yoxview

#2

<html>

<head>

    <title>图片切换和自动切换</title>

    <style type="text/css">

        *

        {

            font-size: 12px;

            font-family: Verdana;

            margin: 0;

            padding: 0;

        }

        .play img

        {

            border: 0px;

        }

        .play

        {

            width: 346px;

            height: 191px;

            overflow: hidden;

            margin: 100px 0 0 300px;

        }

        .play_text

        {

            position: absolute;

            margin: 141px 0 0 296px;

            height: 50px;

            width: 60px;

            z-index: 1002;

        }

        .play_text ul

        {

            list-style-type: none;

            width: 100px;

            height: 50px;

            display: block;

            padding-top: 1px;

            _padding-top: 0px;

            filter: Alpha(Opacity=80);

            opacity: 0.8;

        }

        .play_text ul li

        {

            width: 14px;

            height: 14px;

            float: left;

            background-color: #000;

            display: block;

            color: #FFF;

            text-align: center;

            margin: 1px;

            cursor: pointer;

            font-family: "Courier New";

        }

        .play_list a

        {

            display: block;

            width: 400px;

            height: 191px;

            position: absolute;

            overflow: hidden;

        }

    </style>


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


    <script type="text/javascript">

        var t = 0;

        var n = 0

        var count = 0;

        $(function() {

            //统计当前链接总个数

            count = $(".play_list a").size();

            $(".play_text li").click(function() {

                //获取文本列表总数

                var i = $(this).text() - 1;

                n = i;

                //如果超出范围，则不进行图片处理

                if (i >= count) return;

                //对当前链接列表进行过滤，并且对其子元素进行动画处理

                $(".play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

                //遍历符合的无素，并进行CSS样式处理

                $(this).css({ "background": "#fff", 'color': '#000' }).siblings().css({ "background": "#000", 'color': '#fff' });

            });

            t = setInterval("AutoPlay()", 3000);

            $(".play").hover(function() { clearInterval(t); }, function() { t = setInterval("AutoPlay()", 2000); });

        });

        //自动切换函数

        function AutoPlay() {

            n = n >= (count - 1) ? 0 : n + 1;

            //触发CLICK事件

            $(".play_text li").eq(n).trigger('click');

        }


        function stopAutoView() {

            clearInterval(t);

            $(".play_list").click(AutoPlay);

        }

    </script>


</head>

<body>

    <br />

    <div class="play">

        <div class="play_text">

            <ul>

                <li>1</li>

                <li>2</li>

                <li>3</li>

            </ul>

        </div>

        <div class="play_list">

            <a href="#">

                <img src="http://www.baidu.com/img/lm.gif" title="" alt="#" />

            </a><a href="#">

                <img src="http://imgsrc.baidu.com/forum/pic/item/d7fedeb45acf0a4e8bd4b280.jpg" title=""

                    alt="#" />

            </a><a href="#">

                <img src="http://imgsrc.baidu.com/forum/pic/item/17584d16f602bb5220a4e9b9.jpg" title=""

                    alt="#" />

            </a>

        </div>

    </div>

    <input type="button" onclick="stopAutoView()" value="停止自动播放" />

</body>

</html>

#3

http://topic.csdn.net/u/20100406/19/DE1DFC5D-DCFA-49A3-B4CE-21C22B13744C.html

#4

jquery有这个插件，或者你可以看看
http://www.cnblogs.com/chenping-987123/archive/2010/12/22/1914071.html

#1

推荐个插件
yoxview

#2

<html>

<head>

    <title>图片切换和自动切换</title>

    <style type="text/css">

        *

        {

            font-size: 12px;

            font-family: Verdana;

            margin: 0;

            padding: 0;

        }

        .play img

        {

            border: 0px;

        }

        .play

        {

            width: 346px;

            height: 191px;

            overflow: hidden;

            margin: 100px 0 0 300px;

        }

        .play_text

        {

            position: absolute;

            margin: 141px 0 0 296px;

            height: 50px;

            width: 60px;

            z-index: 1002;

        }

        .play_text ul

        {

            list-style-type: none;

            width: 100px;

            height: 50px;

            display: block;

            padding-top: 1px;

            _padding-top: 0px;

            filter: Alpha(Opacity=80);

            opacity: 0.8;

        }

        .play_text ul li

        {

            width: 14px;

            height: 14px;

            float: left;

            background-color: #000;

            display: block;

            color: #FFF;

            text-align: center;

            margin: 1px;

            cursor: pointer;

            font-family: "Courier New";

        }

        .play_list a

        {

            display: block;

            width: 400px;

            height: 191px;

            position: absolute;

            overflow: hidden;

        }

    </style>


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


    <script type="text/javascript">

        var t = 0;

        var n = 0

        var count = 0;

        $(function() {

            //统计当前链接总个数

            count = $(".play_list a").size();

            $(".play_text li").click(function() {

                //获取文本列表总数

                var i = $(this).text() - 1;

                n = i;

                //如果超出范围，则不进行图片处理

                if (i >= count) return;

                //对当前链接列表进行过滤，并且对其子元素进行动画处理

                $(".play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

                //遍历符合的无素，并进行CSS样式处理

                $(this).css({ "background": "#fff", 'color': '#000' }).siblings().css({ "background": "#000", 'color': '#fff' });

            });

            t = setInterval("AutoPlay()", 3000);

            $(".play").hover(function() { clearInterval(t); }, function() { t = setInterval("AutoPlay()", 2000); });

        });

        //自动切换函数

        function AutoPlay() {

            n = n >= (count - 1) ? 0 : n + 1;

            //触发CLICK事件

            $(".play_text li").eq(n).trigger('click');

        }


        function stopAutoView() {

            clearInterval(t);

            $(".play_list").click(AutoPlay);

        }

    </script>


</head>

<body>

    <br />

    <div class="play">

        <div class="play_text">

            <ul>

                <li>1</li>

                <li>2</li>

                <li>3</li>

            </ul>

        </div>

        <div class="play_list">

            <a href="#">

                <img src="http://www.baidu.com/img/lm.gif" title="" alt="#" />

            </a><a href="#">

                <img src="http://imgsrc.baidu.com/forum/pic/item/d7fedeb45acf0a4e8bd4b280.jpg" title=""

                    alt="#" />

            </a><a href="#">

                <img src="http://imgsrc.baidu.com/forum/pic/item/17584d16f602bb5220a4e9b9.jpg" title=""

                    alt="#" />

            </a>

        </div>

    </div>

    <input type="button" onclick="stopAutoView()" value="停止自动播放" />

</body>

</html>

#3

http://topic.csdn.net/u/20100406/19/DE1DFC5D-DCFA-49A3-B4CE-21C22B13744C.html

#4

jquery有这个插件，或者你可以看看
http://www.cnblogs.com/chenping-987123/archive/2010/12/22/1914071.html
标签：

相关文章