JQ轮播图

最新推荐文章于 2022-11-21 20:33:59 发布

细看猥琐猴

最新推荐文章于 2022-11-21 20:33:59 发布

阅读量1.6k

点赞数

分类专栏：作业

作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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:333px;
z-index: 1;
position: absolute;
animation: myfirst 10s infinite;
}
#list img{
float: left;
}
/* @keyframes myfirst {
0%{transform:translateX(0px)}
25%{transform:translateX(-500px)}
50%{transform:translateX(-1000px)}
75%{transform:translateX(-1500px)}
100%{transform:translateX(-2000px)}

}*/
#container{
margin:0 auto;
width:500px;
height:333px;
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-2.0.0.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':-2000+"px"})
}
if(newleft<-2000){
// 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")

index +=1;
showbutton();
animate(-500)
})
prev.bind('click',function(){
// console.log("11111")

index -=1;
showbutton();
animate(+500)
})
})
</script>
</head>
<body>
<div id="container">

</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>

//溢出隐藏
//定位//所有图片平铺的宽度//定位问题利用偏移量进行切换//浮动（不用清除浮动） //层级，使按钮置于顶层//和第一张图片位置比较//归位到第五张图片//和最后一张图片位置比较//归位到第一张图片

细看猥琐猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0...
复制链接

扫一扫