版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/michael51/article/details/88038327
超大图片居中显示
在CMS类型网站,后台信息录入人员插入图片一般通过IMG标签插入,但是当图片太大的时候,图片中间内容不会始终居中显示。此插件适合网页中的插入大型图片广告,动态让图片广告中的元素保持始终居中。
引入依赖文件
让选择器“.ad, .adf”的元素始终居中
$.banner.center({target:’.ad, .adf’});
<a href="#">
<img class="ad" src="img/big.jpg" width="2560"/>
</a>
DEMO:http://michaelray.coding.me/jquery-banner/demo.html
下拉大广告
DEMO:http://michaelray.coding.me/jquery-banner/stretch_demo1.html
$.banner.stretch({ big: ‘.stretch-banner’});
<div class="stretch-banner">
<a href="#" target="_blank"><IMG src="img/1920.jpg" width="1100" ></a>
</div>
大小广告交替显示
先显示小广告,然后会出现一个大广告,最后又变成小广告
DEMO:http://michaelray.coding.me/jquery-banner/stretch_demo2.html
<!--小广告-->
<div style="DISPLAY: block" id="js_ads_banner_top">
<a href="#" target=_blank><IMG src="img/banner_s.jpg" width="960" height="70"></a>
</div>
<!--大广告-->
<div style="DISPLAY: none" id="js_ads_banner_top_slide">
<a href="#" target=_blank><IMG src="img/banner_b.jpg" width="960"></a>
</div>
$.banner.stretch({
big : '#js_ads_banner_top_slide',
small : '#js_ads_banner_top',
repeat : true
});