<!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);
}求告知 感谢大神
1 回答
qq_杀意隆_0
TA贡献93条经验 获得超29个赞
//这里的margin和newLef你比较时是拿它们的绝对值来比较，忘了它们是负数！ if ((speed < 0 && margin < newLeft) || (speed > 0 && margin > newLeft)) //不过我改成if ((speed > 0 && margin < newLeft) || (speed < 0 && margin > newLeft)) //或if ((speed < 0 && margin > newLeft) || (speed > 0 && margin < newLeft)) //if语句虽然执行了轮播图只是抖动，不能正常移动
添加回答
举报
0/150
提交
取消