html中用jpg格式的图片如何制作一个来回自动改变的图片

smallrog1 2011-04-26 05:27:17

html中用jpg格式的图片如何制作一个来回自动改变的图片要详细代码谢谢！

...全文

87 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

子夜__ 2011-04-26

打赏
举报

百度一下JS轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>JS轮播器</title>

<script type="text/javascript" src="../../lib/base.js"></script>

<script type="text/javascript">

/*window.onload=function () {

 var ul=getByClass('buttons')[0];

 var btns=ul.getElementsByTagName('li');

 var scrollContent=getByClass('scrollContent')[0];

 var cur=btns[0],t;

 for (var i=0;i<btns.length;i++) {

  (function (i) {

   btns[i].onmouseover=function () {

    clearTimeout(t);

    //scrollContent.style.top=(-i*150)+"px";

    var top=parseInt(scrollContent.style.top) || 0;

    animate(scrollContent,{top:top},{top:(-i*150)-top},1000,Tween.Quad.easeInOut);

    for (var j=0;j<btns.length;j++) {

     btns[j].className="";

    }

    this.className="hover";

    cur=this;

   };

   btns[i].onmouseout=function () {

    t=setTimeout(fn,1000);

   };

   btns[i].index=i;

  })(i);

 }

 btns[0].onmouseover();

 t=setTimeout(fn,1000);

 function fn() {

  var nextIndex=cur.index+1 ;

  if (nextIndex==btns.length) {

   nextIndex=0;

  }

  btns[nextIndex].onmouseover();

  t=setTimeout(fn,1000);

  

 }

};*/



/**

buttons [btn1,btn2..]  按钮数组

scrollContent 要滚动的内容

*/

function Player(buttons,scrollContent,imageHeight,hoverClass,timeout) {

 hoverClass=hoverClass || 'hover';

 timeout=timeout || 3000;

 this.buttons=buttons;

 this.scrollContent=scrollContent;

 this.hoverClass=hoverClass;

 this.timeout=timeout;

 this.imageHeight=imageHeight;

 

 this.curItem=buttons[0];

 var _this=this;

 for (var i=0;i<this.buttons.length;i++) {

  this.buttons[i].onmouseover=function () {

   _this.stop();

   _this.invoke(this.index);

  };

  this.buttons[i].onmouseout=function () {

   _this.start();

  };

  this.buttons[i].index=i;

 }

 this.invoke(0);

}



Player.prototype={

 start:function () {

  var _this=this;

  this.stop();

  this.interval=setInterval(function () {

   _this.next();

  },this.timeout);

 },

 stop:function () {

  clearInterval(this.interval);

 },

 invoke:function (n) {//具体显示哪一帧

  

  this.curItem=this.buttons[n];

  

  

  //this.scrollContent.style.top=-n*this.imageHeight+"px";

  var top=parseInt(this.scrollContent.style.top) || 0;

  this.animateIterval && this.animateIterval();

  this.animateIterval=animate(this.scrollContent,{

   top:top

  },{top:(-n*this.imageHeight)-top},1000,Tween.Quad.easeInOut);

  

  //先将所有按钮样式恢复

  this.recoverButtonsClass();

  this.curItem.className=this.hoverClass;

  

  

 },

 next:function () {

  //this.curItem.index//curItem当前的那一帧

  var nextIndex=this.curItem.index+1;

  if (nextIndex>=this.buttons.length) {

   nextIndex=0;

  }

  this.invoke(nextIndex);

 },

 recoverButtonsClass:function () {//将所有按钮样式恢复

  for (var i=0;i<this.buttons.length;i++) {

   this.buttons[i].className='';

  }

 }

};



 



window.onload=function () {

 var btns=getByClass('buttons')[0].getElementsByTagName('li');

 var scrollContent=getByClass('scrollContent')[0];

 var player=new Player(btns,scrollContent,150,undefined,1000);

 player.start();//开始播放

 

 //player.invoke(2);//切换到第4帧

 

 //player.stop();//停止轮播

 //

};





</script>

<style type="text/css">

.scrollContent {

width:470px;

height:750px;

position:absolute;

top:0;

left:0;

}

.scrollFrame {

width:470px;

height:150px;

overflow:hidden;

position:relative;

}

.scrollFrame .buttons {

height:30px;

position:absolute;

right:10px;

top:100px;

}

.scrollFrame .buttons li {

display:block;

width:20px;

height:20px;

border:1px solid orange;

float:left;

margin-right:4px;

text-align:center;

line-height:20px;

cursor:pointer;

color:orange;

background:white;

font-weight:bold;

}

.scrollFrame .buttons li.hover {

width:24px;

height:24px;

line-height:24px;

background:orange;

color:white;

margin-top:-2px;

}

/*

img {

 display:block;

}*/

</style>

</head>

<body>

 <h1>JS轮播器</h1>





<div class="scrollFrame">

 <div class="scrollContent">

  <img src="1.jpg" alt="1" />

  <img src="2.gif" alt="1" />

  <img src="3.gif" alt="1" />

  <img src="4.gif" alt="1" />

  <img src="5.jpg" alt="1" />

 </div>

 <ul class="buttons">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

 </ul>

</div>

 



</body>

</html>