您的位置：首页 > Web前端 > HTML

html轮播

2019-01-22 13:23 162 查看

CSS实现的轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css简单的轮播</title>
<style>
div{
width: 200px;
height: 300px;
background-color: antiquewhite;
}
img{
width: 140px;
height:200px;
}
</style>
</head>
<body>
<div>
<center>跑马灯</center>
<marquee direction="left" scrollamount="145px" scrolldelay="1000" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" hspace="30px" vspace="50px">
<img src="../0121多媒体/111.jpg" />
<img src="../0121多媒体/222.jpg" />
<img src="../0121多媒体/333.jpg" />
<!--
loop="3" 滚动次数
direction="down" 滚动方向
scrollamount="200px" 每次滚动移动的px
scrolldelay="100" 多少秒滚动一次
behavior="alternate" 来回滚动（怎么滚动）
onmouseover="this.stop()" 鼠标一进去就停止
onmouseout="this.start()" 鼠标出来就开始
hspace
vspace
描述：

-->
</marquee>
</div>
</body>
</html>

js实现的轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播左右来回移动</title>
<style>
.div0{
width: 140px;
height: 200px;
overflow: hidden;/*超出部分隐藏*/
}
#img1{
width: 600px;
height: 200px;
background-color: #DCDCDC;
display: inherit;/*让标签成为行级元素*/

}
</style>
<script>
var times ;
var lemet =0;
var wait;
window.onload = function(){
left1();
}
/**
* 左移的方法
*/
function left1(){
times = setInterval(function(){
lemet--;/*控制轮播速度*/
document.getElementById("img1").style.marginLeft=lemet+"px";/*获取div数据*/
if(lemet<=-280){
clearInterval(times);/*清除定时器*/
wait = setTimeout(/*setTimeout一次性定时器  */
function (){
right1();
},1000/*停一秒再改变方向  */
);

}
},10);
}
/**
* 右移的方法
*/
function right1(){
times = setInterval(function(){/*setInterval定时器  */
lemet++;
document.getElementById("img1").style.marginLeft=lemet+"px";/*获取div数据*/
if(lemet>=0){
clearInterval(times);/*清除定时器*/
wait = setTimeout(/*setTimeout一次性定时器  */
function (){
left1();
},1000
);
}
},10);
}
</script>
</head>
<body>
<div class="div0">
<div id="img1" >
<img src="../0121多媒体/111.jpg" />
<img src="../0121多媒体/222.jpg" />
<img src="../0121多媒体/333.jpg" />
</div>
</div>
</body>
</html>

js实现的轮播2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一直左移（一直右移）</title>
<style>
.div0{
width: 140px;
height: 200px;
overflow: hidden;/*超出部分隐藏*/
}
#img1{
width: 600px;
height: 200px;
background-color: #DCDCDC;
display: inherit;/*让标签成为行级元素*/

}
</style>
<script>
var times ;
var lemet =0;
var wait;
var rightleng = -420;
var lengths = 2;
window.onload = function(){/*页面加载完成后自动执行的方法*/
/*left1();*/
right1();
}
/**
* 左移的方法
*/
function left1(){
times = setInterval(function(){
lemet= lemet-lengths;
/*lemet--;*/
document.getElementById("img1").style.marginLeft=lemet+"px";/*获取div数据*/
if(lemet==-140 || lemet==-280 || lemet==-420){/*每张图片的临界值*/
if(lemet==-420){
lemet = 0;
}
clearInterval(times);/*清除定时器*/
wait = setTimeout(/*setTimeout一次性定时器  */
function (){
left1();/*达到一定限度时重新调用自己（递归）*/
},1000/*停一秒再改变方向  */
);

}
},10);
}
/**
* 右移的方法
*/
function right1(){
times = setInterval(function(){/*setInterval定时器  */
rightleng++;
document.getElementById("img1").style.marginLeft=rightleng+"px";/*获取div数据*/
if(rightleng==0 || rightleng==-280 || rightleng==-140){
if(rightleng==0){
rightleng = -420;
}
clearInterval(times);/*清除定时器*/
wait = setTimeout(/*setTimeout一次性定时器  */
function (){
right1();
},10
);
}
},10);
}
</script>
</head>
<body>
<div class="div0">
<div id="img1" >
<img src="../0121多媒体/111.jpg" />
<img src="../0121多媒体/222.jpg" />
<img src="../0121多媒体/333.jpg" />
<img src="../0121多媒体/111.jpg" />/*假像*/
</div>
</div>
</body>
</html>

js轮播3（终极）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
.div0 {
width: 138px;
height: 200px;
overflow: hidden;
}

#div1 {
width: 600px;
height: 200px;
}

.id {
float: left;
width: 138px;
height: 200px;
background-repeat: no-repeat;
}

#id0 {
background-image: url(../0121多媒体/111.jpg);
}

#id1 {
background-image: url(../0121多媒体/222.jpg);
}

#id2 {
background-image: url(../0121多媒体/333.jpg);
}
</style>
<script>
var timesOne;/*移动的定时器*/
var waitOne;/*等待的定时器*/
var leftmove = 0;/*初始化图片的位置*/
var rightove = 414;/*初始化图片的位置*/
var lenth =10;/*控制移动速度   注意：这个大小要小于等于图片所给的宽度*/
var index= 1;/*每张图片的下标*/
var imgWidth = 138;/*图片的宽度*/
window.onload = function() {
leftMoving();
}

function leftMoving() {
timesOne = setInterval(function() {
leftmove=leftmove-lenth;/*控制移动速度*/
document.getElementById("div1").style.marginLeft = leftmove + "px";
if (leftmove == (-imgWidth*index+imgWidth%lenth)) {
leftmove = -index * imgWidth;
index++;
document.getElementById("div1").style.marginLeft = leftmove + "px";
if (index == 4) {/*最后的一张图片*/
leftmove = 0;/*重新初始化图片的位置*/
index = 1;/*重新初始化图片的位置*/
}
clearInterval(timesOne);
wait = setTimeout(function() {
leftMoving();
}, 1000);/*移动一张图片就停一秒*/
}
}, 10);
}

function rightMoving() {

}
</script>
</head>

<body>
<div class="div0">
<div id="div1">
<div id="id0" class="id"></div>
<div id="id1" class="id"></div>
<div id="id2" class="id"></div>
<div id="id0" class="id"></div>
</div>
</div>
</body>

</html>

js中内存存储的基本原则：
基本数据类型：变量名与值都保存在栈内存中。
对象数据类型：变量名保存在栈内存中，值保存在堆内存中，栈内存中保存堆内存地址。

Js的预编译：
(1)加载全局执行环境
(2)加载自定义全局属性
Js的执行过程
(1)初始化当前执行环境的作用域
(2)变量以及对象的赋值
(3)函数的执行
垃圾回收

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航