请老师检查

来源:2-2 编程练习

Aurora_Meteor

2020-04-27 13:53:59

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <title>Document</title>

    <link rel="stylesheet" href="js/js/swiper/idangerous.swiper2.7.6.css">

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide bg-1">1</div>

            <div class="swiper-slide bg-2">2</div>

            <div class="swiper-slide bg-3">3</div>

        </div>

    </div>


    <script src="js/js/swiper/idangerous.swiper2.7.6.min.js"></script>

    <script src="js/js/index.js"></script>

</body>

</html>

index.css

@charset "utf-8";


* {

    margin: 0;

    left: 0;

}


html,

body {

    width: 100%;

    height: 100%;

}


.swiper-container {

    width: 100%;

    height: 100%;

}


.swiper-wrapper {

    width: 100%;

    height: 100%;

}


.swiper-slide {

    width: 100%;

    height: 100%;

}


.bg-1 {

    background: url('http://climg.mukewang.com/59f2f3c60001e51206000600.jpg');

}


.bg-2 {

    background: url('http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg');

}


.bg-3 {

    background: url('http://climg.mukewang.com/59f2f3fb0001725305000707.jpg');

}

index.js

var swiper = new Swiper('.swiper-container', {

  mode: 'horizontal',

  autoplay: 2000,

  loop: true,

  speed:500

});


写回答

1回答

好帮手慕码

2020-04-27

同学你好,老师测试图片出现了重复:

http://img.mukewang.com/climg/5ea68abe0960f05d03530627.jpg

建议添加属性:

http://img.mukewang.com/climg/5ea68b1909be583607020249.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 6815 问题

查看课程