婚纱网站jQuery大屏幕广告插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/michael51/article/details/88038327

超大图片居中显示

在CMS类型网站，后台信息录入人员插入图片一般通过IMG标签插入，但是当图片太大的时候，图片中间内容不会始终居中显示。此插件适合网页中的插入大型图片广告，动态让图片广告中的元素保持始终居中。

引入依赖文件

http://michaelray.coding.me/jquery-banner/jquery.banner.js

让选择器“.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
});