小案例---淘宝轮播图实现

最新推荐文章于 2024-03-30 08:47:58 发布

爱篮球的程序猿

最新推荐文章于 2024-03-30 08:47:58 发布

阅读量776

点赞数 1

文章标签： javascript html5 css css3

本文链接：https://blog.csdn.net/LPKJJSHSSB/article/details/105149592

版权

通过自己的自学，初步完成了淘宝轮播图的实现，可能代码上还没得到很多优化，希望大家可以帮我指出一下，非常感谢！
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
        .banner{
            width: 520px;
            height: 282px;
            margin: 100px ;
            position: relative;
            overflow: hidden;
        }
        .banner .banner-list{
            width: 600%;
            height: 100%;
            list-style: none;
            position: absolute;
            top: 0;
        }
        .banner .banner-list li{
            float: left;
        }
        .banner .banner-dot{
            height: 13px;
            margin-left: -35px;
            position: absolute;
            list-style: none;
            left: 50%;
            bottom: 15px;
            background-color: rgba(250,250,250,.3);
            border-radius: 5px;
            padding:3px;
            box-sizing: border-box;
        }
        .banner .banner-dot li{
            width: 8px;
            height: 8px;
            float: left;
            border-radius: 50%;
            background-color: #fff;
            margin-right: 5px;
            
        }
        .banner .banner-dot .show{
            background-color: #ff5000;
        }
        .banner .banner-dot li:last-child{
            margin-right: 0px;
        }
        .banner .banner-icon .icon-left{
            width: 40px;
            height: 30px;
            line-height: 30px;
            border-radius:20px;
            text-align: right;
            padding-right: 8px;
            position: absolute;
            font-size: 24px;
            color: #fff;
            box-sizing: border-box;
            background-color: rgba(0, 0, 0, .3);
            left: -15px;
            top: 50%;
            display: none;
            z-index: 10;
            cursor: pointer;
        }
        .banner .banner-icon .icon-right{
            width: 40px;
            height: 30px;
            line-height: 30px;
            border-radius:20px;
            text-align: left;
            padding-left: 8px;
            position: absolute;
            font-size: 24px;
            color: #fff;
            box-sizing: border-box;
            background-color: rgba(0, 0, 0, .3);
            right: -15px;
            top: 50%;
            display: none;
            z-index: 10;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="banner">
        <div class="banner-icon">
            <span class="icon-right">></span>
            <span class="icon-left"> < </span>
        </div>
        <ul class="banner-list">
            <li><img src="https://img.alicdn.com/simba/img/TB1MP9_yYY1gK0jSZTESutDQVXa.jpg " alt=""> </li>
            <li><img src="https://img.alicdn.com/simba/img/TB1GzT0zXT7gK0jSZFpSuuTkpXa.jpg" alt=""> </li>
            <li><img src="https://img.alicdn.com/tfs/TB15Z_Gzbr1gK0jSZR0XXbP8XXa-520-280.jpg_q90_.webp" alt=""></li>
            <li><img src="https://img.alicdn.com/tfs/TB1bvcMyFT7gK0jSZFpXXaTkpXa-520-280.jpg_q90_.webp" alt=""></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1kyuIy7L0gK0jSZFtSutQCXXa.jpg" alt=""></li>
        </ul>
        <ol class="banner-dot">
            
        </ol>
    </div>
    <script>
        var banner = document.querySelector('.banner');
        var bannerlist1=document.querySelector('.banner-list');
        var bannerlist=document.querySelectorAll('.banner-list li');
        var bannerdot=document.querySelector('.banner-dot');
        var iconleft =document.querySelector('.icon-left');
        var iconright =document.querySelector('.icon-right');
        var liwidth = banner.offsetWidth; 
        banner.addEventListener('mouseenter',function(){
            iconleft.style.display = 'block';
            iconright.style.display = 'block';
            clearInterval(timer);
            timer=null;
        });
        banner.addEventListener('mouseleave',function(){
            iconleft.style.display = 'none';
            iconright.style.display = 'none';
            timer = setInterval(function(){
            //手动调用点击事件
                iconright.click();
            },2000);
        })
        //缓动动画函数
        function animate(obj,target,callback){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            //帮步长值变为整数Math.celi
            var step = (target-obj.offsetLeft)/10;
            step=step > 0 ? Math.ceil(step) : Math.floor(step);
            if(obj.offsetLeft == target){
                //停止定时器
                clearInterval(obj.timer);
                if(callback){
                    //回调函数，可以在传实参时传入函数
                    callback();
                }
            }
            //每次加1的固定值换成动态的慢慢变小的值    步长公式:(目标值-现在位置)/10
            obj.style.left = obj.offsetLeft + step + 'px';
        },15);
        }
        for(var i=0;i<=bannerlist.length-1;i++){
            var li = document.createElement('li');
            //为小圆圈加索引
            li.setAttribute('index',i);
            bannerdot.appendChild(li);
            li.addEventListener('click',function(){
                for(var j=0;j<=bannerdot.children.length-1;j++){
                    bannerdot.children[j].className='';
                }
                this.className='show';
                //点击小圆圈移动图片
                //ul的移动距离 小圆圈的索引号乘以图片的宽度，是负值
                var index = this.getAttribute('index');
                //当我们点击了小圆圈需要将小圆圈的索引值赋值给num保持一致
                num=index;
                //当我们点击了小圆圈需要将小圆圈的索引值赋值给circle保持一致
                circle=index;
                animate(bannerlist1,-index*liwidth)
            })
            bannerdot.children[0].className='show';
            }
        //6.克隆第一张图片放在最后面
        var first = bannerlist[0].cloneNode(true);
        bannerlist1.appendChild(first);
        //7.点击右侧按钮，移动一张图片
            // 7.1定义一个变量，当他点击后加1,从而达到bannerlist的移动距离
        var num=0;
            //7.2控制小圆圈的播放
        var circle = 0;
        // flag是一个节流阀
        var flag = true;
        //右侧按钮实现
        iconright.addEventListener('click',function(){
            if(flag){
                flag=false//关闭节流阀
                if(num==bannerlist1.children.length-1){
                bannerlist1.style.left=0;
                num=0;
            }
            num++;
            animate(bannerlist1,-num*liwidth,function(){
                flag=true;
            });
            circle++;
            //如果circle等于4，说明走到了最后克隆的图片，需要将circle为重置为0
            if(circle==bannerlist1.children.length-1){
                circle=0;
            }
            for(var i=0;i<=bannerdot.children.length-1;i++){
                bannerdot.children[i].className='';
            }
            bannerdot.children[circle].className='show';
            }
            //判断是否到达最后一张图片，如果定义的变量等于了li的数量了，那么就让他很快的left为0，几乎看不到
            
        })
        //左侧按钮功能实现
        iconleft.addEventListener('click',function(){
            if(flag){
                flag=false;
                //判断是否到达最后一张图片，如果定义的变量等于了li的数量了，那么就让他很快的left为0，几乎看不到
                if(num==0){
                    num=bannerlist1.children.length-1;
                    bannerlist1.style.left=-num*liwidth + 'px';
                    
                }
                num--;
                animate(bannerlist1,-num*liwidth,function(){
                    flag=true;
                });
                circle--;
                //如果circle小于0 
                if(circle<0){
                    circle=bannerdot.children.length-1;
                }
                for(var i=0;i<=bannerdot.children.length-1;i++){
                    bannerdot.children[i].className='';
                }
                bannerdot.children[circle].className='show';
            }

        })
        //自动播放功能实现
        var timer = setInterval(function(){
            //手动调用点击事件
            iconright.click();
        },2000);
    </script>
</body>
</html>

爱篮球的程序猿

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小案例---淘宝轮播图实现

通过自己的自学，初步完成了淘宝轮播图的实现，可能代码上还没得到很多优化，希望大家可以帮我指出一下，非常感谢！代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
复制链接

扫一扫