教程集 > 脚本编程 > javascript > 正文 js图片切换效果代码

js图片切换效果代码

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供js图片切换效果代码等资源，欢迎您收藏本站，我们将为您提供最新的js图片切换效果代码资源

提示：您可以先修改部分代码再运行

<p>  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><style type="text/css">     * { margin:0; padding:0;}   ul, li { list-style:none;}   body{   text-align:center;   }   #play{   width:400px;   height:300px;   position:absolute;   left:50%;   top:50%;   margin:-155px 0 0 -205px;   overflow:hidden;     }   #playimg{   width:400px;   height:300px;   position:absolute;   }   #playimg li{   height:300px;   overflow:hidden;   }   #playimg img{   width:400px;   height:300px;   }   #playbtn{   position:absolute;   left:0;   bottom:5px;   }   #playbtn li{   display:inline;   background:#eee;   padding:2px 5px;   margin:0 3px;   cursor:pointer;   }   #playbtn .current{   background:#f0f;   } </style></p>  <script type="text/javascript">   function $(id){return document.getElementById(id)}   function moveElement(elementID,final_x,final_y,interval) {//这个方法在DOM艺术那个书上讲的很清楚   if (!document.getElementById) return false;   if (!document.getElementById(elementID)) return false;   var elem = document.getElementById(elementID);   if (elem.movement) {   clearTimeout(elem.movement);   }   if (!elem.style.left) {   elem.style.left = "0px";   }   if (!elem.style.top) {   elem.style.top = "0px";   }   var xpos = parseInt(elem.style.left);   var ypos = parseInt(elem.style.top);   if (xpos == final_x && ypos == final_y) {   return true;   }   if (xpos < final_x) {   var dist = Math.ceil((final_x - xpos)/10);   xpos = xpos   dist;   }   if (xpos > final_x) {   var dist = Math.ceil((xpos - final_x)/10);   xpos = xpos - dist;   }   if (ypos < final_y) {   var dist = Math.ceil((final_y - ypos)/10);   ypos = ypos   dist;   }   if (ypos > final_y) {   var dist = Math.ceil((ypos - final_y)/10);   ypos = ypos - dist;   }   elem.style.left = xpos   "px";   elem.style.top = ypos   "px";   var repeat = "moveElement('" elementID "'," final_x "," final_y "," interval ")";   elem.movement = setTimeout(repeat,interval);   }   function imgChange(num){//切换图片焦点   if(!$('play')) return false;   var piclist=$('playimg').getElementsByTagName('img');   var imgheight=piclist[0].offsetHeight;   var moveY=-(imgheight*num);   moveElement('playimg',0,moveY,5);   }   function classToggle(arr,n){//切换按钮样式   for(var i=0;i<arr.length;i  ){   arr[i].className='';   }   arr[n].className='current';   }   function btnChange(btns){//鼠标移动播放   if(!$(btns)) return false;   $('play').onmouseover = function(){autokey = false};   $('play').onmouseout = function(){autokey = true};   var arr=$(btns).getElementsByTagName('li');   for(var i=0;i<arr.length;i  ){   arr[i].index=i;//设置索引号   arr[i].onmouseover=function(){   //var num=index(this,arr);   classToggle(arr,this.index);   imgChange(this.index);   }   }   }   function autoChange(btns){   if(!$(btns)) return false;   if(!autokey) return false;   var arr=$(btns).getElementsByTagName('li');   for(var i=0;i<arr.length;i  ){   if(arr[i].className=='current'){   var n=i 1;   }   }   if(n>=arr.length) n=0;   classToggle(arr,n);   imgChange(n);   }   var autokey = true;   setInterval("autoChange('playbtn')",3000);   window.onload=function(){   btnChange('playbtn');   }   </script>  <div id="play">  <ul id="playimg">      <li><img alt="" src="" /></li>      <li><img alt="" src="" /></li>      <li><img alt="" src="" /></li>      <li><img alt="" src="" /></li>  </ul>  <ul id="playbtn">      <li class="current">1</li>      <li>2</li>      <li>3</li>      <li>4</li>  </ul>  </div>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js 图片切换效果
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 js 仿淘宝首页最新图片幻灯切换效果
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 基于jquery的图片的切换(以数字的形式)
jQuery循环滚动展示代码可应用到文字和图片上
 图片特效-腾讯客服图片幻灯切换效果
 javascript 仿Flash图片幻灯切换效果
 基于Jquery的简单图片切换效果
 js随机效果之图片切换代码

上一篇：js 漂亮的图片幻灯切换效果下一篇：纯js div的万网首页广告图片幻灯切换效果

[关闭]

js图片切换效果代码

最近更新

浏览排行