网站图片轮播图功能制作

2018-11-02    来源:学做网站论坛

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

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

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

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

  • 第一步:下载网网站图片轮播图功能需用的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("https://www.xuewangzhan.com");
    text[0]="学做网站论坛";
    imag[1]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/2.jpg");
    link[1]=encodeURIComponent("https://www.xuewangzhan.com");
    text[1]="学做网站论坛";
    imag[2]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/3.jpg");
    link[2]=encodeURIComponent("https://www.xuewangzhan.com");
    text[2]="学做网站论坛";
    imag[3]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/4.jpg");
    link[3]=encodeURIComponent("https://www.xuewangzhan.com");
    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
    });
    })($);

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

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

标签: 建网站 企业网站 网站建设 制作网站

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:网站数据自动备份方法

下一篇:WordPress搜索框如何屏蔽恶意关键词搜索