<!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);
}沒做完，做到這我發(fā)現(xiàn)要是本來在1的時候點5中間可以看到是從234這幾張圖片這樣過去的，我看那些用jquery做的1和5切換中間就不會這樣，但是我還不會jquery，所以想請教一下大神該怎么解決這個問題啊
js 實現(xiàn)圖片翻頁問題！
慕九州7009252
2016-12-12 15:41:59
