第四组只有两张图片怎么再追加第一组的两张

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link href="css/style.css" rel="stylesheet">
  <title>横向图片滚动－正屏/单个滚动</title>
  <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 </head>
 <body>
  <div id="product">

 <span></span>

 <div id="content">
 <div id="content_list">
 <dl>
  <dt><img src="images/img01.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><img src="images/img02.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><img src="images/img03.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><img src="images/img04.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><img src="images/img05.jpg"/></dt>
  <dd>数据采集移动终端2</dd>
 </dl>
 <dl>
  <dt><img src="images/img01.jpg"/></dt>
  <dd>数据采集移动终端2</dd>
 </dl>
 <dl>
  <dt><img src="images/img02.jpg"/></dt>
  <dd>数据采集移动终端2</dd>
 </dl>

<dl>
  <dt><img src="images/img03.jpg"/></dt>
  <dd>数据采集移动终端2</dd>
 </dl>
 
 <dl>
  <dt><img src="images/img05.jpg"/></dt>
  <dd>数据采集移动终端3</dd>
 </dl>
 <dl>
  <dt><img src="images/img01.jpg"/></dt>
  <dd>数据采集移动终端3</dd>
 </dl>

 <dl>
  <dt><img src="images/img03.jpg"/></dt>
  <dd>数据采集移动终端3</dd>
 </dl>
 <dl>
  <dt><img src="images/img04.jpg"/></dt>
  <dd>数据采集移动终端3</dd>
 </dl>

 <dl>
  <dt><img src="images/img05.jpg"/></dt>
  <dd>数据采集移动终端4</dd>
 </dl>
 <dl>
  <dt><img src="images/img01.jpg"/></dt>
  <dd>数据采集移动终端4</dd>
 </dl>

 </div>
 </div>

 <span></span>
</div>
<script type="text/javascript">
$(function(){
    var page = 1;
    var i = 4; //每版放4个图片

    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
  var content = $("div#content");
  var content_list = $("div#content_list");
  var v_width = content.width();//content.width();
  var len = content.find("dl").length;

  var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
  if( !content_list.is(":animated") ){    //判断“内容展示区域”是否正在处于动画
if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
content_list.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
      
page = 1;
}else{
content_list.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
page++;
}
  }
   });

    //往前 按钮
    $("span.prev").click(function(){
       var content = $("div#content");
  var content_list = $("div#content_list");
  var v_width = content.width();//content.width();
  var len = content.find("dl").length;

  var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
  if(!content_list.is(":animated") ){    //判断“内容展示区域”是否正在处于动画
if(page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
content_list.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
  }else{
content_list.animate({ left : '+='+v_width }, "slow");
page--;
  }
     }
    });
});
</script>
 </body>
</html>

#product {
 width:720px;
 height:170px;
 border:1px solid #ccc;
 margin:5px auto;
}
#product div#content {
 position:relative;
 width:690px;
 height:160px;
 display:inline-block;
 overflow:hidden;
 float:left;
}
#product div#content_list {
 position:absolute;
 width:4000px;
}
#product dl{
 width:160px;
 height:150px;
 float:left;
 margin:10px 4px;
 padding:2px 2px;
}
#product dl dt {

}
#product dl dt img {
 width:160px;
 height:120px;
 border:none;
}
#product dl dd {
 text-align:center;
 margin:0;
 padding:0;
}
#product span.prev{
 cursor:pointer;
 display:inline-block;
 width:15px;
 height:150px;
 background:url(../images/sprite.gif) no-repeat left center;
 float:left;
}
#product span.next{
 cursor:pointer;
 display:inline-block;
 width:15px;
 height:150px;
 background:url(../images/sprite.gif) no-repeat right center;
 float:right;
}

qq_绝对是个梦_0

浏览 1376回答 0

0回答

随时随地看视频慕课网APP

第四组只有两张图片 怎么再追加第一组的两张

0回答

第四组只有两张图片怎么再追加第一组的两张