操作DOM实现轮播图"/>
操作DOM实现轮播图
一、思路分析
1.创建一个img标签,而后再创建一个img标签
2.移动图片
3.移除移动出来的左边的一张.
4.而后接着创建,移动,删除,循环往复.
二、代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>02DOM版轮播</title><style type="text/css">* {margin: 0;padding: 0;}#window {width: 640px;height: 400px;border: 2px solid gold;margin: 100px auto;overflow: hidden;position: relative;}/*采用DOM方式的轮播图,需要几张图片的宽度?2张*/#content {position: absolute;width: 1280px;height: 400px;font-size: 0;}#content>img {width: 640px;}</style>
</head><body><div id="window"><div id="content"></div></div>
</body></html>
<script type="text/javascript">var contDiv = document.getElementById("content");var currentIndex = 1;//声明一个创建img的函数function createImg() {//创建imgvar imgM = document.createElement("img");//设置img标签的src属性imgM.src = "img/BreakingBad" + currentIndex + ".jpg";//添加给conDivcontDiv.appendChild(imgM);}//定义函数删除图片imgfunction removeImg() {var imgs = document.querySelectorAll("#content img");//总是删除第一张图片contDiv.removeChild(imgs[0]);}//调用一次创建图片函数createImg();var timer1;clearInterval(timer1);timer1 = setInterval(function () {createImg();//记录当前步数var t = 0;//开始偏移位置var b = 0;//总的偏移量var c = -640;//总的步数var d = 30;var timer2;clearInterval(timer2);timer2 = setInterval(function () {currentIndex++;//在图片轮回结束时,自动跳转到第一张图片.if (currentIndex > 7) {currentIndex = 1;}t++;contDiv.style.left = b + c / d * t + "px";if (t >= d) {//图片切换完毕,清除计时器.clearInterval(timer2);//删除切换出去的imgremoveImg();//重新进行循环contDiv.style.left = 0;}}, 30);}, 2000);
</script>更多推荐
操作DOM实现轮播图
发布评论