老大之前发布的那个教程只是原版复制别人的代码，今天我就教大家如何把别人的代码变成自己的。对于我这个不懂得代码的人来说，真是好头大！搞了一晚上了！在此，将我的心得一步一步上发给大家看看！仅供大家交流学习！因为我是一点都不懂代码，所以有不当之处敬请指教。对于这个轮换广告的大小设置我还不太明白，所以我也借此发问如何更改？请高手指教！因为我还不能上传文件，所以大家可以用下面的地址连接直接下载。

在下面网站首页观看修改效果（我站信息未完善，敬请批评指正）：

1.请点击下载JS文件（放在自己知道的位置，等下要FTP上传）：

2.下面这个也是元素（左右的箭头文件，准备上传）

3.先用FTP在自己的网站系统中/p/gg/建立一个文件夹(任意名即可，我建的文件夹名是lunhuan，所以后面我就用我自己建的文件夹为例)，用FTP软件上传上面两个文件到/p/gg/lunhuan文件夹中。

同时可以上传5张（宽950*高280）的图片文件进去，随意命名（我的是：001.jpg、002.jpg、003.jpg、004.jpg、005.jpg，以下以此为例)

因为上面说的很清楚，我不太清楚大小怎么改，怕改错，就没有动大小的那个设置。请高手指教。

 

 

 

第一步

请大家复制以下代码:

<div><style type="text/css">
#focus {
 width:950px;
 height:280px;
 overflow:hidden;
 position:relative;
}
#focus ul {
 height:280px;
 position:absolute;
}
#focus ul li {
 float:left;
 width:950px;
 height:280px;
 overflow:hidden;
 position:relative;
 background:#000;
}
#focus ul li div {
 position:absolute;
 overflow:hidden;
}
#focus .btnBg {
 position:absolute;
 width:950px;
 height:20px;
 left:0;
 bottom:0;
 background:#000;
}
#focus .btn {
 position:absolute;
 width:780px;
 height:10px;
 padding:5px 10px;
 right:0;
 bottom:0;
 text-align:right;
}
#focus .btn span {
 display:inline-block;
 _display:inline;
 _zoom:1;
 width:25px;
 height:10px;
 _font-size:0;
 margin-left:5px;
 cursor:pointer;
 background:#fff;
}
#focus .btn span.on {
 background:#fff;
}
#focus .preNext {
 width:45px;
 height:100px;
 position:absolute;
 top:90px;
 background:url(/p/gg/lunhuan/sprite.png) no-repeat 0 0;
 cursor:pointer;
}
#focus .pre {
 left:0;
}
#focus .next {
 right:0;
 background-position:right top;
}</style><script type="text/javascript" src="/p/gg/lunhuan/jquery.min.js"></script><script type="text/javascript">
$(function() {
 var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
 var len = $("#focus ul li").length; //获取焦点图个数
 var index = 0;
 var picTimer;
 
 //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
 var btn = "<div class='btnBg'></div><div class='btn'>";
 for(var i=0; i < len; i++) {
  btn += "<span></span>";
 }
 btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
 $("#focus").append(btn);
 $("#focus .btnBg").css("opacity",0.5);
 //为小按钮添加鼠标滑入事件，以显示相应的内容
 $("#focus .btn span").css("opacity",0.4).mouseenter(function() {
  index = $("#focus .btn span").index(this);
  showPics(index);
 }).eq(0).trigger("mouseenter");
 //上一页、下一页按钮透明度处理
 $("#focus .preNext").css("opacity",0.2).hover(function() {
  $(this).stop(true,false).animate({"opacity":"0.5"},300);
 },function() {
  $(this).stop(true,false).animate({"opacity":"0.2"},300);
 });
 //上一页按钮
 $("#focus .pre").click(function() {
  index -= 1;
  if(index == -1) {index = len - 1;}
  showPics(index);
 });
 //下一页按钮
 $("#focus .next").click(function() {
  index += 1;
  if(index == len) {index = 0;}
  showPics(index);
 });
 //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
 $("#focus ul").css("width",sWidth * (len));
 
 //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
 $("#focus").hover(function() {
  clearInterval(picTimer);
 },function() {
  picTimer = setInterval(function() {
   showPics(index);
   index++;
   if(index == len) {index = 0;}
  },3600); //此3600代表自动播放的间隔，单位：毫秒
 }).trigger("mouseleave");
 
 //显示图片函数，根据接收的index值显示相应的内容
 function showPics(index) { //普通切换
  var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
  $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
  //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
  $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
 }
});
</script></div><div id="focus"><ul><li><a target="_blank" href="http://www.hellozhuhai.com/（这个网址是我自己的网站首页，以后大家可以在这里修改图片连接的地址，修改时请删除网址以及括号和括号内所有文字，换上自己的就行，小心别删了后面的符号）"><img alt="" src="/p/gg/lunhuan/001.jpg" /></a></li><li><a target="_blank" href="http://www.hellozhuhai.com/（这个网址是我自己的网站首页，以后大家可以在这里修改图片连接的地址，修改时请删除网址以及括号和括号内所有文字，换上自己的就行，小心别删了后面的符号"><img alt="" src="/p/gg/lunhuan/002.jpg" /></a></li><li><a target="_blank" href="http://www.hellozhuhai.com/（这个网址是我自己的网站首页，以后大家可以在这里修改图片连接的地址，修改时请删除网址以及括号和括号内所有文字，换上自己的就行，小心别删了后面的符号"><img alt="" src="/p/gg/lunhuan/003.jpg" /></a></li><li><a target="_blank" href="http://www.hellozhuhai.com/（这个网址是我自己的网站首页，以后大家可以在这里修改图片连接的地址，修改时请删除网址以及括号和括号内所有文字，换上自己的就行，小心别删了后面的符号"><img alt="" src="/p/gg/lunhuan/004.jpg" /></a></li><li><a target="_blank" href="http://www.hellozhuhai.com/（这个网址是我自己的网站首页，以后大家可以在这里修改图片连接的地址，修改时请删除网址以及括号和括号内所有文字，换上自己的就行，小心别删了后面的符号"><img alt="" src="/p/gg/lunhuan/005.jpg" /></a></li></ul></div>

 

第二步：后台进入广告管理（建议讲代码放在首页第一个广告位置，即AD_index_banner1这个广告里面，也可以根据需要放在全站头部公共区域或其他页面广告），找到首页广告点击修改（可以根据需要选择删除还是不删除原来的广告内容），下图是以老大的图片放在论坛广告页面为例：

 

 

然后将的代码粘贴进去，修改需要修改的代码，发表就可以啦！这样你的网站以后就直接拉取自己的文件了，而且可以任意在自己的FTP中修改！