怎么用html5+css3 实现图片轮播

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

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

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

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

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

html5如何实现图片轮播

静态获取图片写法,给定图片的个数,用js实现轮播图自动转换。

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Document</title>

<!– *******设置样式********** –>

<style type=”text/css”>

.show_div{

width: 400px;

height: 400px;

margin:  0 auto;

border: 2px solid block;

overflow: hidden;

}

.scroll_div{

width: 2000px;

height: 400px;

}

.scroll_div img{

width: 400px;

height: 400px;

float: left;

}

</style>

<!– end –>

</head>

<body>

<div class=”show_div”>

<div class=”scroll_div”>

<img src=”/data/upload/help/202210/22/44b448dbe9f961714c8c327212f31145.jpg” alt=””>

<img src=”/data/upload/help/202210/22/642d1f1d5a8d1cdd27881a9449c86918.jpg” alt=””>

<img src=”/data/upload/help/202210/22/d68b1827b2fe3fa94d2ea6d29b175e6c.jpg” alt=””>

<img src=”/data/upload/help/202210/22/0e2216be2a57b374e75b17def9b03f42.jpg” alt=””>

<img src=”/data/upload/help/202210/22/44b448dbe9f961714c8c327212f31145.jpg” alt=””>

</div>

</div>

</body>

<!– *********js代码******** –>

<script type=”text/javascript”>

var scrollDiv = document.getElementsByClassName(“scroll_div”)[0];

// 定义初始值

var left =0;

// 定义一个定时器 走一步

function move(){

var timer = setInterval(function(){

left –;

if (left <= -1600) {

left = 0;

}

if (left % -400 == 0) {

clearInterval(timer);

timer = null;

}

scrollDiv.style.marginLeft = left + “px”;

},10);

}

// 定义一个定时器 每隔固定时间 走一张

setInterval(function(){

move();

},5000);

</script>

</html>

html如何做轮播图

<!DOCTYPE html> <html> <head>     <meta charset=”UTF-8″>     <title>CSS3仿JS轮播图</title>     <link rel=”stylesheet” href=”lbimage.css”/> </head> <body>     <div id=”photo”>         <!–//1–>         <input type=”radio” name=”btn” id=”img1″ checked/>         <div>             <div><img src=”/data/upload/help/202210/22/10daeba082d42f121f9df9bab5344f23.jpg”/></div>             <div>                 <label for=”img6″ class=”up leftjianbian”><</label>                 <label for=”img2″ class=”down rightjianbian”>></label>             </div>         </div>         <!–//2–>         <input type=”radio” name=”btn” id=”img2″/>         <div>             <div><img src=”/data/upload/help/202210/22/07b41418de975f7c6e09736a0dfbc994.jpg”/></div>             <div>                 <label for=”img1″ class=”up leftjianbian”><</label>                 <label for=”img3″ class=”down rightjianbian”>></label>             </div>         </div>         <!–//3–>         <input type=”radio” name=”btn” id=”img3″/>         <div>             <div><img src=”/data/upload/help/202210/22/e40e8d4fdd7ef77bf5c2f0c6eb0e9daa.jpg”/></div>             <div>                 <label for=”img2″ class=”up leftjianbian”><</label>                 <label for=”img4″ class=”down rightjianbian”>></label>             </div>         </div>         <!–//4–>         <input type=”radio” name=”btn” id=”img4″/>         <div>             <div><img src=”/data/upload/help/202210/22/941234a04986c0739324c6c36519e925.jpg”/></div>             <div>                 <label for=”img3″ class=”up leftjianbian”><</label>                 <label for=”img5″ class=”down rightjianbian”>></label>             </div>         </div>         <!–//5–>         <input type=”radio” name=”btn” id=”img5″/>         <div>             <div><img src=”/data/upload/help/202210/22/0638882670c5d1313a4f93dff653c870.jpg”/></div>             <div>                 <label for=”img4″ class=”up leftjianbian”><</label>                 <label for=”img6″ class=”down rightjianbian”>></label>             </div>         </div>         <!–//6–>         <input type=”radio” name=”btn” id=”img6″/>         <div>             <div><img src=”/data/upload/help/202210/22/6a62246b8690d38a53837a1164b026f2.jpg”/></div>             <div>                 <label for=”img5″ class=”up leftjianbian”><</label>                 <label for=”img1″ class=”down rightjianbian”>></label>             </div>         </div>         <div>             <label for=”img1″ id=”dot1″></label>             <label for=”img2″ id=”dot2″></label>             <label for=”img3″ id=”dot3″></label>             <label for=”img4″ id=”dot4″></label>             <label for=”img5″ id=”dot5″></label>             <label for=”img6″ id=”dot6″></label>         </div>     </div> </body> </html>

css:部分

@charset “utf-8”;

body{

background-image: url(“images/bbbefb51f8198618b654e23e48ed2e738ad4e69a.jpg”);

background-size: cover;

}

img{

width: 850px;

height: 500px;

}

.photo{

width: 900px;

height: 550px;

border: 1px solid #555555;

margin: auto auto;

position: relative;

background: #ffffff;

box-shadow: 0 10px 80px rgba(0,0,0,.6)

}

.photo input{

display: none;

}

.image{

position: absolute;

top: 0px;

left: 0px;

width: 800px;

height: 450px;

margin: 25px 25px;

transform: scale(0);

opacity: 0;

transition: all 0.7s;

}

.image img{

}

.nav label{

width: 150px;

height: 500px;

margin: 25px 25px;

position: absolute;

z-index: 10;

opacity: 0;

display: none;

cursor: pointer;

transition: opacity 0.2s;

color: #ffffff;

font-size: 50px;

line-height: 450px;

text-align: center;

text-shadow: 0 0 15px #555555);

}

.leftjianbian{

background: linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -o-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -ms-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -moz-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

}

.rightjianbian{

background: linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -o-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -ms-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -moz-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -webkit-linear-gradient(left , rgba(250, 242, 239,0) 10% , rgba(158, 148, 166,0.5) 100%);

}

.image:hover + .nav label{

opacity: 0.5;

}

.nav label:hover{

opacity: 1;

}

.nav .down{

right: 0;

}

input:checked + .control .image{

opacity: 1;

transform: scale(1);

transition: all 1s;

}

input:checked + .control .nav label{

display: block;

}

.dots{

width:100%;

height: 20px;

position: absolute;

bottom: 30px;

text-align: center;

}

.dot{

width: 10px;

height: 10px;

margin: 0px 5px;

border-radius: 50%;

position: relative;

display: inline-block;

background: rgba(0,0,0,0.3);

}

input#img1:checked ~ .dots label#dot1,

input#img2:checked ~ .dots label#dot2,

input#img3:checked ~ .dots label#dot3,

input#img4:checked ~ .dots label#dot4,

input#img5:checked ~ .dots label#dot5,

input#img6:checked ~ .dots label#dot6{

background: rgba(0,0,0,0.7);

}