您的位置: 首页  >  文章  >  jQuery轮播图淡入淡出，小米官网轮播图

jQuery轮播图淡入淡出，小米官网轮播图

分类: 文章 • 2024-12-24 19:35:46

和小米官网轮播图是一样的效果，需要的小伙伴拿走不谢，附上源码下载链接https://github.com/luoyu6/slideshow_xiaomi

注意：写的时候唯一需要的就是布局的时候li元素 需要设置成  position: absolute;不然轮播的时候有一段时间出现空白！

以下是效果图（没有动图，只有效果图，凑合看吧 尴尬~~）

jQuery轮播图淡入淡出，小米官网轮播图

代码如下

<!DOCTYPE HTML>
<html>

    <head>
        <title>please enter your title</title>
        <meta charset="utf-8">
        <meta name="Author" content="luoyu">
        <style type='text/css'>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            #banner {
                width: 730px;
                height: 454px;
                margin: 50px auto;
                position: relative;
            }
            
            #banner .pic {
                width: 100%;
                height: 100%;
                position: relative;
            }
            
            #banner .pic ul li {
                position: absolute;
                display: none;
            }
            
            #banner .tab {
                width: 148px;
                height: 20px;
                position: absolute;
                bottom: 10px;
                left: 50%;
                margin-left: -70px;
            }
            
            #banner .tab ul li {
                width: 18px;
                height: 18px;
                background: #666;
                border-radius: 100%;
                float: left;
                margin: 1px 3px;
                color: #fff;
                text-align: center;
                line-height: 18px;
                font-family: 'Microsoft yahei';
                font-size: 12px;
                cursor: pointer;
            }
            
            #banner .tab ul li.on {
                background: #f60;
            }
            
            #banner .btn {
                display: none;
            }
            
            #banner .btn div {
                width: 30px;
                height: 60px;
                background: rgba(0, 0, 0, 0.3);
                text-align: center;
                line-height: 60px;
                color: #fff;
                font-size: 24px;
                position: absolute;
                top: 50%;
                margin-top: -30px;
                cursor: pointer;
            }
            
            #leftBtn {
                left: 0;
            }
            
            #rightBtn {
                right: 0;
            }
        </style>
    </head>

    <body>

        <div id="banner">
            <div class="pic">
                <ul>
                    <li style="display:block;">
                        <a href=""><img src="img/1.jpg" /></a>
                    </li>
                    <li>
                        <a href=""><img src="img/2.jpg" /></a>
                    </li>
                    <li>
                        <a href=""><img src="img/3.jpg" /></a>
                    </li>
                    <li>
                        <a href=""><img src="img/4.jpg" /></a>
                    </li>
                    <li>
                        <a href=""><img src="img/5.jpg" /></a>
                    </li>
                    <li>
                        <a href=""><img src="img/6.jpg" /></a>
                    </li>
                </ul>
            </div>

            <div class="tab">
                <ul>
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>

            <div class="btn">
                <div id="leftBtn">&lt;</div>
                <div id="rightBtn">&gt;</div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
        <script type="text/javascript">
            $(function() {

                var $tabLi = $('#banner .tab li');
                var $picLi = $('#banner .pic li');
                var $btn = $('#banner .btn');
                var $btnDiv = $('#banner .btn div');
                var $banner = $('#banner');
                var index = 0;
                var timer;

                $tabLi.hover(function() {
                    index = $(this).index();
                    fn();
                });

                $banner.hover(function() {
                    $btn.show();
                    clearInterval(timer);
                }, function() {
                    $btn.hide();
                    auto();
                });

                $btnDiv.click(function() {
                    var i = $(this).index();
                    i ? index++ : index--;

                    fn();
                }).mousedown(function() {
                    return false;
                });

                auto();

                function auto() {
                    timer = setInterval(function() {
                        index++;

                        fn();
                    }, 500);
                }

                function fn() {
                    console.log(index)
                    if(index > $tabLi.length - 1) {
                        index = 0
                    } else if(index < 0) {
                        index = $tabLi.length - 1
                    }
                    $tabLi.eq(index).addClass('on').siblings().removeClass('on');
                    $picLi.eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
                }
            });
        </script>
    </body>

</html>

 

另外多说一句，（小米官网有好几个比较经典的轮播图，我写了个项目，仿小米官网的,里面集成了好几个轮播图，淡入淡出和轮播滚动的特效都有，內们可以去下载来自己看看https://luoyu6.github.io/xiaomi8_9/index.html），在这里粘贴个图吧

jQuery轮播图淡入淡出，小米官网轮播图

 

相关推荐