json版的轮播图

来源：互联网发布：大数据主要来源于哪些编辑：程序博客网时间：2024/06/09 17:11

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style type="text/css">

.show_div{
width: 400px;
height: 400px;
border: 3px red solid;
overflow: hidden;
}
.scroll_div{

height: 400px;

}
.scroll_div div{
position: relative;
width: 400px;
height: 400px;
float: left;
background-color: cyan;
/*border-right: 1px solid gray;*/

}
.scroll_div div img{
width: 400px;
height: 400px;

}
.scroll_div p{
position: absolute;
bottom: 0;
margin: 0;
width: 400px;
height: 30px;
background-color: black;
text-align: center;
color: white;
opacity: 0.5;
font-size: 20px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="show_div">
<div class="scroll_div">

</div>
</div>
</body>
<script type="text/javascript" src="js/swiper-3.4.2.min.js">

</script>

<script type="text/javascript">
var showDiv=document.getElementsByClassName('show_div')[0];
var scrollDiv=document.getElementsByClassName('scroll_div')[0];
var data=[
{url:'img/05.jpg',title:'美女1'},
{url:'img/09.jpg',title:'美女2'},
{url:'img/07.jpg',title:'美女3'},
{url:'img/08.jpg',title:'美女4'}];
scrollDiv.style.width=400*(data.length+1)+"px";
//创建节点（标签）document.createElement('标签名')
//var myDiv=document.createElement('div');
//插入节点（标签）父标签.appendChild(子标签)
//插入多个标签不会覆盖
// showDiv.appendChild(myDiv);
for(var i=0;i<data.length;i++){
//每循环一次创建一个div标签因为（div数量是由数据的数量决定的，不能写固定，需要动态生成）
var myDiv=document.createElement('div');
//在每个div里面添加img和p标签（图片和标题）
//第一种：使用innerHTML 拼接字符串
myDiv.innerHTML='<img src="'+data[i].url+'"> <p>'+data[i].title+'</p>';
//第二种方法使用document.createElement创建标签在使用appendChild添加到myDiv中
var myImg=document.createElement('img');
var myP=document.createElement('p');
myDiv.appendChild(myImg);
myDiv.appendChild(myP);
//设置img的src属性值 p标签中的内容
myP.innerHTML=data[i].title;
//设置属性使用‘.’+属性名
//注意：class是保留字，设置Class属性的时候使用className
myImg.src=data[i].url;

//把创建的div放进scrolldiv里面
scrollDiv.appendChild(myDiv);
}
//定义初始值
var left=0;
function move(){
//创建定时器滚动一张图片
var timer=setInterval(function(){
//让初始值逐渐减小
left-=4;
//当left对400取余等于0时清除定时器（每张图片的宽度是400）
if(left%400==0){

clearInterval(timer);
timer=null;
}
//把left值赋值给scrollDiv的marginLeft属性以改变他的位置
scrollDiv.style.marginLeft=left+"px";
},20);}
//创建定时器每个固定时间滚动一张图片
setInterval(function(){
//图片头接尾
if(left<=-1200){
left=0;
}
//每3秒调用滚动一张图片的函数
move();
},3000);

</script>
</html>

阅读全文

0 0