特效描述:jQuery 焦點圖輪播 SliderJS插件,jQuery焦點圖輪播SliderJS插件
代碼結構
1. 引入CSS
<link rel="stylesheet" href="assets/css/style.css">
2. 引入JS
<script src="assets/js/jquery-1.8.3.min.js"></script> <script src="assets/js/slider.js"></script>
3. HTML代碼
<br><br><br> <div id="jquery-script-menu"> </div> <div class="slider"> <div class="slider-container"> <div class="slider-wrapper"> <div class="slide"> <img src="assets/img/img1.jpg" alt="jQuery Slider with CSS Transitions"> </div> <div class="slide"> <img src="assets/img/img2.jpg" alt="jQuery Slider with CSS Transitions"> </div> <div class="slide"> <img src="assets/img/img3.jpg" alt="jQuery Slider with CSS Transitions"> </div> <div class="slide"> <img src="assets/img/img4.jpg" alt="jQuery Slider with CSS Transitions"> </div> </div> </div> </div> <script src="assets/js/jquery-1.8.3.min.js"></script> <script src="assets/js/slider.js"></script> <script type="text/javascript"> (function() { Slider.init({ target: $('.slider'), time: 6000 }); })(); </script>