网站优化

福州小程序开发_原生JS完成图片左右轮播

作者:admin 发布时间:2021-01-12
原生JS实现图片左右轮播       本文主要分享了原生JS实现图片左右不停运动的完整示例代码,可直接保存到HTML文档打开可以查看效果。下面跟着小编一起来看下吧

本效果使用js实现,当图片移动到200像素后回到0像素再向右移动200像素一直左右移动,不需要marquee标签。

完整的HTML代码如下,保存到HTML文档打开可以查看效果:

 !DOCTYPE html 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 
 title JS使图片左右移动_何问起 /title 
 meta charset="utf-8" / 
 base target="_blank" / 
 style a{color:blue;} /style 
 /head 
 body 
 p mag: /p input type="text" id="pos" / br / 
 input type="button" value="开始" / 请点击按钮 br / 
 div 
 img id="img" src="themes/hvtimages/hlogo.png" / 
 /div 
 div a href="h/" 查看代码 /a a href="a a href="texiao/" 更多特效 /a /div 
 script 
 var hovertreeStep, hovertreeTurn = true;
 function move() {
 var mag = parseInt(document.getElementById("img").style.left);
 document.getElementById("pos").value = mag;
 if (hovertreeTurn) {
 hovertreeStep = 1; hovertreeTurn = false;
 if ( mag 200) {
 hovertreeStep = -1;
 if (mag 1)
 hovertreeStep = 1;
 document.getElementById("img").style.left = (mag + hovertreeStep) + "px";
 window.setTimeout("move()", 50);
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!



收缩