今天给大家分享一款基于Sequence.js 的图片滑动效果,特别适合电子商务网站或者企业产品展示功能。带有图片缩率图,能够呈现全屏图片浏览效果。结合 CSS3 Transition 实现响应式的滑块效果。
实现的代码。
html代码:
<div class="sequence-theme"> <div id="sequence"> <img class="sequence-prev" src="images/bt-prev.png" alt="Previous Frame" /> <img class="sequence-next" src="images/bt-next.png" alt="Next Frame" /> <ul class="sequence-canvas"> <li class="animate-in"> <h2 class="title"> Built using Sequence.js</h2> <h3 class="subtitle"> The Responsive Slider with Advanced CSS3 Transitions</h3> <img class="model" src="images/model1.png" alt="Model 1" /> </li> <li> <h2 class="title"> Creative Control</h2> <h3 class="subtitle"> Create unique sliders using CSS3 transitions</h3> <img class="model" src="images/model2.png" alt="Model 2" /> </li> <li> <h2 class="title"> Cutting Edge</h2> <h3 class="subtitle"> Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</h3> <img class="model" src="images/model3.png" alt="Model 3" /> </li> </ul> <ul class="sequence-pagination"> <li> <img src="images/tn-model1.png" alt="Model 1" /></li> <li> <img src="images/tn-model2.png" alt="Model 2" /></li> <li> <img src="images/tn-model3.png" alt="Model 3" /></li> </ul> </div> </div>