轮播图的效果实现小米商城和京东商城

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图的效果实现小米商城和京东商城相关的知识,希望对你有一定的参考价值。

案例一:

效果如下:类似小米商城的轮播图


自动切换的:左右的

技术分享图片

技术分享图片




技术分享图片



路径结构:

技术分享图片



代码如下:

<!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')

            }
            // 设置图片的类名
            $('img').addClass('focus-img');
            // 设置父盒子的总宽度
            $('.slider-wrapper').width((imgArr.length+1)*imgWidth);
            $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);


            // 初始化
            // 默认显示第一张图片
            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");
                }

            }

            // 给小圆圈添加点击事件

            $('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>

 

案例二:

类似京东商城的轮播图:


效果如下:


技术分享图片

技术分享图片



代码如下:



<!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 () {
            // 根据ol下li的索引号,匹配ul下相对应li的索引号
            $(".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>

 











以上是关于轮播图的效果实现小米商城和京东商城的主要内容,如果未能解决你的问题,请参考以下文章

CycleRotationView:自定义控件之轮播图

3d轮播图的效果实现

viewgager

微信小程序之轮播图的实现(附效果图和源码)

商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现

CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果)