求解京东轮播图下面这个是怎么写的

html-css012

求解京东轮播图下面这个是怎么写的,第1张

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>HOME</title>

<style>

.div1 {

float:  left

padding: 5px

display: inline-block

border-radius: 50%

line-height: 0

}

.div1.active {

background-color: #ddddddb8

}

.div2 {

height: 10px

width: 10px

border-radius: 50%

border: 2px solid #dddddda6

display:  inline-block

}

.div1.active .div2{

border: 2px solid transparent

background-color: #fff

}

</style>

</head>

<body class="non-google-page inited" style="background: rgb(67, 77, 193)">

<div class="div1 active" id='d1'>

<div></div>

</div>

<div id='d2'>

<div></div>

</div>

<div id='d3'>

<div></div>

</div>

<div id='d4'>

<div></div>

</div>

<div id='d5'>

<div></div>

</div>

</body>

<script>

setInterval(function(){

var active = document.getElementsByClassName("active")[0]

active.classList.remove('active')

var id = parseInt(active.id.replace('d',''))

if(id<5){

id++

}else{

id=1

}

document.getElementById("d"+id).classList.add('active')

}, 1200)

</script>

</html>

<div class="div1">

    <div class="div2">

        <p>111111111111111111111</p>

        <p>211111111111111111111</p>

        <p>311111111111111111111</p>

        <p>411111111111111111111</p>

        <p>511111111111111111111</p>

        <p>611111111111111111111</p>

        <p>711111111111111111111</p>

        <p>2211111111111111111111</p>

        <p>331111111111111111111</p>

        <p>441111111111111111111</p>

        <p>551111111111111111111</p>

        <p>661111111111111111111</p>

        <p>771111111111111111111</p>

        <p>881111111111111111111</p>

        <p>991111111111111111111</p>

        <p>001111111111111111111</p>

    </div>

</div> .div1 {

width:200px

height:200px

overflow:hidden

margin:auto

position:relative

}

@keyframes anis {

100% {

transform:translateY(-200px)

}

}img {

position:absolute

}

.div2 {

animation:anis 10s linear infinite

}

.div2:hover {

animation-play-state:paused

}

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。