js轮播图的问题 25
html和CSS<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</titl...
html和CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link href="qwe.css" rel="stylesheet"/> -->
<style>
.nav li{
float:left;
width:300px;
height:150px;
background: gray;
}
ul,li{
margin:0;
padding:0;
}
.nav after{
content:"";
height:0;
display: block;
visibility: hidden;
clear:both;
}
.nav{
width:900px;
position: relative;
left:0px;
}
.box{
width:300px;
overflow:hidden;
}
.btn{
width:50px;
height:50px;
background: red;
text-align:center;
line-height:50px;
position: absolute;
left:10;
top:55px;
z-index: 2;
}
.bto{
width:50px;
height:50px;
background: red;
line-height:50px;
position: absolute;
left:258px;
top:55px;
}
</style>
</head>
<body>
<div class="box">
<div class="btn" id="btn">上一页</div>
<ul class="nav" id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="bto">下一页</div>
</div>
<script src="ert.js">
</script>
</body>
</html>
JS
document.getElementById('btn');
document.getElementById('nav');
btn.onclick=function(){
if(0,-600){
nav.style.left=parseInt(getCss(nav).left)-300+"px";
}else{
parseInt(getCss(nav).left)-300+"px"
}
}
function getCss(dom){
if(!dom.currentStyle){
return window.getComputedStyle(dom,null)
}else{
return dom.currentStyle
}
}我想知道这个else怎么写可以当按钮到三的时候直接返回第一页 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link href="qwe.css" rel="stylesheet"/> -->
<style>
.nav li{
float:left;
width:300px;
height:150px;
background: gray;
}
ul,li{
margin:0;
padding:0;
}
.nav after{
content:"";
height:0;
display: block;
visibility: hidden;
clear:both;
}
.nav{
width:900px;
position: relative;
left:0px;
}
.box{
width:300px;
overflow:hidden;
}
.btn{
width:50px;
height:50px;
background: red;
text-align:center;
line-height:50px;
position: absolute;
left:10;
top:55px;
z-index: 2;
}
.bto{
width:50px;
height:50px;
background: red;
line-height:50px;
position: absolute;
left:258px;
top:55px;
}
</style>
</head>
<body>
<div class="box">
<div class="btn" id="btn">上一页</div>
<ul class="nav" id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="bto">下一页</div>
</div>
<script src="ert.js">
</script>
</body>
</html>
JS
document.getElementById('btn');
document.getElementById('nav');
btn.onclick=function(){
if(0,-600){
nav.style.left=parseInt(getCss(nav).left)-300+"px";
}else{
parseInt(getCss(nav).left)-300+"px"
}
}
function getCss(dom){
if(!dom.currentStyle){
return window.getComputedStyle(dom,null)
}else{
return dom.currentStyle
}
}我想知道这个else怎么写可以当按钮到三的时候直接返回第一页 展开
1个回答
展开全部
btn.onclick=function(){
if(nav.offsetLeft>-500){
nav.style.left=parseInt(getCss(nav).left)-300+"px";
//alert(nav.offsetLeft)
}else{
nav.style.left=0;
}
}nav.offsetLeft是获取指定元素的左侧边距（不带单位px，要赋值时记得+'px'，值为0时可以不带单位）。
通过改变nav的左位置来显示内容，则left为0时显示为1框，-300为2框，-600显示3，当值为-600就要执行到else上，在else上回到1框。
所以if()成立的条件是nav的左边距（offsetLeft）>=-600时成立，可以取的值值[-600,-300),超过则回到0（即1）。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
