明天要考试了，求这道题代码，HTML 100
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li,img{
margin: 0;
padding: 0;
}
div{
width: 992px;
height: 460px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
ul{
list-style: none;
width: 3968px;
height: 460px;
position: absolute;
top: 0px;
left: 0px;
}
ul>li{
width: 992px;
height: 460px;
float: left;
}
.box{
width: 992px;
height: 200px;
margin: 0 auto;
}
ol{
list-style: none;
width: 992px;
height: 200px;
}
ol>li{
float: left;
width: 200px;
height: 92px;
margin-left: 20px;
}
span{
display: block;
width: 60px;
height: 460px;
background: #000000;
opacity: 0.4;
text-align: center;
line-height: 460px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
#btnLeft{
position: absolute;
left: 0px;
top: 0px;
}
#btnRight{
position: absolute;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/0.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
</ul>
<span id="btnLeft">《</span>
<span id="btnRight">》</span>
</div>
<div class="box">
<ol>
<li><img src="img/0.jpg"/ width="200px" height="92px"></li>
<li><img src="img/1.jpg"/ width="200px" height="92px"></li>
<li><img src="img/2.jpg"/ width="200px" height="92px"></li>
<li><img src="img/3.jpg"/ width="200px" height="92px"></li>
</ol>
</div>
</body>
<script type="text/javascript">
var d = document.getElementsByTagName('div')[0]
var ulBox = document.getElementsByTagName('ul')[0]
var btnLeft = document.getElementById('btnLeft')
var btnRight = document.getElementById('btnRight')
var olBOx = document.getElementsByTagName('ol')[0]
var olLiArr = olBOx.getElementsByTagName('li')
var zd = null
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].index = i
olLiArr[i].onclick = function(){
clearInterval(zd)
ulBox.style.left = -(this.index * 992) + 'px'
sj()
}
}
btnLeft.onclick=function(){
var leftLen = ulBox.offsetLeft
if(leftLen <= 0 ){
return
}
ulBox.style.left = (leftLen + 992) + 'px'
ulBox.style.transition = '0.4s'
}
btnRight.onclick=function(){
var leftLen = ulBox.offsetLeft
if(leftLen <= -2976){
return
}
ulBox.style.left = (leftLen - 992) + 'px'
ulBox.style.transition = '0.4s'
}
d.onmousemove=function(){
clearInterval(zd)
}
d.onmouseout=function(){
sj()
}
function sj(){
zd = setInterval(function(){
var leftLen = ulBox.offsetLeft
if(leftLen <= -2976){
ulBox.style.left = 0 + 'px'
return
}
ulBox.style.left = (leftLen - 992) + 'px'
ulBox.style.transition = '0.4s'
},2000)
}
sj()
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li,img{
margin: 0;
padding: 0;
}
div{
width: 992px;
height: 460px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
ul{
list-style: none;
width: 3968px;
height: 460px;
position: absolute;
top: 0px;
left: 0px;
}
ul>li{
width: 992px;
height: 460px;
float: left;
}
.box{
width: 992px;
height: 200px;
margin: 0 auto;
}
ol{
list-style: none;
width: 992px;
height: 200px;
}
ol>li{
float: left;
width: 200px;
height: 92px;
margin-left: 20px;
}
span{
display: block;
width: 60px;
height: 460px;
background: #000000;
opacity: 0.4;
text-align: center;
line-height: 460px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
#btnLeft{
position: absolute;
left: 0px;
top: 0px;
}
#btnRight{
position: absolute;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/0.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
</ul>
<span id="btnLeft">《</span>
<span id="btnRight">》</span>
</div>
<div class="box">
<ol>
<li><img src="img/0.jpg"/ width="200px" height="92px"></li>
<li><img src="img/1.jpg"/ width="200px" height="92px"></li>
<li><img src="img/2.jpg"/ width="200px" height="92px"></li>
<li><img src="img/3.jpg"/ width="200px" height="92px"></li>
</ol>
</div>
</body>
<script type="text/javascript">
var d = document.getElementsByTagName('div')[0]
var ulBox = document.getElementsByTagName('ul')[0]
var btnLeft = document.getElementById('btnLeft')
var btnRight = document.getElementById('btnRight')
var olBOx = document.getElementsByTagName('ol')[0]
var olLiArr = olBOx.getElementsByTagName('li')
var zd = null
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].index = i
olLiArr[i].onclick = function(){
clearInterval(zd)
ulBox.style.left = -(this.index * 992) + 'px'
sj()
}
}
btnLeft.onclick=function(){
var leftLen = ulBox.offsetLeft
if(leftLen <= 0 ){
return
}
ulBox.style.left = (leftLen + 992) + 'px'
ulBox.style.transition = '0.4s'
}
btnRight.onclick=function(){
var leftLen = ulBox.offsetLeft
if(leftLen <= -2976){
return
}
ulBox.style.left = (leftLen - 992) + 'px'
ulBox.style.transition = '0.4s'
}
d.onmousemove=function(){
clearInterval(zd)
}
d.onmouseout=function(){
sj()
}
function sj(){
zd = setInterval(function(){
var leftLen = ulBox.offsetLeft
if(leftLen <= -2976){
ulBox.style.left = 0 + 'px'
return
}
ulBox.style.left = (leftLen - 992) + 'px'
ulBox.style.transition = '0.4s'
},2000)
}
sj()
</script>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
