<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>123</title>
????<style>
????????*{
????????????margin:?0;
????????????padding:?0;
????????????text-align:?center;
????????????list-style-type:?none;
????????}
????????#conter{
????????????position:?relative;
????????????width:?1000px;
????????????height:?600px;
????????????top:?20px;
????????????left:?20px;
????????????border:?3px?#000?solid;
????????????overflow:?hidden;
????????}
????????#div2{
????????????position:?absolute;
????????????width:?6000px;
????????????height:?600px;
????????????/*transition:?all?0.5s;*/
?}
????????#div2?img{
????????????display:?block;
????????????float:?left;
????????}
????????.ul2{
????????????z-index:?2;
????????????position:?absolute;
????????????top:?90%;
????????????left:?50%;
????????????margin-left:?-120px;
????????}
????????.ul2?li{
????????????display:?inline-block;
????????????width:?30px;
????????????height:?30px;
????????????border-radius:?30px;
????????????background:?rgba(239,?243,?245,?0.64);
????????????color:?black;
????????????font-weight:?bold;
????????????line-height:?30px;
????????????margin:?0?15px;
????????}
????????span{
????????????position:?absolute;
????????????width:?50px;
????????????height:?50px;
????????????top:?45%;
????????????background:?#eff3f5;
????????????z-index:?2;
????????????cursor:pointer
?}
????????span:first-of-type{
????????????left:?0;
????????}
????????span:last-child{
????????????right:?0;
????????}
????????.bold{
????????????background:black?!important;
????????????color:#fff?!important;
????????}
????</style>
????<script>
????????window.onload?=?function(){
????????????var?onTer?=document.getElementById("conter");
????????????var?oDiv?=?document.getElementById("div2")
????????????var?oImg?=?oDiv.getElementsByTagName("img");
????????????var?oSpan1=?document.getElementsByTagName("span")[0];
????????????var?oSpan2=?document.getElementsByTagName("span")[1];
????????????var?btn?=?document.getElementsByTagName('li');
????????????var?index?=?0;
????????????var?hans?=?3000;
????????????function?bttn(){
????????????????for(var?i=0;?i<btn.length;?i++){
????????????????????if(btn[i].className?==?'bold'){
????????????????????????btn[i].className?=?"?"
?break;
????????????????????}
????????????????}
????????????????btn[index].className?='bold'
?}
????????????function?runner(oLft){
????????????????var?newLeft?=?parseFloat(oDiv.style.left)?-?oLft;
????????????????var?margin?=?parseInt(oDiv.style.left);
????????????????var?time?=?500;
????????????????var?inteval?=?10;
????????????????var?i?=?time/inteval;
????????????????var?speed?=?oLft/i;
????????????????console.log(speed)
????????????????var?go?=?function(){
????????????????????//?----就是這里判斷，這個?setTimeout?不知道為啥不執行----//
?????????????????????????if(?(speed?>?0?&&?margin?<?newLeft)?||?(speed?<?0?&&?margin?>?newLeft))?{
????????????????????????oDiv.style.left?=?margin?+?speed?+?'px';
????????????????????????console.log("當前距離是："?+margin)
????????????????????????setTimeout(go,?inteval);
????????????????????}
?????????????????????else{
????????????????????????oDiv.style.left?=newLeft?+?'px';
????????????????????????if(newLeft?>?-1000){
????????????????????????????oDiv.style.left?=?-4000?+?"px";
????????????????????????????console.log(234)
????????????????????????}
????????????????????????if(newLeft?<?-4000){
????????????????????????????oDiv.style.left?=?-1000?+?"px";
????????????????????????}
????????????????????}
?????????????????}
?????????????????go()
????????????}
????????????function?play()?{
????????????????timer?=?setTimeout(function?()?{
????????????????????oSpan2.onclick();
????????????????????play();
????????????????},?3000);
????????????}
????????????function?stop()?{
????????????????clearTimeout(timer);
????????????}
????????????oSpan2.onclick=function(){
????????????????if(index==3){
????????????????????index=0
?//?console.log('1'+index)
?}else{
????????????????????index?+=1
?//?console.log('2'+index)
?}
????????????????//?console.log('3'+index)
?runner(1000);
????????????????bttn();
????????????}
????????????oSpan1.onclick=function(){
????????????????if(index==0){
????????????????????index=3
?}else{
????????????????????index?-=1
?}
????????????????runner(-1000);
????????????????bttn();
????????????}
????????????for(var?i=0;?i<btn.length;?i++){
????????????????btn[i].onclick?=?function(){
????????????????????if(this.className?==?'bold'){
????????????????????????return;
????????????????????}
????????????????????var?myIndex?=?parseInt(this.getAttribute('index'))?;
????????????????????var?offset?=?-1000?*?(myIndex?-?index);
????????????????????index?=?myIndex;
????????????????????runner(offset);
????????????????????bttn();
????????????????}
????????????}
????????????onTer.onmouseover?=?stop;
????????????onTer.onmouseout?=?play;
????????????play();
????????}
????</script>
</head>
<body>
<div?id="conter">
????<div?id="div2"?style="left:?-1000px">
????????<img?src="image/ddd.jpg"?height="600"?width="1000"/>
????????<img?src="image/aaa.jpg"?height="600"?width="1000"/>
????????<img?src="image/bbb.jpg"?height="600"?width="1000"/>
????????<img?src="image/ccc.jpg"?height="600"?width="1000"/>
????????<img?src="image/ddd.jpg"?height="600"?width="1000"/>
????????<img?src="image/aaa.jpg"?height="600"?width="1000"/>
????</div>
????<ul?class="ul2">
????????<li?index="0"?class="bold">1</li>
????????<li?index="1">2</li>
????????<li?index="2">3</li>
????????<li?index="3">4</li>
????</ul>
????<span>左</span>
????<span>右</span>
</div>
</body>
</html>
//?----就是這里判斷，這個?setTimeout?不知道為啥不執行----//
?????????????????????????if(?(speed?>?0?&&?margin?<?newLeft)?||?(speed?<?0?&&?margin?>?newLeft))?{
????????????????????????oDiv.style.left?=?margin?+?speed?+?'px';
????????????????????????console.log("當前距離是："?+margin)
????????????????????????setTimeout(go,?inteval);
????????????????????}求告知 ?感謝大神
js輪播 中寫了個移動 不知道為啥不執行
五趾的魚
2018-03-09 11:01:54
