部落格的 分页图片

这个是最新教程哦
看好哦~

教程开始---------


 信息中心 - 设计 - 修改HTML

CTRL+F 找 /* header 

1。
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;  
}

橙色的字=外框的高度和宽度(已调好了)
浅青色的字=外框的度数
浅紫色的字=外框的颜色代码
黄色的字=分页框的度数
深紫色的字=分页框的颜色代码
浅蓝色的字=分页里的字体的颜色代码
深蓝色的字=分页里的背景颜色代码
红色的字=框框的种类






这个 /* 美化图片外的框框 */
是方便以后美化它的
现不用理它！


点我到颜色代码页面

框框的种类

2。


保存之后。




再到设计 - 页面元素 - 添加小工具 - 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>

红色的字=你要的图片网址
橙色的字=框框宽度和高度(已经调好了,不用理他)






好咯~~~
教程完毕了哦~
其实还蛮复杂的呢。。


我要休息了!!


你们成功了吗? ^^