JQuery实现图片轮播效果源码

Posted 2020-08-03 woider

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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=以上是关于JQuery实现图片轮播效果源码的主要内容，如果未能解决你的问题，请参考以下文章 
 基于jQuery实现左右图片轮播（原理通用）
 使用JQuery实现图片轮播效果
 jquery简单自动轮播图代码怎么写
 JQuery  slidebox实现图片轮播
 jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放
 jquery图片轮播思路