零基础学做网站教程

当前位置:

网站幻灯片怎么制作,网站图片轮播如何做

对于大多数网站来说,都或多或少存在网站幻灯片和网站图片轮播功能,很多企业网站都会放在自己做的网站的导航下面,使用几张图片轮流展播。有那种在固定的图片区域 可以自动的更换图片 下面还写着 1.2.3.4.5 那样的数字,在网页图片轮播代码放在三四张图,它实现自动轮播,也可以鼠标点击右下角图片号码就自动展播。效果如下:

网站幻灯片效果展示
对于自己做网站时如何实现这种网站图片轮播效果呢?步骤如下:

  • 第一步:将幻灯片swf与js二个文件到主题文件夹中;
  • 第二步:制作要显示的图片到主题文件夹中的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
    });
    })($);

网站幻灯片制作需用的文件和代码下载: http://pan.baidu.com/s/1eQrHnZs 密码: 977y

Tags:

上一课: 下一课:

发表评论

*

* 绝不会泄露


相关教程

  1. Wordpress 幻灯片插件-Slider Revolutionr(汉化版)
  2. ecshop商城网站首页幻灯片替换成自定义js轮播方法
  3. 如何去除幻灯片SWF文件的边框
  4. 网页如何添加幻灯片,三种网站幻灯片代码
  5. 网站幻灯片的尺寸怎么改
  6. 如何制作wordpress自动调用后台图片的banner切换图
  7. 网站设计教程3:画出网站的LOGO、导航、幻灯片
  8. 如何自定义企业网站中的幻灯片
  9. wordpress网站轮播切换图幻灯片【后台控制】制作
  10. 网站幻灯片插件Slideshow Gallery