是一个同事发过来的,火柴觉得切换效果很棒,难能可贵的是还兼容IE系列~~ 本质是一个基于jquery的插件 quake.slider-min.js 。
引入必要的jquery
<script src="js/jquery.min.js" type="text/javascript"></script>再引入quake.slider-min.js 和样式 (默认效果就不错,可以自己修改js 火柴表示完全可二次开发)
<link href="css/quake.slider.css" rel="stylesheet" type="text/css" />
<script src="js/quake.slider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.quake-slider').quake({ effects: ['swirlFadeIn', 'swirlFadeOut', 'swirlFadeIn', 'linearPealReverse', 'slideIn', 'swirlFadeIn', 'explodeFancy'],
thumbnails: false,
hasNextPrev: true,
captionOpacity: '0.3'
});
});
</script>
HTML
<div class="wrapper">
<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#">
<img src="images/1.jpg" alt="Clean Business Free Business Website Premium Template" />
</a><a target="_blank" href="#">
<img src="images/2.jpg" alt="Free Premium HTML Admin/Backend Template for Web Applications" /></a>
<a target="_blank" href="#">
<img src="images/3.jpg" alt="Free HTML jQuery Portfolio Template" />
</a><a target="_blank" href="#">
<img src="images/4.jpg" alt="jQuery Clean and Simple Tooltips Plugin" />
</a><a target="_blank" href="#">
<img src="images/5.jpg" alt="jQuery Plugin for On Demand Search Box" />
</a><a target="_blank" href="#">
<img src="images/6.jpg" alt="Multi Level Hierarchical jQuery Menu" />
</a><a target="_blank" href="#">
<img src="images/9.jpg" alt="XML Driven Vertical New Scroller Script Using HTML and jQuery" />
</a><a target="_blank" href="#">
<img src="images/16.jpg" alt="jQuery Spin Button Control Plugin" />
</a>
</div>
</div>
</div>
=============================================================