零基础建站培训介绍

当前位置:

网站图片轮播图功能制作

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

网站图片轮播功能制作效果展示

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

  • 第一步:下载网网站图片轮播图功能需用的JS文件,并上传到自己网站空间的根目录下。下载地址: http://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("http://www.xuewangzhan.net");
    text[0]="学做网站论坛";
    imag[1]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/2.jpg");
    link[1]=encodeURIComponent("http://www.xuewangzhan.net");
    text[1]="学做网站论坛";
    imag[2]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/3.jpg");
    link[2]=encodeURIComponent("http://www.xuewangzhan.net");
    text[2]="学做网站论坛";
    imag[3]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/4.jpg");
    link[3]=encodeURIComponent("http://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
    });
    })($);

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

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

上一课: 下一课:

2则回应给“网站图片轮播图功能制作”

  1. 建站学员头像 图片轮播说道:

    能不能给我个实例品。我一直调试不出来,跪求,怎么都行

  2. 学做网站讲师头像 学做网站讲师说道:

    图片不显示可能是由于你的图片路径不对造成的

发表评论

相关教程

  1. Wordpress轮播图幻灯片插件Slideshow Gallery
  2. 自己做网站如何制作幻灯片/轮播切换图
  3. Wordpress 幻灯片插件-Slider Revolutionr(汉化版)
  4. wordpress 添加banner切换图
  5. ecshop商城网站首页幻灯片替换成自定义js轮播方法
  6. 网站“轮播图幻灯片”高度和宽度怎么修改
  7. 网站设计教程3:画出网站的LOGO、导航、幻灯片
  8. DISCUZ论坛如何制作焦点幻灯片
  9. 网页如何添加幻灯片,三种网站幻灯片代码
  10. 如何去除网站轮播图(SWF文件)的边框