网站图片轮播图功能制作
2018-11-02 来源:学做网站论坛
对于大多数网站来说,都或多或少存在网站幻灯片和网站图片轮播功能,特别在企业网站建设时,都会放在自己做的网站的导航下面,使用几张图片轮流展播。效果如下:
对于自己做网站时如何实现这种网站图片轮播功能呢?步骤如下:
- 第一步:下载网网站图片轮播图功能需用的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
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。
上一篇:网站数据自动备份方法
最新资讯
热门推荐