jQuery实现轮播图

Posted 2020-10-04 让自己不再小小的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现轮播图相关的知识，希望对你有一定的参考价值。

我用的jQuery库jquery-3.2.1.js可以在官网下载：http://jquery.com/download/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery实现轮播图</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <style>
        #lunbo {
            width: 850px;
            height: 500px;
            margin: 0px auto;
            position: relative;
            overflow: hidden;
        }

        #list {
            position: absolute;
            width: 4250px;
            height: 500px;
            z-index: 1;   
        }

            #list img {
                width: 850px;
                height: 500px;
                float: left;
            }

        #buttons {
            position: absolute;
            width: 90px;
            height: 15px;
            z-index: 2;
            left: 389px;
            bottom: 20px;
        }

            #buttons span {
                width: 15px;
                height: 15px;
                background: #f1f1f1;
                float: left;
                margin-right: 15px;
                border-radius: 50%;
                cursor: pointer;
            }

            #buttons .on {
                background: #cf1828;
            }

        .arrow {
            position: absolute;
            top: 230px;
            z-index: 2;
            display: none;
            width: 35px;
            height: 60px;
            font-size: 30px;
            font-weight: bold;
            line-height: 60px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
            text-decoration: none;
        }

            .arrow:hover {
                background-color: RGBA(0, 0, 0, .7);
            }

        #lunbo:hover .arrow {
            display: block;
        }

        #prev {
            left: 0px;
        }

        #next {
            right: 0px;
        }
    </style>
    <script>
        $(document).ready(function () {
            var lunbo = $("#lunbo");
            var list = $("#list");
            var prev = $("#prev");
            var next = $("#next");
            var spanGroup = $("#buttons span");
            var imgwidth = $("#list img:first-child").eq(0).width();
            var now = 1;
            var timer = null;

            prev.on("click", function () {
                clearInterval(timer);
                now--;
                if (now < 0) {
                    if (Math.abs(now) % 3 == 1) {
                        now = 2;
                    }
                    else if (Math.abs(now) % 3 == 2) {
                        now = 1;
                    }
                    else {
                        now = 0;
                    }
                }

                showPic(now);

                if (now == 0) {
                    now = 3;
                }
                if (now == 4) {
                    now = 1;
                }
            });

            next.on("click", function () {
                clearInterval(timer);
                now++;
                if (now > 4) {                   
                    if (now % 3 == 0) {
                        now = 3;
                    }
                    else if (now % 3 == 1) {
                        now = 4;
                    }
                    else {
                        now = 2;
                    }
                }
                
                showPic(now);

                if (now == 0) {                    
                    now = 3;
                }
                if (now == 4) {                    
                    now = 1;
                }
            });

            spanGroup.on("click", function () {
                now = spanGroup.index(this) + 1;
                showPic(now);
            });

            timer = setInterval(auto, 3000);

            function auto() {
                now++;
                showPic(now);
                if (now == 0) {
                    now = 3;
                }
                if (now == 4) {
                    now = 1;
                }
            }

            lunbo.mouseover(function () {
                clearInterval(timer);
            });

            lunbo.mouseout(function () {
                timer = setInterval(auto, 3000);
            })

            function showPic(index) {                
                list.animate({ left: -index * imgwidth }, 1000, function () {
                    spanGroup.eq((index - 1) % 3).addClass("on").siblings().removeClass("on");
                    if (index == 0) {                        
                        list.css({
                            "left": -3 * imgwidth + "px"
                        });
                    }
                    if (index == 4) {
                        list.css({
                            "left": -imgwidth + "px"
                        });
                    }
                });
            };
        });
    </script>
</head>
<body>
    <div id="lunbo">
        <div id="list" style="left:-850px">            
            <img src="images/lunbo3.jpg" alt="3" />
            <img src="images/lunbo1.jpg" alt="1" />
            <img src="images/lunbo2.jpg" alt="2" />
            <img src="images/lunbo3.jpg" alt="3" />           
            <img src="images/lunbo1.jpg" alt="1" />             
        </div>
        <div id="buttons">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
</body>
</html>

以上是关于jQuery实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章