[javascript]代码库
<!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>
会python真的可以为所欲为0(回)
7天前
这里还有人吗1(回)
192天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
417天前
鸽子
0(回)
501天前