首页 > 试题广场 >

设计一个图片轮播组件：需要满足的要求如下： 1

[问答题]

设计一个图片轮播组件：

需要满足的要求如下：

1. 使用手指可以拖动图片进行切换

2. 图片滚动到最后一张时，可以继续向后无缝切换到第一张，反之，也可以切换滚动到最后一张

3. 当没有任何操作时，每3秒切换一张图片

（注：不能使用本地IDE）

68214

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>轮播</title>
    <style>
    .wrapper {
        position: relative;
        width: 900px;
        height: 150px;
        overflow: hidden;
        z-index: 10;
    }

    #list {
        position: absolute;
        width: 4500px;
        height: 150px;

        /*float: left;*/
    }

    #list img {
        float: left;
    }

    #buttons {
        width: 100px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        right: 50%;
        margin-left: -50px;
        text-align: center;
        cursor: pointer;
    }

    span {
        /*margin:10px;*/
        color: #fff;
    }

    .on {
        color: green;
    }

    .arrow {
        position: absolute;
        color: #999;
        font-size: 50px;
        line-height: 130px;
        display: none;
        cursor: pointer;
        /*border:1px solid;*/
    }

    .wrapper:hover .arrow {

        display: block;
    }

    #left {
        left: 10px;
    }

    #right {
        right: 10px;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="list" style="left:-900px">
            <img src="images/banner3.jpg" alt="banner3">
            <img src="images/banner1.jpg" alt="banner1">
            <img src="images/banner2.jpg" alt="banner2">
            <img src="images/banner3.jpg" alt="banner3">
            <img src="images/banner1.jpg" alt="banner1">
        </div>
        <div id="buttons">
            <span index='1' class="on">●</span>
            <span index='2'>●</span>
            <span index='3'>●</span>
        </div>
        <div id="left" class="arrow">&lt;</div>
        <div id="right" class="arrow">&gt;</div>
    </div>
    <script>
    var list = document.getElementById('list'),
        wrapper = document.getElementsByClassName('wrapper')[0],
        left_ = document.getElementById('left'),
        right_ = document.getElementById('right'),
        buts = document.getElementById('buttons'),
        index = 1,
        timer = null,
        startx = 0,
        endx = 0,
        isanimating = false;
    //手指滑动事件，手指触摸屏幕获取x坐标，手指滑动在获取手指所在的x坐标，相减判断手指移动的方向来确定向左还是向右
    list.ontouchstart = function(e) {
        clearTimeout(timer)
        var event = getEvent(e)
        startx = event.touches[0].clientX
    }
    list.ontouchmove = function(e) {
        endx = event.changedTouches[0].clientX

        if (endx < startx) {
            left_.onclick()
        } else {
            right_.onclick()
        }
    }
    list.ontouchend = function(e) {
        play()

    }
    //点击箭头事件，左右点击
    left_.onclick = function(e) {
        if (isanimating) return
        animation(-900)
        index--;
        if (index <= 0) {
            index = 3;
        }
        showBtn()
    }
    right_.onclick = function(e) {
        if (isanimating) return
        animation(900)
        index++;
        if (index > 3) {
            index = 1;
        }
        // console.log(0)
        showBtn()
    }
    //点击小按钮事件
    buts.onclick = function(e) {
        var event = getEvent(e)
        var target = getTarget(event)
        if (target.tagName === 'SPAN') {
            var i = parseInt(target.getAttribute('index'))
            animation((i - index) * (900))
            index = i;
            showBtn(target)
        }
    }

    function getTarget(event) {
        return event.target ? event.target : event.srcElement;
    }

    function getEvent(e) {
        return e ? e : window.event

    }

    function animation(offset) {
        isanimating = true
        var interValMove = 10,
            timer = 300,
            speed = parseInt(offset / 30),
            left = parseInt(list.style.left) + offset;

        function action() {
            if ((speed < 0 && parseInt(list.style.left) > left) || (speed > 0 && parseInt(list.style.left) < left)) {
                list.style.left = parseInt(list.style.left) + speed + 'px';
                setTimeout(action, interValMove)
            } else {
                isanimating = false
                list.style.left = left + 'px'
                if (parseInt(list.style.left) <= -3600) {
                    list.style.left = -900 + 'px'

                } else if (parseInt(list.style.left) == 0) {
                    list.style.left = -2700 + 'px'

                }
            }
        }
        action()
    }

    function showBtn(target) {
        var children = buts.children,
            len = children.length
        for (var i = 0; i < len; i++) {
            children[i].classList.remove('on')
        }
        if (arguments.length > 0) {
            target.classList.add('on')
        } else {
            children[index - 1].classList.add('on')
        }
    }

    function play() {
        timer = setTimeout(function() {
            right_.onclick()
            timer = setTimeout(arguments.callee, 3000)
        }, 3000)
    }

    wrapper.onmouseenter = function(e) {
        clearTimeout(timer)

    }
    wrapper.onmouseleave = function(e) {
        play()

    }
    play()
    </script>
</body>

</html>

编辑于 2018-07-11 17:00:15 回复(0)

来个offer一个就够

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>轮播</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style>
    *{
        margin: 0;padding: 0;
    }
    .wrapper{
        width: 200px;height: 200px;position: relative;border:1px solid skyblue;border-radius: 30px; margin: 20px auto;overflow:hidden;
    }
    .wrapper img{
        width: 200px;height: 200px; float: left;
    }
    .list{
        width: 1200px;height: 200px;position: absolute; top: 0;left: -600px;
    }
    .arrow{
        font-size: 50px; color: skyblue;width: 40px;height: 40px;line-height: 40px;text-align: center;
        cursor: pointer;
    }

    #left{
        position: absolute;top:80px;left: 0;
    }
    #right{
        position: absolute;top:80px;right: 0;
    }
</style>
</head>

<body>
<div class="wrapper">
<div class="list">
    <img src="image/c1.png">
    <img src="image/c2.png">
    <img src="image/c3.png">
    <img src="image/c1.png">
    <img src="image/c2.png">
    <img src="image/c3.png">
</div>
<div id="left" class="arrow"><</div>
     <div id="right" class="arrow">></div>
</div>
<script>
         $(function(){
             var timer;
             normal();
             function normal(){
                  timer=setInterval(function(){
                     move();

                 },3000)
             }



             var num=4;
             var aimg=$('img');
             function move(){
                 clearInterval(timer1);

                 var timer1=setInterval(function(){
                     var speed=parseInt($('.list').css('left'))-10;
                       if(speed<-200*num){
                           speed=-200*num;
                       }
                       $('.list').css('left',speed+'px');
                       if(speed==-200*num){
                           num++
                           clearInterval(timer1);
                       }
                       if(speed==-1000){
                           $('.list').css('left','-400px');
                           num=3;
                       }
                 },50)



             }

             function moveRight(){
                 clearInterval(timer2);
                 var timer2=setInterval(function(){
                     var speed2=parseInt($('.list').css('left'))+10;
                     if(speed2>-200*(num-2)){
                         speed2=-200*(num-2);
                     }
                     $('.list').css('left',speed2+'px');
                     if(speed2==-200*(num-2)){
                         num--;
                         clearInterval(timer2);
                     }
                     if(speed2==-200){
                         $('.list').css('left','-800px');
                         num=5;
                     }

                 },50)
             }

             $('#left').on('click',function(){
                 clearInterval(timer);
                 move();
                 normal();

             })
             $('#right').on('click',function(){
                 clearInterval(timer);
                 moveRight();
                 normal();

             })

         })
</script>
</body>

</html>

发表于 2019-04-17 11:08:11 回复(0)

深情不及久伴！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
            list-style: none;
        }

        .right :hover li{
color: #000;
        }

        /*设置banner*/
        .banner{
            width:1226px;
            height:460px;
            border:1px solid red;
            margin:10px auto;
            /*父亲相对定位*/
            position: relative;
        }

        /*设置banner图片*/
        .bannerImg img{
            width:100%;
        }
        .bannerImg li{
            position: absolute;
            left:0px;
            top:0px;
        }

        .bannerImg li.active{
            z-index:10;
        }

        /*按钮*/
        .btn{
            width:41px;
            height:70px;
            position: absolute;
            top:50%;
            z-index:20;
            margin-top:-35px;
            text-align: center;
            line-height: 70px;
            font-size: 30px;
            cursor:pointer;
        }
        .btn:hover{
            background-color: #ccc;
        }
        .btn-left{
            left:0px;
        }
        .btn-right{
            right:0px;
        }

        /*小点*/
        .bannerDian{
            position: absolute;
            left:0px;
            bottom:20px;
            z-index:20;
            width:100%;
            text-align: right;
            padding-right: 100px;
            box-sizing:border-box;
        }
        .bannerDian li{
            display:inline-block;
            width:10px;
            height:10px;
            background-color: #83898F;
            border-radius: 100%;
            border:2px solid #AEA8B6;
            margin:0px 3px;
        }
        .bannerDian li.active{
            background-color: #fff;
            border:2px solid #83898F;
        }
    </style>
</head>
<body>
    
    <div class="banner">
        
        <ul class="bannerImg">
            <li class="active"><a href=""><img src="http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg" alt=""></a></li>
            <li><a href=""><img src="http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg" alt=""></a></li>
            <li><a href=""><img src="img src="http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg"" alt=""></a></li>
            <li><a href=""><img src="img src="http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg"" alt=""></a></li>
            <li><a href=""><img src="img src="http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg"" alt=""></a></li>
        </ul>

        
        <div class="btn btn-left"><</div>
        <div class="btn btn-right">></div>

        
        <ul class="bannerDian">

        </ul>
    </div>
</body>
<script>
    // 1、根据图片个数调整小点的个数

        // 获取图片的个数

        let img=document.querySelectorAll(".bannerImg li");

        let imgSize=img.length;

        // 获取bannerDian
        let bannerDian=document.querySelector(".bannerDian");

        // 根据图片的个数

        for(let i=0;i<imgSize;i++){
            // 创建li对象
            let liObj=document.createElement("li");

            // 判断如果i=0;

            if (i==0) {
                liObj.className="active";
            };

            // 追加到bannerDian中
            bannerDian.appendChild(liObj);
        }
    // 2、轮播图动起来
        // 设置定时器的名字
        let slider;
        // 获取所有的小点
        let dian=document.querySelectorAll(".bannerDian li");

        let n=0;

        // 定时器
        slider=setInterval(move,3000);

        // 鼠标右侧移动
        function move(){
            // 显示图片的编号
            n++;
            // 判断编号如果图片到达最后一张回到第一张
            if (n>=imgSize) {
                n=0;
            };
            // 消除其他人的active类
            for(let i=0;i<imgSize;i++){
                // 消除图片的active类
                img[i].className="";
                // 移除小点的active类
                dian[i].className="";
            }
            // 让对应编号的图片显示
            img[n].className="active";
            // 让对应编号的小点添加active类
            dian[n].className="active";
        }
        // 轮播图左移
        function moveLeft(){
            // 显示图片的编号
            n--;
            // 判断编号如果图片到达最后一张回到第一张
            if (n<0) {
                n=imgSize-1;
            };
            // 消除其他人的active类
            for(let i=0;i<imgSize;i++){
                // 消除图片的active类
                img[i].className="";
                // 移除小点的active类
                dian[i].className="";
            }
            // 让对应编号的图片显示
            img[n].className="active";
            // 让对应编号的小点添加active类
            dian[n].className="active";
        }
    // 3、鼠标经过图片的时候停止定时器，离开图片开始定时器
        let bannerImgObj=document.querySelector(".bannerImg");

        // 鼠标经过
        bannerImgObj.onmouseenter=function(){
            // 清除定时器
            clearInterval(slider);
        }

        // 鼠标离开
        bannerImgObj.onmouseout=function(){
            clearInterval(slider);
            // 设置定时器
            slider=setInterval(move,3000);
        }

    // 4、鼠标点击小点

        // 绑定点击事件

        for(let i=0;i<dian.length;i++){

            // 绑定事件
            dian[i].onclick=function(){
                // 移除所有小点类、图片的类
                for(let j=0;j<dian.length;j++){
                    dian[j].className="";
                    img[j].className="";

                }
                // 点击那个小点，给那个小点添加active

                this.className="active";

                // 获取我点击小点编号
                // 我们可以获取点击小点的编号，同时改变图片
                img[i].className="active";

                // 同时改变定时器的n
                // 点击的编号和定时器的n，进行关联
                n=i;

            }
        }

    // 5、点击左右菜单

        let btnLeft=document.querySelector(".btn-left");
        let btnRight=document.querySelector(".btn-right");

        // 点击右边菜单
        btnRight.onclick=function(){
            move();
        }
        // 点击左边菜单
        btnLeft.onclick=function(){
            moveLeft();
        }
</script>
</html>

发表于 2018-12-19 21:41:11 回复(0)

提交观点

问题信息

C++工程师 iOS工程师安卓工程师运维工程师前端工程师算法工程师 2018 PHP工程师百度 Java工程师

上传者：小小

难度：

3条回答 87收藏 1450浏览

设计一个图片轮播组件：需要满足的要求如下： 1

问题信息

热门推荐

相关试题

设计一个图片轮播组件： 需要满足的要求如下： 1

问题信息

热门推荐

相关试题

设计一个图片轮播组件：需要满足的要求如下： 1