<!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>