輪播圖的效果實(shí)現(xiàn)小米商城和京東商城

發(fā)布時(shí)間：2020-07-27 06:38:08 來(lái)源：網(wǎng)絡(luò) 閱讀：7061 作者：tty之星欄目：web開(kāi)發(fā)

案例一：

效果如下：類(lèi)似小米商城的輪播圖

自動(dòng)切換的：左右的

路徑結(jié)構(gòu)：

輪播圖的效果實(shí)現(xiàn)小米商城和京東商城

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .slider-list{
            width: 580px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .slider-list .slider-wrapper{
            height: 470px;
        }
        .slider-wrapper ul{
            height: 100%;

            position: relative;

        }
        .slider-wrapper ul li{
            float: left;
            width: 590px;
            height: 470px;

        }
        .slider-wrapper ul li a{
            display: block;
            width: 100%;
            height: 100%;
        }
         .focus-img{
            width: 590px;
            height: 470px;
        }
        button{
            position: absolute;
            width: 24px;
            height: 40px;
            top: 50%;
            line-height: 40px;
            text-align: center;
            background-color: rgba(0,0,0,.2);
            color: white;
            font-size: 30px;
            border: 0;
            outline: none;
            cursor: pointer;
            z-index: 99;
        }
        button.next{
            right: 0;
        }
        button.prev{
            left: 0;
        }
        .slider-index{
            position: absolute;
            bottom: 10px;
            left:250px;
            z-index: 2;

        }
        .slider-index span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 2px solid red;
            border-radius: 50%;
        }
        .slider-index span.active{
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="slider-list">
    <div class="slider-wrapper">
        <ul>

        </ul>
    </div>
    <button class="next"></button>
    <button class="prev"></button>
    <div class="active">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript" src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg'];
        var imgWidth = 590;
        var len = $('span').length;
        for(let i = 0;i < imgArr.length;i++){
                let width = i*imgWidth;
                $(`<li>
                    <a href="javascript:;">
                        <img src=${imgArr[i]} alt=${i}>
                    </a>
                </li>`).appendTo('.slider-wrapper ul').addClass('slider-item')

            }
            // 設(shè)置圖片的類(lèi)名
            $('img').addClass('focus-img');
            // 設(shè)置父盒子的總寬度
            $('.slider-wrapper').width((imgArr.length+1)*imgWidth);
            $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);

            // 初始化
            // 默認(rèn)顯示第一張圖片
            init();
            function init(){
                 $("ul").css("left",-imgWidth);
            }

            // 下一張
            $('button.next').click(function(event) {

                next();
            });

            // 控制圖片顯示第幾張
            var count = 1;
            function next(){

                if (count ==len+1) {
                    count = 2;
                    $("ul").css("left",-imgWidth);
                }else{
                    count++;
                }
                $('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200);

                // 控制輪播圖索引改變顏色
                if (count>len) {
                    $("span").eq(0).addClass("active").siblings("span").removeClass("active");
                }else{

                 $("span").eq(count-1).addClass("active").siblings("span").removeClass("active");
                }

            }

            // 給小圓圈添加點(diǎn)擊事件

            $('span').click(function(){
                  //自己的樣式
                            $(this).addClass("active").siblings("span").removeClass("active");
                             count = $(this).index()+1;
                            $("ul").animate({"left":-count*imgWidth},200);
            })

            setInterval(next,2000);
    });
</script>


</body>
</html>

案例二：

類(lèi)似京東商城的輪播圖：

效果如下：

輪播圖的效果實(shí)現(xiàn)小米商城和京東商城

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 580px;
            height: 240px;
            margin: 100px auto;
            /*overflow: hidden;*/
            position: relative;
        }
        .wrapper ul{
            width: 100%;
            height: 240px;
            overflow: hidden;

        }
        .wrapper ul li{
            float: left;
            width: 580px;
            height: 240px;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="01/node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 根據(jù)ol下li的索引號(hào)，匹配ul下相對(duì)應(yīng)li的索引號(hào)
            $(".wrapper ol li").mouseenter(function () {
                $(this).addClass("current").siblings().removeClass("current");
                $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><img src="./1.jpg" alt=""/></li>
            <li><img src="./2.jpg" alt=""/></li>
            <li><img src="./3.jpg" alt=""/></li>
            <li><img src="./4.jpg" alt=""/></li>
            <li><img src="./5.jpg" alt=""/></li>

        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>

向AI問(wèn)一下細(xì)節(jié)

輪播圖的效果實(shí)現(xiàn)小米商城和京東商城

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽