JS-学习笔记：原生JS实现轮播图

来源：互联网发布：中国机电产品出口数据编辑：程序博客网时间：2024/06/05 03:23

javascript代码：

<script>window.onload=function(){//获取到卷轴var wrap=document.getElementById('wrap');//使用定时器每个若干秒修改一次卷轴位置setInterval(function(){//如果当前left值已经展现到最后一张，则回到第一张图片if(wrap.offsetLeft<=-2400){wrap.style.left='-600px';    //避免第一张,没有过度效果,直接从第二张图开始}else{wrap.style.left=wrap.offsetLeft-600+'px'}},2000);}</script>

html代码：

</html><style>*{margin: 0;padding: 0;box-sizing: border-box;}#viewPort{margin: 0 auto;     width: 600px;height: 400px;border: 3px solid darkorange;overflow: hidden;    /* 图片溢出隐藏*/position: relative;  /*相对定位*/}#wrap{width:3000px; height:400px;position: absolute;transition: all 1s;  /*过度效果*/-ms-transform: all 1s;   /*让IE兼容*/}img{float: left;}</style></head><body><div id="viewPort"><div id="wrap"><!--要展现的图片--><img src="imagse/1.jpg" alt="美女1" class="img"/><img src="imagse/1.jpg" alt="美女1" class="img"/>  <!--插入两张图，避免浏览器兼容性--><img src="imagse/2.jpg" alt="美女1" class="img"/><img src="imagse/3.jpg" alt="美女1" class="img"/><img src="imagse/4.jpg" alt="美女1" class="img"/></div></div></body></html>

友情推荐：jQuery实现轮播图特效，仿京东——李帅醒博客

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb ---李帅醒著）

1 0