json版的輪播圖
阿新 • • 發佈：2019-02-19
<!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>
<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>