分享一个常用的全屏滑动效果的广告幻灯片,你可以自定义动画时间、滑动延时时间、是否自动播放等。
HTML
幻灯片html代码包括:#js_banner_img li幻灯片列表和左右按钮.fx_banner_pre,.fx_banner_next
<div id="js_banner" class="fx_banner">
<ul id="js_banner_img" class="fx_banner_img clear">
<li style="background:#cfd0ef">
<div class="fx_banner_inner fx_grid_c1">
<div class="child child0" data-z="1"><img src="images/0.jpg" alt="misfit shine"></div>
<div class="child" data-z="2" style="left:0;top:0;"><img src="images/0_1.png" alt=""></div>
<div class="child" data-z="3" style="left:495px;top:0;"><img src="images/0_2.png" alt=""></div>
</div>
<a href="http://www.sucaihuo.com/js" class="fx_banner_link"><span class="hide">去购买</span></a>
</li>
<li style="background:#fe5769">
<div class="fx_banner_inner fx_grid_c1">
<div class="child child0" data-z="1"><img src="images/1.jpg" alt="latin"></div>
<div class="child" data-z="2" style="left:0;top:0;"><img src="images/1_1.png" alt=""></div>
<div class="child" data-z="3" style="left:495px;top:0;"><img src="images/1_2.png" alt=""></div>
</div>
<a href="http://www.sucaihuo.com/js" class="fx_banner_link"><span class="hide">去购买</span></a>
</li>
</ul>
<div class="fx_banner_common fx_grid_c1">
<a ytag="30000" id="js_banner_pre" href="javascript:;" class="fx_banner_pre"></a>
<a ytag="30010" id="js_banner_next" href="javascript:;" class="fx_banner_next"></a>
</div>
</div>
引入焦点轮播插件tab.js和jquery库
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
jQuery
$(function() {
var $window = $(window), window_width = $window.width();
$('#js_banner,#js_banner_img li').width(window_width);
new $.Tab({
target: $('#js_banner_img li'),
effect: 'slide3d',
animateTime: 1000,
stay: 3500,
autoPlay: true,
merge: true,
prevBtn: $('#js_banner_pre'),
nextBtn: $('#js_banner_next')
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791