如何给网站添加Banner轮播大图效果

时间:2021-01-22 08:53:03

如何给网站增加banner轮播效果

Banner轮播图效果是比较常见的网页模块,华为云速建站内置插件可快速为网页添加轮播图,具体操作如下:

点击打开插件->图片特效–>Unslider

images_161127670634379

点击设置配置样式,可根据需求选择样式;

images_161127673950174

设置轮播图的基础属性:高度长度,动画效果,是否自动播放等,样式不同,属性也略有区别;

images_161127676223765

样式如下图,可以设置箭头,导航等

显示导航:即是否显示下方的原点导航,并且提供了三种样式。并且可修改导航的颜色和下间距。

images_161127678378854

左右箭头:可选择鼠标悬停之后图片是否停止轮播。并且可上传箭头图片,及修改间距。

图片建议宽度为1920px,可以设置链接和标题

images_161127680762694

标题显示效果如下,设置链接后点击图片会跳转到对应链接页面。

images_161127682861177

unsilder自适应效果逻辑为w:100%;h:auto;

h:auto显示当中部分。H:会根据显示器大小自动调整实际高度,当宽度很宽时,图片高度有可能被拉伸显示当中部分。当宽度不宽很小时,图片高度有可能被缩小显示当中部分。

把BANNER文字和主要元素做到第460--1460之间。图片宽度1920,那么基本没有什么显示器不正常。

云速建站 CloudSite

华为云建站为您提供上千套网站模板,覆盖上百行业,无论您需要个人网站模版、企业网站模版、电商行业模板还是HTML5网站模版、H5响应式网站模板,华为云建站都能满足您的需求,让您零基础快速搭建个人网站,企业网站、电商网站。

五站合一:PC+移动+小程序+微信公众号+APP

立即使用最新活动                
帮助文档                

服务概览||https://support.huaweicloud.com/productdesc-cloudsite/cloudsite_01_4081.html,设置网站后台||https://support.huaweicloud.com/qs-cloudsite/cloudsite_01_4091.html,域名绑定和解析||https://support.huaweicloud.com/cloudsite_faq/cloudsite_faq_190731016.html,功能咨询||https://support.huaweicloud.com/cloudsite_faq/cloudsite_05_0283.html,最新动态||https://support.huaweicloud.com/wtsnew-cloudsite/index.html

https://www.huaweicloud.com/product/cloudsite.html

猜你喜欢