用ECMAScript 写的轮播图有缺陷

最新推荐文章于 2022-07-06 16:13:53 发布

越简单越好

最新推荐文章于 2022-07-06 16:13:53 发布

阅读量407

点赞数

本文链接：https://blog.csdn.net/gong1422425666/article/details/70184548

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
</head>
<body>
<div id="banner" >
<ul>
<li style="background:red;">1</li>
<li style="background:green;">2</li>
<li style="background:black;">3</li>
<li style="background:orange;">4</li>
<li style="background:yellow;">5</li>
<li style="background:red;">1</li>
</ul>
<span class="zuo" >《</span>
<span class="you" style="position: absolute;display: block;width: 20px;height: 20px;background: gray; top:150px; left:480px;">>></span>
</div>
<ul id="dot">
<li class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
</ul>
</body>
<script type="text/javascript">
var cc = document.getElementById("banner");
var aa = document.getElementsByTagName("ul")[0];
var bb = document.getElementsByTagName("ul")[1].children;
var zuo = document.getElementsByTagName("span")[0];
var you = document.getElementsByTagName("span")[1];
var i = 0;
if (ab!=null||ab!=undefined) {
clearInterval(ab);
}
var ab =setInterval(move,2000);
function move(){
if (i>=5) {
aa.style.marginLeft=0;
i=0;
}
i++;
startMove(aa,{"margin-left":i*(-500)});
zuo.onclick = function(){
clearInterval(ab);
i=i-1;
if (i==-1) {
i=4;
}
aa.style.marginLeft=i*(-500)+"px";
for (var a = 0; a < bb.length; a++) {
bb[a].className="";
}
console.log("i"+i);
console.log("bb[i]"+i+bb[i]);
bb[i>4?0:i].className="now";
ab = setInterval(move,2000);
}

you.onclick = function(){
clearInterval(ab);
i=i+1;
if (i==5||i==6) {
i=0;
}
aa.style.marginLeft=i*(-500)+"px";
for (var a = 0; a < bb.length; a++) {
bb[a].className="";
}
console.log("i"+i);
console.log("bb[i]"+i+bb[i]);
bb[i>4?0:i].className="now";
ab = setInterval(move,2000);
}

for (var a = 0; a < bb.length; a++) {
bb[a].className="";
}
bb[i>4?0:i].className="now";
}

// aa.onmouseover = function(){
// console.log("onmouseover"+aa);
// clearInterval(ab);
// }
// aa.onmouseout = function(){
// console.log("onmouseout"+cc);
// ab = setInterval(move,2000);
// }

for (var j = 0; j < bb.length; j++) {
bb[j].index = j;
bb[j].onclick = function(){
clearInterval(ab);
startMove(aa,{"margin-left":this.index*(-500)});
for (var k = 0; k < bb.length; k++) {
bb[k].className="";
}
this.className="now";
i = this.index;
ab = setInterval(move,2000);
}
}

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json){
if (obj.timmer!=null||obj.timmer!=undefined) {
clearInterval(obj.timmer);
}
obj.timmer=setInterval(function(){
for(attr in json){
var iCur= parseInt(getStyle(obj,attr));
document.title=iCur;
var speed = (json[attr]-iCur)/8;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
if (iCur == json[attr]) {
clearInterval(obj.timmer);
}else{
obj.style[attr]=(iCur+speed)+"px";
}
}
},30)
}

</script>

</html>

*{margin: 0;padding: 0;}
li{list-style-type: none}
#banner{width: 500px; height: 300px;border: 1px solid gray;overflow: hidden;}
#banner ul{width: 3000px; height: 300px;}
#banner ul li{width: 500px;height: 300px;float: left;}
#banner span{position: absolute;top: 150px; height: 20px; width: 20px; background: gray;}
#dot {position: absolute;top: 280px;left: 140px;width:100px;overflow: hidden;height: 20px;}
#dot li{ float: left; height: 20px; width: 20px; background: gray; border-radius: 50%;color: black;text-align: center;
line-height: 20px;
}
#dot .now{background: #fff};

存在缺陷在开始的时候点击左右不能实现轮播，

代码的主要思想是写一个叫startMove 的方法用来实现一个li从左到右的滑动（获取当前的属性，获取设置的属性，然后计算出速度，然后随着当前marginleft的逐渐变大，速度逐渐变小，在外部interval的时间内实现当前li的滑动）

越简单越好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用ECMAScript 写的轮播图有缺陷

123451《>>123451var cc = document.getElementById("banner");var aa = document.getElementsByTagName("ul")[0];var bb = document.getElementsByTagName("ul")[1].ch
复制链接

扫一扫