<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 700px;
height: 300px;
border: 1px solid #ccc;
margin: 20px auto;
position: relative;
overflow: hidden;
}
/* .box:hover .right-a,.box:hover .left-a{
display: block;
}*/
#box #title {
height: 30px;
width: 100%;
background: #eee;
position: relative;
}
#box #title a {
text-decoration: none;
width: 20%;
height: 100%;
line-height: 30px;
font-size: 15px;
color: #009797;
float: left;
text-align: center;
position: relative;
}
#box #content {
width: 700px;
height: 270px;
position: relative;
}
#box #content #main{
width:3500px;
height: 270px;
position: absolute;
left:0;
top:0;
}
#box #content #main div {
width: 700px;
height: 270px;
float: left;
color: white;
font-size: 50px;
text-align: center;
line-height: 270px;
}
#box #left-a {
height: 70px;
width: 50px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 45%;
color: white;
font-size: 20px;
line-height: 70px;
text-align: center;
cursor: pointer;
display: none;
}
#box #right-a {
height: 70px;
width: 50px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 45%;
right: 0;
color: white;
font-size: 20px;
line-height: 70px;
text-align: center;
cursor: pointer;
display: none;
}
#box #content #main #color1 {
background: #ffb12f;
}
#box #content #main #color2 {
background: #00C378;
}
#box #content #main #color3 {
background: #26B2E3;
}
#box #content #main #color4 {
background: #E84C3D;
}
#box #content #main #color5 {
background: #F831FD;
}
</style>
</head>
<body>
<div id="box">
<div id="title">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<!--<div id="float"></div>-->
</div>
<div id="content">
<div id="main">
<div id="color1">page1</div>
<div id="color2">page2</div>
<div id="color3">page3</div>
<div id="color4">page4</div>
<div id="color5">page5</div>
</div>
</div>
<div id="left-a"><</div>
<div id="right-a">></div>
</div>
</body>
</html>
下面是js的内容window.onload = function () {
var box = document.getElementById('box');
var oTitle = document.getElementById('title');
var links = oTitle.getElementsByTagName('a');
var float = document.getElementById('float');
var oContent = document.getElementById('content');
//var divs = oContent.getElementsByTagName('div');
var oLeft = document.getElementById('left-a');
var oRight = document.getElementById('right-a');
var oMain = document.getElementById('main');
var timer = null;
var num1 = 0;
var num2 = 0;
box.onmouseover = function () {
oLeft.style.display = 'block';
oRight.style.display = 'block';
}
box.onmouseout = function () {
oLeft.style.display = 'none';
oRight.style.display = 'none';
}
for(var i=0;i<links.length;i++){
links[i].index = i;
links[i].onclick = function () {
for(var j=0;j<links.length;j++){
links[j].style.background = 'none';
}
this.style.background = 'red';
startMove(oMain,{left:-this.index*700})
}
}
}
function startMove(obj,json,fn){
var flag = true;//假设所有目标都到达目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取当前的值
var icur = 0;
if(attr =='opacity'){
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
}else{
icur=parseInt(getStyle(obj, attr));
}
//2.算速度
var speed = (json[attr]-icur)/3;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur!=json[attr]){
flag = false;
}
if(attr=='opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity =(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fun();
}
}
},30);
}没做完，做到这我发现要是本来在1的时候点5中间可以看到是从234这几张图片这样过去的，我看那些用jquery做的1和5切换中间就不会这样，但是我还不会jquery，所以想请教一下大神该怎么解决这个问题啊
2 回答
马崇瀚
TA贡献4条经验 获得超0个赞
给你个思路...
你排图片是1 2 3 4 5,
现在需要排成5 1 2 3 4 5 1，
点击的时候判断，如果点击5，并且当前在1，就会往回退，动画结束后位置弹到第二个5，
如果点击1，并且当前在5，就会往前进，动画结束后位置弹到第一个1，
添加回答
举报
0/150
提交
取消