网站图片轮播图功能制作

对于大多数网站来说，都或多或少存在网站幻灯片和网站图片轮播功能，特别在企业网站建设时，都会放在自己做的网站的导航下面，使用几张图片轮流展播。效果如下：

对于自己做网站时如何实现这种网站图片轮播功能呢？步骤如下：

• 第一步：下载网网站图片轮播图功能需用的JS文件，并上传到自己网站空间的根目录下。下载地址： https://pan.baidu.com/s/1eQrHnZs 密码: 977y；
• 第二步：制作要显示的图片到主题文件夹中的images中。名字只能为1。2。3。4。jpg；
• 第三步：将以下两句放标签里面，并需要补充从不的路径第四步：以下一句放要放幻灯片的地方，需要补充完整路径；
  <SCRIPT language=JavaScript src="/js/comm.js" type=text/javascript></SCRIPT><SCRIPT language=JavaScript src="/js/swf.js" type=text/javascript></SCRIPT>
• 第四步：以下一句放要放幻灯片的地方，需要补充完整路径；
  <SCRIPT src='/js/config.inc.js' type=text/javascript></SCRIPT>
• 第五步：修改js 文件夹中的config.inc.js文件里面的图片路径地址和图片的宽度高度。JS里的路径必须填写完整。
  (function($){
  var imag=[];
  var link=[];
  var text=[];imag[0]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/1.jpg");
  link[0]=encodeURIComponent("https://www.xuewangzhan.net");
  text[0]="学做网站论坛";
  imag[1]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/2.jpg");
  link[1]=encodeURIComponent("https://www.xuewangzhan.net");
  text[1]="学做网站论坛";
  imag[2]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/3.jpg");
  link[2]=encodeURIComponent("https://www.xuewangzhan.net");
  text[2]="学做网站论坛";
  imag[3]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/4.jpg");
  link[3]=encodeURIComponent("https://www.xuewangzhan.net");
  text[3]="学做网站论坛";
  if(imag.length < 4){
  for(var i=imag.length;i<4;i++){
  imag[i]="http://localhost/10/wp-content/themes/Studio/images/1.jpg";
  link[i]=encodeURIComponent("/");
  text[i]="学做网站论坛";
  }
  }
  var pic_width=960;
  var pic_height=240;
  var stop_time=6000;
  makeSWF('FrontPageFocusShower','http://localhost/10/wp-content/themes/Studio/focus2.swf',{
  FlashVars : 'pics='+imag.join('|')+'&links='+link.join('|')+'&texts='+text.join('|')+'&stop_time='+stop_time+",
  wmode: 'opaque',
  scale: 'noScale',
  quality: 'high',
  width : pic_width,
  height : pic_height
  });
  })($);

通过以上几步的操作，就可以在自己建网站时，制作出网站图片轮播图功能了。

除了上面这个方法之外，我们还可以使用另外一个方法制作网站轮播图。方法见：如何制作网站轮播图。