滑行移动的分页图片

以后不放谁问的教程了/.\ 懒惰print screen ，还是照旧先问的先发 =）。

如上图，滑行移动的分页图片

我把它做成我的博客头图，想把它做成什么都可以

相册，热门帖子……等等，随你创意。

第一步骤，放美化/功能的代码

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 /* header 


Copy 以下的代码 Paste 到 /* header  上面
（华语字体解释可以连同拷贝，方便你们日后美化）


/* 美化图片外的框框 */
.window {
height:330px;
width: 470px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 2px solid #272727;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {
float: left;
}
/* 更改数字调整分页的位置 */
.paging {
position: absolute;
top: 320px; right: 160px;
width: 160px; height:5px;
z-index: 100;
text-align: center;
line-height: 80px;
display: none;
}
/* 美化分页 */
.paging a {
padding: 3px 8px;
text-decoration: none;
border: 2.5px solid #BEBEBE;
color: black;
}
.paging a.active {
color: #FFFFFF;
background: #000000;
}
/* 鼠标指向分页的时候的效果 *//
.paging a:hover {
font-weight: bold;
color: #FFFFFF;  
background: #000000;    
}

----------------------------------别拷贝超越这条线-----------------------------

还没有效果的，先预览看看有没问题，没有问题的话才再保存模板。

美化小提示：（这个你可以先跳过，先完成第二步骤的教程才美化）

橙色字体 = 等下有解释，请继续看以下教程。
蓝色字体 = 分页在不同的博客会有不同的位置，更改蓝色字体更改位置。
粉色字体 = 框框线条的厚度，数目越大，线条厚度越厚
青色字体 =  颜色代码
红色字体 = 框框线条的类型


框框线条的类型如下：

第二步骤，放上图片。

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/JAVAscript


Copy 以下代码 paste在 HTML/JAVAscript 里面

<center><div class="main_view">
    <div class="window">
        <div class="image_reel">
            <img src="图片网址" width="470" height="330"/>
            <img src="图片网址" width="470" height="330"/>
            <img src="图片网址" width="470" height="330"/>
            <img src="图片网址" width="470" height="330"/>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $(".paging").show();
 $(".paging a:first").addClass("active");
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 $(".image_reel").css({'width' : imageReelWidth});
 rotate = function(){
  var triggerID = $active.attr("rel") - 1;
  var image_reelPosition = triggerID * imageWidth;
  $(".paging a").removeClass('active');
  $active.addClass('active');
  $(".image_reel").animate({
   left: -image_reelPosition
  }, 500 );
 };
 rotateSwitch = function(){
  play = setInterval(function(){
   $active = $('.paging a.active').next();
   if ( $active.length === 0) {
    $active = $('.paging a:first');
   }
   rotate();
  }, 4000);
 };
 rotateSwitch();
 $(".image_reel a").hover(function() {
  clearInterval(play);
 }, function() {
  rotateSwitch();
 });
 $(".paging a").click(function() {
  $active = $(this);
  clearInterval(play);
  rotate();
  rotateSwitch();
  return false;
 });
});
</script></center>

------------------------------别拷贝超越这条线条------------------------

红色字体 = 会移动的图片的图片网址 / image direct link
橙色字体 = 图片的高度（height）&宽度（width），你可以随意自行调整图片大小。

** 切记， 第一步骤的橙色字体和第二步骤的橙色字体数目一定要一样。

这教程有点复杂 -_- 不明白的尽管问 =）