会python真的可以为所欲为0(回)
398天前
这里还有人吗1(回)
583天前这里还有人吗0(回)
583天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
808天前到处都是羊，不想上班0(回)
888天前
鸽子
0(回)
892天前<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<title>位置变化的轮播效果</title> |
<!-- <link rel="stylesheet" href="css/lunbo2.css"> --> |
<style> |
*{ |
margin: 0; |
padding: 0; |
} |
ul,ol{ |
list-style: none; |
} |
/*消除图片底部3像素距离*/ |
img{ |
vertical-align: top; |
} |
a{ |
text-decoration: none; |
} |
|
|
.lunbo2{ |
width:600px; |
height:400px; |
margin:100px auto; |
position:relative; |
overflow:hidden; |
border:1px solid red; |
} |
.lunbo2>ul{ |
width:700%; |
height:100%; |
position: absolute; |
left:-600px; |
border:1px solid blue; |
} |
.lunbo2>ul>li{ |
float:left; |
} |
.lunbo2>ul>li>a>img{ |
width:600px; |
height:400px; |
} |
.lunbo2>.prev{ |
display: block; |
/*background:red;*/ |
font-size:80px; |
color:#000; |
position: absolute; |
top:150px; |
left:20px; |
z-index:1; |
opacity:0.3; |
} |
.lunbo2>.next{ |
display: block; |
/*background:red;*/ |
font-size:80px; |
color:#000; |
position: absolute; |
top:150px; |
right:20px; |
z-index:1; |
opacity:0.3; |
} |
.lunbo2>.prev:hover,.lunbo2>.next:hover{ |
opacity:0.7; |
} |
.lunbo2>ol{ |
position: absolute; |
right: 10px; |
bottom: 10px; |
} |
.lunbo2>ol>li{ |
float:left; |
width:28px; |
height:28px; |
text-align: center; |
line-height: 27px; |
border-radius:50px; |
background:#c8c8c8; |
} |
.lunbo2>ol>li.on{ |
background:red; |
} |
</style> |
</head> |
<body> |
<div id="lunbo2" class="lunbo2"> |
<ul id="ul"> |
<li><a href="#"><img src="images/0001.png" alt=""></a></li> |
<li><a href="#"><img src="images/0002.png" alt=""></a></li> |
<li><a href="#"><img src="images/0003.png" alt=""></a></li> |
<li><a href="#"><img src="images/0004.png" alt=""></a></li> |
<li><a href="#"><img src="images/0005.png" alt=""></a></li> |
</ul> |
<a class="prev" id="prev" href="#"><</a> |
<a class="next" id="next" href="#">></a> |
<!-- <ol id="ol"> |
<li class="on">1</li> |
<li>2</li> |
<li>3</li> |
<li>4</li> |
<li>5</li> |
</ol> --> |
</div> |
<script> |
var lunbo2=document.getElementById("lunbo2");// 获得大盒子 |
var ul=document.getElementById("ul");// 获得ul |
var ulList=ul.children; //获取ul的子元素集合 |
var liWidth=ul.children[0].offsetWidth;// 获得每个li的宽度 |
// |
var oldFirstChild=ul.children[0]; |
var firstChild=ul.children[0].cloneNode(true);//复制第一张图片 |
var lastChild=ul.children[ul.children.length-1].cloneNode(true); //复制最后一张图片 |
ul.insertBefore(lastChild,oldFirstChild);//把最后一张图片副本插入到第一 |
ul.appendChild(firstChild);//把第一张图片的副本放到最后 |
// 2.创建ol 和li |
var ol=document.createElement("ol");//创建ol元素 |
lunbo2.appendChild(ol);// 把ol放到scroll盒子里面去 |
for(var i=0;i<ulList.length-2;i++){ |
var li=document.createElement("li");// 创建li元素 |
li.innerHTML=i+1;// 给li里面添加文字 1 2 3 4 5 |
ol.appendChild(li);// 将li元素添加到ol里面 |
} |
var olList=ol.getElementsByTagName("li");//获取ol元素的子元素集合 |
ol.children[0].className="on";// ol中的第一个li背景色为red |
var key=1;// 控制播放的张数 |
var timer=null;// 轮播图的定时器 |
var prev=document.getElementById("prev");//获取左按钮 |
var next=document.getElementById("next");//获取右按钮 |
// 设置动画函数 第一个参数，代表谁动 第二个参数 是目标位置 |
// 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed |
function switchImg(obj,traget){ |
clearInterval(obj.timer); |
var speed=obj.offsetLeft>traget ? -15 : 15; |
obj.timer=setInterval(function(){ |
// 如果目标值和当前值的差不够一个步长(速度)，就直接定位在目标位置，并关闭定时器 |
var result=traget-obj.offsetLeft; |
obj.style.left=obj.offsetLeft+speed+"px"; |
if(Math.abs(result)<Math.abs(speed)){ |
clearInterval(obj.timer); |
obj.style.left=traget+"px"; |
} |
},10); |
// 对应小圆点显示 |
// 小圆点颜色发生变化 |
for(var i=0;i<olList.length;i++){ |
olList[i].className=""; |
} |
olList[key-1].className="on";// 给当前的小圆点 添加一个类名 |
} |
/*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1, |
就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/ |
function autoplay(){ |
key++; |
if(key>=ulList.length-1){ |
ul.style.left=0; |
key=1; |
} |
switchImg(ul,-key*liWidth); |
} |
timer=setInterval(autoplay,1000);// 自动轮播 |
//点击左按钮显示下一张 |
function prevImg(){ |
key++; |
if(key>=ulList.length-1){ |
ul.style.left=0; |
key=1; |
} |
switchImg(ul,-key*liWidth); |
} |
//点击右按钮显示上一张 |
function nextImg(){ |
--key; |
if(key<=0){ |
ul.style.left=-(ulList.length-1)*liWidth+"px"; |
key=ulList.length-2; |
} |
switchImg(ul,-key*liWidth); |
} |
prev.onclick=prevImg; |
next.onclick=nextImg; |
lunbo2.onmouseover=function(){ |
clearInterval(timer); |
} |
lunbo2.onmouseout=function(){ |
timer=setInterval(autoplay,1000); |
} |
//鼠标进入小圆点时，显示相应的图片。 |
for(var i=0;i<olList.length;i++){ |
olList[i].index=i+1; |
olList[i].onmouseover=function(){ |
key=this.index; |
ul.style.left=-key*liWidth+"px"; |
for(var i=0;i<olList.length;i++){ |
olList[i].className=""; |
} |
olList[key-1].className="on"; |
} |
} |
</script> |
</body> |
</html> |
