5.21作业0.0

最新推荐文章于 2025-12-08 15:41:04 发布

原创最新推荐文章于 2025-12-08 15:41:04 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

作业专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
text-decoration: none;
}
body{
padding:20px;
}

#list{
width: 3000px;
height:400px;
z-index: 1;
position: absolute;
animation: myfirst 10s infinite;
}
#list img{
float: left;
}
/* @keyframes myfirst {
0%{transform:translateX(0px)}
25%{transform:translateX(-600px)}
50%{transform:translateX(-1200px)}
75%{transform:translateX(-1800px)}
100%{transform:translateX(-2400px)}

}*/
#container{
margin:0 auto;
width:600px;
height:400px;
border: 3px solid #333333;
overflow: hidden;
position: relative;

}

#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom:20px;
left:250px;
border-radius: 50%;
background: #333;
margin-left:5px ;
}
#buttons span{
cursor: pointer;
float: left;
border:1px solid #fff;
width:10px;
height: 10px;
border-radius: 50%;
background-color: #333333;
margin-right:5px;
}
#buttons .on{
background:orangered;
}
.arrow{
cursor: pointer;display: none;line-height: 39px;
text-align:center;
font-size: 36px;
font-weight:bold;
width: 40px;
height:40px;
position: absolute;
z-index:2;
top:180px;
background-color: rgba(0,0,0,.3);color: #ffffff;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);}
#container:hover .arrow{
display: block;

}
#prev{left:20px;}
#next{
right: 30px;}
</style>
<script src="jquery-1.8.3.min.js">

</script>
<script type="text/javascript">
$(function(){
var container = $("#container")
var list = $("#list")
var prev= $("#next")
var next= $("#prev")
var buttons = $("#buttons span")
console.log(prev)
var index = 1
function showbutton(){
buttons.eq(index-1).addClass('on').siblings().removeClass("on")
}
function animate(offset){
var newleft = parseInt(list.css("left"))+offset;
console.log(newleft);
list.css({'left':newleft})
if(newleft>0){
//newleft = -2400
// list.css({'left':newleft})
list.css({'left':-2400+"px"})
}
if(newleft<-2400){
// newleft =0
list.css({'left':0+"px"})
}
}
// next.onclick(function({})
/* next.bind('click',function(){
// console.log("11111")
var newleft = parseInt(list.css("left")) - 600;
console.log(newleft);
list.css({'left':newleft})
if(newleft>0){
//newleft = -2400
// list.css({'left':newleft})
list.css({'left':-2400+"px"})
}
if(newleft<-2400){
// newleft =0
list.css({'left':0+"px"})
}
})*/
next.bind('click',function(){
// console.log("11111")