额外附加作业----仿网易轮播图

最新推荐文章于 2018-11-10 23:40:16 发布

酷扬

最新推荐文章于 2018-11-10 23:40:16 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/aa8869138/article/details/68925889

版权

html 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

html css

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.all{ width: 310px;
height: 250px;
margin: 100px auto;
/* border: 1px solid #00f;*/
position: relative;
overflow:hidden;
}
.all ul{
list-style: none;
width: 3000px;
position: absolute;
top:0px;
left:-310px;

}
.all ul li{
float:left;
}
.bom{
width: 35px;
height: 15px;
background: url(icon.png) no-repeat 0px -658px;
cursor:pointer;
float:left;

margin-left:10px;
}
.tao{
position:absolute;
bottom: 10px;
left: 15px;
}
.left{
position:absolute;
top:100px;
left:0px;
z-index: 1;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.2) url(icon.png) no-repeat 0px 0px;
cursor:pointer;
}
.right{
cursor:pointer;
position:absolute;
top:100px;
right:0px;
z-index: 1;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.2) url(icon.png) no-repeat 0px -40px;
}
</style>
</head>
<body>
<div class="all">
<ul id="ul">
<li><img src="6.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
</ul>
<div class="left"></div>
<div class="right"></div>
<div class="tao">
<div class="bom"></div>
<div class="bom"></div>
<div class="bom"></div>
<div class="bom"></div>
<div class="bom"></div>
<div class="bom"></div>
</div>
</div>
<script type="text/javascript">
function $div(i){
return document.getElementsByTagName("div")[i];
}
var ul = document.getElementById("ul");
var sta=-310,over=-310,num=0,timer=null,i=4,f=-638,g=-658;
timer=setInterval($fun,2000);
$div(0).οnmοuseοut=function (){
timer=setInterval($fun,2000);
}
$div(0).οnmοuseοver=function (){
clearInterval(timer);
}
$div(4).style.backgroundPosition="0px -638px";
function $fun(){
over-=310;
if(i>=9){
i=3;
}
$div(9).style.backgroundPosition="0px -658px";
$div(i).style.backgroundPosition="0px -658px";
$div(i+1).style.backgroundPosition="0px -638px";
i++;
}
setInterval(fun,30);
function fun(){
if(over<=-2170){
over=-310;
}
else if(over>=310){
over=-1550;
}
sta=sta+(over-sta)/10;

ul.style.left=sta+"px";
}
$div(2).οnclick=function (){
over-=310;
if(i>=9){
i=3;
}
$div(9).style.backgroundPosition="0px -658px";
$div(i).style.backgroundPosition="0px -658px";
$div(i+1).style.backgroundPosition="0px -638px";
i++;

}
$div(1).οnclick=function (){
over+=310;
if(i==3){
i=9;
}

$div(i).style.backgroundPosition="0px -658px";
$div(i-1).style.backgroundPosition="0px -638px";

if(i<=4){
i=10;
$div(9).style.backgroundPosition="0px -638px";
$div(4).style.backgroundPosition="0px -658px";
}
i--;
}
function $$$(k,j){
$div(j).οnclick=function (){
over=k;
i=j;
for(var f=4;f<10;f++){
$div(f).style.backgroundPosition="0px -658px";
}
this.style.backgroundPosition="0px -638px";
}
}
$$$(-310,4);
$$$(-620,5);
$$$(-930,6);
$$$(-310*4,7);
$$$(-310*5,8);
$$$(-310*6,9);
</script>
</body>
</html>

酷扬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
额外附加作业----仿网易轮播图

Document*{padding: 0;margin: 0;} .all{ width: 310px;height: 250px;margin: 100px auto;/* border: 1px solid #00f;*/position: relative;overflow:hidden;} .all ul{
复制链接

扫一扫