16行代码实现轮播图

使用JavaScript和jQuery实现轮播图

这里使用的样式是淡入淡出

首先请确保每条li已经绝对定位，图片能叠加到一起

        <div class="scroll_mid">
            <ul id="scroll_img">
                <li><img src="images/dd_scroll_1.jpg"/></li>
                <li><img src="images/dd_scroll_2.jpg"/></li>
                <li><img src="images/dd_scroll_3.jpg"/></li>
                <li><img src="images/dd_scroll_4.jpg"/></li>
                <li><img src="images/dd_scroll_5.jpg"/></li>
                <li><img src="images/dd_scroll_6.jpg"/></li>
            </ul>
            <ul id="scroll_number">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>

  //轮播图
  $("#scroll_img li").css('position', 'absolute');
  var f = 0;
  $("#scroll_number li:eq(5)").addClass('c');
  var s = setInterval(function(){
    $("#scroll_img li").fadeOut(100);
    $("#scroll_number li:eq(5)").removeClass('c');
    //这里有坑
    //在使用f的时候，一定要把f转为变量，否则不会被识别
    var i=f-1;
    $("#scroll_number li:eq("+i+")").removeClass('c');
    $('#scroll_img li:eq('+f+')').fadeIn(500);
    $("#scroll_number li:eq("+f+")").addClass('c');
    if(f<5){
      f+=1;
    }else{
      f=0;
    }
  },2000);