请哥哥姐姐们帮我看看这个轮播图为啥实现不了？郁闷

滴滴-学生卡 2018-06-01 01:04:33
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
ul{
list-style-type: none;
}


.pre{
position: absolute;
left:212px;
top:200px;
width: 22px;
height: 22px;
background:url(images/raw_left.png);
background-size: cover;
}


.next{
position: absolute;
left:1205px;
top:200px;
width: 22px;
height: 22px;
background:url(images/raw_right.png);
background-size: cover;
}


.picc1{
position: absolute;
left: 535px;
top:100px;
opacity: 1;
z-index: 5;
}


.picc2{
position: absolute;
left:450px;
top:111px;
opacity: 0.7;
z-index: 3;
}


.picc3{
position: absolute;
left:365px;
top:122px;
opacity: 0.4;
z-index: 1;

}


.picc4{
position: absolute;
left:784px;
top:122px;
opacity: 0.4;
z-index: 1;
}


.picc5{

position: absolute;
left:660px;
top:111px;
opacity: 0.7;
z-index: 3;
}


</style>
<script>

window.onload=function(){

var opre=document.getElementsByClassName('pre');

var onext=document.getElementsByClassName('next');

ali=document.getElementsByTagName("li");

var arr=[];

for(var i=0;i<ali.length;i++){

var oimg=ali[i].getElementsByTagName('img')[0];
arr.push([parseInt(getStyle(ali[i],'left')),parseInt(getStyle(ali[i],'top')),getStyle(ali[i],'opacity')*100,getStyle(ali[i],'zindex'),oimg.width]);

}
opre.onclick=function(){

arr.push(arr[0]);

arr.shift();

for(var i=0;i<ali.length;i++){

var oimg=ali[i].getElementsByTagName('img')[0];

ali[i].style.zIndex=arr[i][3];

startMove(ali[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][2]});

startMove(oimg,{width:arr[i][4]});
}

}
onext.onclick=function(){

arr.unshift(arr[arr.length-1]);

arr.pop();

for(var i=0;i<ali.length;i++){

var oimg=ali[i].getElementsByTagName('img')[0];

ali[i].style.zIndex=arr[i][3];

startMove(ali[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][2]});

startMove(oimg,{width:arr[i][4]});
}

}
}
function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>

<body>
<div class="pre"></div>

<div class="next"></div>

<ul>
<li class="picc1"><img src="images/raw_1526215180.jpeg" width="368px" alt=""></li>
<li class="picc2"><img src="images/raw_1526215180.jpeg" width="326px" alt=""></li>
<li class="picc3"><img src="images/raw_1526215180.jpeg" width="284px" alt=""></li>
<li class="picc4"><img src="images/raw_1526215180.jpeg" width="284px" alt=""></li>
<li class="picc5"><img src="images/raw_1526215180.jpeg" width="326px" alt=""></li>
</ul>





</body>
</html>
...全文
387 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
滴滴-学生卡 2018-06-02
  • 打赏
  • 举报
 回复
引用 10 楼 u013116426 的回复:
[quote=引用 9 楼 de_debug 的回复:] 不过咋给分啊，第一次用
点结贴按钮[/quote] 这个轮播现在可以播放了，但是我发现z-index却并没有变化，比如说在最上面的图片在轮播的过程中一直还是在最上面，麻烦你再帮我看一下可以吗？/
___紫菜 2018-06-01
  • 打赏
  • 举报
 回复
引用 9 楼 de_debug 的回复:
不过咋给分啊，第一次用
点结贴按钮
滴滴-学生卡 2018-06-01
  • 打赏
  • 举报
 回复
不过咋给分啊，第一次用
滴滴-学生卡 2018-06-01
  • 打赏
  • 举报
 回复
引用 7 楼 u013116426 的回复:
[quote=引用 6 楼 de_debug 的回复:] [quote=引用 4 楼 u013116426 的回复:] [quote=引用 3 楼 de_debug 的回复:] var opre = document.getElementsByClassName('pre')[0]; var onext = document.getElementsByClassName('next')[0]; 我换成了这个还是不行。。
我用着可以啊， 那你用id吧[/quote] 你有用我的代码试吗?[/quote] 当然[/quote] 用别人的电脑试了一下，还真可以，原来是电脑还是浏览器的问题啊，不过呢，还是谢谢你了啊
___紫菜 2018-06-01
  • 打赏
  • 举报
 回复
引用 6 楼 de_debug 的回复:
[quote=引用 4 楼 u013116426 的回复:] [quote=引用 3 楼 de_debug 的回复:] var opre = document.getElementsByClassName('pre')[0]; var onext = document.getElementsByClassName('next')[0]; 我换成了这个还是不行。。
我用着可以啊， 那你用id吧[/quote] 你有用我的代码试吗?[/quote] 当然
滴滴-学生卡 2018-06-01
  • 打赏
  • 举报
 回复
引用 4 楼 u013116426 的回复:
[quote=引用 3 楼 de_debug 的回复:] var opre = document.getElementsByClassName('pre')[0]; var onext = document.getElementsByClassName('next')[0]; 我换成了这个还是不行。。
我用着可以啊， 那你用id吧[/quote] 你有用我的代码试吗?
Qin_baby 2018-06-01
  • 打赏
  • 举报
 回复
改成ID吧 var imgs_div=document.getElementById("imgs"); var nav_div=document.getElementById("nav"); //获取到图片轮播的ul对象数组 var imgsUl=imgs_div.getElementsByTagName("ul")[0]; //获取到远点的ul对象数组 var nav=nav_div.getElementsByTagName("ul")[0]; //上一个 var prious=document.getElementById("preous"); //下一个 var next =document.getElementById("next");
___紫菜 2018-06-01
  • 打赏
  • 举报
 回复
引用 3 楼 de_debug 的回复:
var opre = document.getElementsByClassName('pre')[0]; var onext = document.getElementsByClassName('next')[0]; 我换成了这个还是不行。。
我用着可以啊， 那你用id吧
滴滴-学生卡 2018-06-01
  • 打赏
  • 举报
 回复
var opre = document.getElementsByClassName('pre')[0]; var onext = document.getElementsByClassName('next')[0]; 我换成了这个还是不行。。
___紫菜 2018-06-01
  • 打赏
  • 举报
 回复
var opre = document.getElementsByClassName('pre')[0]; var onext = document.getElementsByClassName('next')[0]; var opre = document.getElementById('pre'); var onext = document.getElementByI的('next'); 返回的是集合不是这个元素对象 或者你可以用id来获取对象
滴滴-学生卡 2018-06-01
  • 打赏
  • 举报
 回复
ubhz射频收发器 头豹词条报告系列-17页.pdf.zip
行业报告 文件类型：PDF格式 打开方式：双击打开，无解压密码 大小：10M以内
数模转换芯片DAC_AD5328BRUZ-REEL7_规格书.pdf
数模转换芯片DAC_AD5328BRUZ-REEL7_规格书_ADI(亚德诺)_LINEAR(凌特)数模转换芯片DAC规格书，中文数据手册，适合硬件电路设计开发人员使用。
psd电脑模版010.psd
psd电脑模版010.psd
项目案例-班级管理系统
一：需求分析 1.功能需求 1).能够实现对班级学生基本资料的录入，包括学生的学号，姓名，性别，所学专业，家庭住址以及出生年月等。 2).能够实现对学生基本资料的修改。 3).根据学号对学生资料进行查询。 4).能够删除某些学生的资料。 二：总体设计 本班级管理系统共有6个java源文件。 类之间的主要关系如下图所示： 各主类的主要作用如下： 1).StudentManager.java 该java文件的类负责创建班级学生管理系统的主窗口。该类包含main方法，程序从该类开始执行。 2).StudentStituation.java 该文件的类负责创建班级学生管理系统的学生信息录入界面。 3).ModifySituation.java 该文件的类负责创建班级学生管理系统的学生基本信息修改界面。 4).Inquest.java 该文件的类负责创建班级学生管理系统的学生基本信息查询界面。 5).Delete.java 该文件的类负责创建班级学生管理系统的学生信息删除界面。 6).Student.java 负责创建存放学生信息的对象。
简单的基于SSM框架的在线商城系统.zip
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 -------- 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
JavaScript

87,839

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章