静态获取图片写法，给定图片的个数，用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="img/b.jpg" alt="">
<img src="img/c.jpg" alt="">
<img src="img/d.jpg" alt="">
<img src="img/a.jpg" alt="">
<img src="img/b.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的话很难实现轮播，轮播一般都是html+js才能完成。
给你一个最简单的html+js轮播例子：
html代码：
<div class="side" id = "lunbo"><ul">
<li><img src="../images/1.jpg"></li>
<li><img src="../images/2.jpg"></li>
<li><img src="../images/3.jpg"></li>
</ul>
</div>
js代码：
var li=document.getElementById('lunbo').getElementsByTagName("li")var num=0
var len=li.length
setInterval(function(){
li[num].style.display="none"
num=++num==len?0:num
li[num].style.display="inline-block"
},3000)//切换时间
<!--html5和app都可,演示地址http://www.swiper.com.cn/demo/index.html--><!--下载Swiper插件并引入-->
<link rel="stylesheet" href="path/to/swiper.min.css">
<script src="path/to/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">图1</div>
<div class="swiper-slide">图2</div>
<div class="swiper-slide">图3</div>
<div class="swiper-slide">图4</div>
<div class="swiper-slide">图5</div>
</div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
loop:true,
})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）