JQuery实现图片轮播效果源码

 ======================整体结构========================

<div class="banner">
    <ul class="banner-imgs">
        <li class="banner-img">
            <a href="#"><img src="#" alt="" /></a>
        </li>
        <li class="banner-img">
            <a href="#"><img src="#" alt="" /></a>
        </li>
        <li class="banner-img">
            <a href="#"><img src="#" alt="" /></a>
        </li>
        <li class="banner-img">
            <a href="#"><img src="#" alt="" /></a>
        </li>
        <li class="banner-img">
            <a href="#"><img src="#" alt="" /></a>
        </li>
    </ul>
    <div class="banner-btns">
        <button class="banner-btn-left">&lt;</button>
        <button class="banner-btn-right">&gt;</button>
    </div>
    <ul class="banner-items">
        <li class="banner-item"></li>
        <li class="banner-item"></li>
        <li class="banner-item"></li>
        <li class="banner-item"></li>
        <li class="banner-item"></li>
    </ul>
</div>

 ======================滚动轮播========================

        <style type="text/css">
            body {
                background: #424242;
            }
            
            * {
                padding: 0px;
                border: 0px;
                margin: 0px;
                outline: none;
                list-style: none;
                text-decoration: none;
            }
            
            .banner {
                /*此处调整尺寸*/
                width: 800px;
                height: 378px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            
            .banner .banner-imgs {
                width: 500%;
                height: 100%;
                position: absolute;
            }
            
            .banner .banner-imgs .banner-img {
                width: 20%;
                height: 100%;
                float: left;
            }
            
            .banner .banner-imgs .banner-img img {
                width: 100%;
                height: 100%;
            }
            
            .banner .banner-btns {
                width: 100%;
                position: absolute;
                top: 45%;
            }
            
            .banner .banner-btns button {
                padding: 5px;
                background: rgba(0, 0, 0, 0.4);
                text-align: center;
                color: white;
                font-size: 34px;
                font-family: "微软雅黑";
            }
            
            .banner .banner-btns button:hover {
                background: rgba(0, 0, 0, 0.5);
            }
            
            .banner .banner-btns .banner-btn-left {
                float: left;
            }
            
            .banner .banner-btns .banner-btn-right {
                float: right;
            }
            
            .banner .banner-items {
                width: 100px;
                position: absolute;
                /*设置按钮位置*/
                top: 10%;
                right: 5%;
            }
            
            .banner .banner-items .banner-item {
                width: 10px;
                height: 10px;
                margin: 5px;
                background: white;
                opacity: 0.6;
                border-radius: 5px;
                box-shadow: 0 0 5px black;
                cursor: pointer;
                float: left;
            }
        </style>
滚动连播样式
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var $banner = $(".banner .banner-imgs");
                var $imgs = $(".banner .banner-imgs .banner-img");
                var $btnL = $(".banner .banner-btns .banner-btn-left");
                var $btnR = $(".banner .banner-btns .banner-btn-right");
                var $items = $(".banner .banner-items .banner-item");
                var index = 0;

                $items.eq(0).css("opacity", "1");

                $btnL.click(function() {
                    imgAnimator(false);
                });

                $btnR.click(function() {
                    imgAnimator(true);
                });

                $items.click(function() {
                    imgAnimator(true, $items.index($(this)));
                });

                function imgAnimator(toNext, select) {
                    var temp = 0;
                    if(select != null) {
                        temp = select;
                    } else if(toNext == true) {
                        temp = ($imgs.length + index + 1) % $imgs.length;
                    } else {
                        temp = ($imgs.length + index - 1) % $imgs.length;
                    }
                    var position = temp * -($banner.outerWidth() / 5);
                    $banner.stop();
                    $banner.animate({
                        "left": position + "px"
                    }, "fast", function() {
                        index = temp;
                        $items.css("opacity", "0.5");
                        $items.eq(index).css("opacity", "1");
                    });
                }

            });
滚动连播效果
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>滚动轮播</title>
        <style type="text/css">
            body {
                background: #424242;
            }
            
            * {
                padding: 0px;
                border: 0px;
                margin: 0px;
                outline: none;
                list-style: none;
                text-decoration: none;
            }
            
            .banner {
                /*此处调整尺寸*/
                width: 800px;
                height: 378px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            
            .banner .banner-imgs {
                width: 500%;
                height: 100%;
                position: absolute;
            }
            
            .banner .banner-imgs .banner-img {
                width: 20%;
                height: 100%;
                float: left;
            }
            
            .banner .banner-imgs .banner-img img {
                width: 100%;
                height: 100%;
            }
            
            .banner .banner-btns {
                width: 100%;
                position: absolute;
                top: 45%;
            }
            
            .banner .banner-btns button {
                padding: 5px;
                background: rgba(0, 0, 0, 0.4);
                text-align: center;
                color: white;
                font-size: 34px;
                font-family: "微软雅黑";
            }
            
            .banner .banner-btns button:hover {
                background: rgba(0, 0, 0, 0.5);
            }
            
            .banner .banner-btns .banner-btn-left {
                float: left;
            }
            
            .banner .banner-btns .banner-btn-right {
                float: right;
            }
            
            .banner .banner-items {
                width: 100px;
                position: absolute;
                /*设置按钮位置*/
                top: 10%;
                right: 5%;
            }
            
            .banner .banner-items .banner-item {
                width: 10px;
                height: 10px;
                margin: 5px;
                background: white;
                opacity: 0.6;
                border-radius: 5px;
                box-shadow: 0 0 5px black;
                cursor: pointer;
                float: left;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var $banner = $(".banner .banner-imgs");
                var $imgs = $(".banner .banner-imgs .banner-img");
                var $btnL = $(".banner .banner-btns .banner-btn-left");
                var $btnR = $(".banner .banner-btns .banner-btn-right");
                var $items = $(".banner .banner-items .banner-item");
                var index = 0;

                $items.eq(0).css("opacity", "1");

                $btnL.click(function() {
                    imgAnimator(false);
                });

                $btnR.click(function() {
                    imgAnimator(true);
                });

                $items.click(function() {
                    imgAnimator(true, $items.index($(this)));
                });

                function imgAnimator(toNext, select) {
                    var temp = 0;
                    if(select != null) {
                        temp = select;
                    } else if(toNext == true) {
                        temp = ($imgs.length + index + 1) % $imgs.length;
                    } else {
                        temp = ($imgs.length + index - 1) % $imgs.length;
                    }
                    var position = temp * -($banner.outerWidth() / 5);
                    $banner.stop();
                    $banner.animate({
                        "left": position + "px"
                    }, "fast", function() {
                        index = temp;
                        $items.css("opacity", "0.5");
                        $items.eq(index).css("opacity", "1");
                    });
                }

            });
        </script>
    </head>

    <body>
        <div class="banner">
            <ul class="banner-imgs">
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
                </li>
            </ul>
            <div class="banner-btns">
                <button class="banner-btn-left">&lt;</button>
                <button class="banner-btn-right">&gt;</button>
            </div>
            <ul class="banner-items">
                <li class="banner-item"></li>
                <li class="banner-item"></li>
                <li class="banner-item"></li>
                <li class="banner-item"></li>
                <li class="banner-item"></li>
            </ul>
        </div>
    </body>

</html>
滚动连播完整代码

 ======================渐变轮播========================

        <style type="text/css">
            body {
                background: #424242;
            }
            
            * {
                padding: 0px;
                border: 0px;
                margin: 0px;
                outline: none;
                list-style: none;
                text-decoration: none;
            }
            
            .banner {
                /*此处调整尺寸*/
                width: 800px;
                height: 378px;
                margin: 100px auto;
                position: relative;
                /*overflow: hidden;*/
            }
            
            .banner .banner-imgs {
                width: 100%;
                height: 100%;
                background: white;
            }
            
            .banner .banner-imgs .banner-img {
                width: 100%;
                height: 100%;
                position: absolute;
                display: none;
                z-index: 0;
                opacity: 0;
            }
            
            .banner .banner-imgs .banner-img img {
                width: 100%;
                height: 100%;
            }
            
            .banner .banner-btns {
                width: 100%;
                z-index: 50;
                position: absolute;
                top: 45%;
            }
            
            .banner .banner-btns button {
                padding: 5px;
                background: rgba(0, 0, 0, 0.4);
                text-align: center;
                color: white;
                font-size: 34px;
                font-family: "微软雅黑";
            }
            
            .banner .banner-btns button:hover {
                background: rgba(0, 0, 0, 0.5);
            }
            
            .banner .banner-btns .banner-btn-left {
                float: left;
            }
            
            .banner .banner-btns .banner-btn-right {
                float: right;
            }
            
            .banner .banner-items {
                width: 100px;
                z-index: 50;
                position: absolute;
                /*设置按钮位置*/
                top: 10%;
                right: 5%;
            }
            
            .banner .banner-items .banner-item {
                width: 10px;
                height: 10px;
                margin: 5px;
                background: white;
                opacity: 0.6;
                border-radius: 5px;
                box-shadow: 0 0 5px black;
                cursor: pointer;
                float: left;
            }
        </style>
渐变连播样式
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var $banner = $(".banner .banner-imgs");
                var $imgs = $(".banner .banner-imgs .banner-img");
                var $btnL = $(".banner .banner-btns .banner-btn-left");
                var $btnR = $(".banner .banner-btns .banner-btn-right");
                var $items = $(".banner .banner-items .banner-item");
                var lastIndex = 0;
                var showIndex = 0;

                $imgs.eq(0).css("opacity", "1");
                $imgs.eq(0).css("z-index", "20");
                $imgs.eq(0).css("display", "block");
                $items.eq(0).css("opacity", "1");

                $btnL.click(function() {
                    imgAnimator(false);
                });

                $btnR.click(function() {
                    imgAnimator(true);
                });

                $items.click(function() {
                    imgAnimator(true, $items.index($(this)));
                });

                function imgAnimator(toNext, select) {

                    if(select != null) {
                        showIndex = select;
                    } else if(toNext == true) {
                        showIndex = ($imgs.length + lastIndex + 1) % $imgs.length;
                    } else {
                        showIndex = ($imgs.length + lastIndex - 1) % $imgs.length;
                    }

                    $items.css("opacity", "0.5");
                    $items.eq(showIndex).css("opacity", "1");

                    var $hideImg = $imgs.eq(lastIndex);
                    var $showImg = $imgs.eq(showIndex);
                    $showImg.css("display", "block");
                    $hideImg.css("z-index", 10);
                    $showImg.css("z-index", 20);
                    $showImg.animate({
                        "opacity": "1"
                    }, "slow", function() {
                        $hideImg.css({
                            "z-index": "0",
                            "display": "none",
                            "opacity": "0"
                        });
                    })
                    lastIndex = showIndex;
                }
            });
        </script>
渐变轮播效果
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>渐变轮播</title>
        <style type="text/css">
            body {
                background: #424242;
            }
            
            * {
                padding: 0px;
                border: 0px;
                margin: 0px;
                outline: none;
                list-style: none;
                text-decoration: none;
            }
            
            .banner {
                /*此处调整尺寸*/
                width: 800px;
                height: 378px;
                margin: 100px auto;
                position: relative;
                /*overflow: hidden;*/
            }
            
            .banner .banner-imgs {
                width: 100%;
                height: 100%;
                background: white;
            }
            
            .banner .banner-imgs .banner-img {
                width: 100%;
                height: 100%;
                position: absolute;
                display: none;
                z-index: 0;
                opacity: 0;
            }
            
            .banner .banner-imgs .banner-img img {
                width: 100%;
                height: 100%;
            }
            
            .banner .banner-btns {
                width: 100%;
                z-index: 50;
                position: absolute;
                top: 45%;
            }
            
            .banner .banner-btns button {
                padding: 5px;
                background: rgba(0, 0, 0, 0.4);
                text-align: center;
                color: white;
                font-size: 34px;
                font-family: "微软雅黑";
            }
            
            .banner .banner-btns button:hover {
                background: rgba(0, 0, 0, 0.5);
            }
            
            .banner .banner-btns .banner-btn-left {
                float: left;
            }
            
            .banner .banner-btns .banner-btn-right {
                float: right;
            }
            
            .banner .banner-items {
                width: 100px;
                z-index: 50;
                position: absolute;
                /*设置按钮位置*/
                top: 10%;
                right: 5%;
            }
            
            .banner .banner-items .banner-item {
                width: 10px;
                height: 10px;
                margin: 5px;
                background: white;
                opacity: 0.6;
                border-radius: 5px;
                box-shadow: 0 0 5px black;
                cursor: pointer;
                float: left;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var $banner = $(".banner .banner-imgs");
                var $imgs = $(".banner .banner-imgs .banner-img");
                var $btnL = $(".banner .banner-btns .banner-btn-left");
                var $btnR = $(".banner .banner-btns .banner-btn-right");
                var $items = $(".banner .banner-items .banner-item");
                var lastIndex = 0;
                var showIndex = 0;

                $imgs.eq(0).css("opacity", "1");
                $imgs.eq(0).css("z-index", "20");
                $imgs.eq(0).css("display", "block");
                $items.eq(0).css("opacity", "1");

                $btnL.click(function() {
                    imgAnimator(false);
                });

                $btnR.click(function() {
                    imgAnimator(true);
                });

                $items.click(function() {
                    imgAnimator(true, $items.index($(this)));
                });

                function imgAnimator(toNext, select) {

                    if(select != null) {
                        showIndex = select;
                    } else if(toNext == true) {
                        showIndex = ($imgs.length + lastIndex + 1) % $imgs.length;
                    } else {
                        showIndex = ($imgs.length + lastIndex - 1) % $imgs.length;
                    }

                    $items.css("opacity", "0.5");
                    $items.eq(showIndex).css("opacity", "1");

                    var $hideImg = $imgs.eq(lastIndex);
                    var $showImg = $imgs.eq(showIndex);
                    $showImg.css("display", "block");
                    $hideImg.css("z-index", 10);
                    $showImg.css("z-index", 20);
                    $showImg.animate({
                        "opacity": "1"
                    }, "slow", function() {
                        $hideImg.css({
                            "z-index": "0",
                            "display": "none",
                            "opacity": "0"
                        });
                    })
                    lastIndex = showIndex;
                }
            });
        </script>
    </head>

    <body>
        <div class="banner">
            <ul class="banner-imgs">
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
                </li>
                <li class="banner-img">
                    <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
                </li>
            </ul>
            <div class="banner-btns">
                <button class="banner-btn-left">&lt;</button>
                <button class="banner-btn-right">&gt;</button>
            </div>
            <ul class="banner-items">
                <li class="banner-item"></li>
                <li class="banner-item"></li>
                <li class="banner-item"></li>
                <li class="banner-item"></li>
                <li class="banner-item"></li>
            </ul>
        </div>
    </body>

</html>
渐变轮播完整代码
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/woider/p/5808893.html