Question

请大神用js写出一个图片按照时间来变化,文字也随着变换!

写成那种div和js分开的，不要那种写到js里面的那种！ 最好能给加上注释- -！

Answer 1

<div style="width:100px;overflow:hidden">
 <ul id="imglst" style="width:500px">
   <li style="width:100px;float:left;"><!--这里面放图片和文字--></li>
   <li style="width:100px;float:left;"><!--这里面放图片和文字--></li>
   <li style="width:100px;float:left;"><!--这里面放图片和文字--></li>
   <li style="width:100px;float:left;"><!--这里面放图片和文字--></li>
   <li style="width:100px;float:left;"><!--这里面放图片和文字--></li>
 </ul>
</div>

这里，使ul左(右、上、下)移动(变化、轮播)，ul的宽度(左、右移动)就是ul下面的所有的li的宽度(上下)的总和

var swidth=100;//表示单个li的宽度(高度)
var runTime;//定时器
var Stime=3000;//每3秒变化一次
var sptm=300;//变化过程所需要的时间
var sindex=0;//当前在第几张
var countindex=4;//表示总张数

function index_Pics(){
  clearInterval(runTime );//清除定时器
  $("#imglst").animate({
      "margin-left": -sindex*swidth//执行动画效果，ul左移
  }, sptm);
  runTime = setInterval(function() {
    if (sindex== countindex-1) {
	sindex= 0;//当前是最后一张图片，位置改变为第一张
    } else {
      sindex+= 1;//否则加1
    }
    index_Pics();//定时器时间一到，重新执行方法
  }, Stime);
}