Coin Slider jQuery插件详解
Coin Slider这个jQuery插件可用于创建拥有独特滑块滑落效果的图片展播控件。
代码
1.在body里加入如下HTML代码：
<div class="coin_slider_container"> <div id="coin_slider"> <a href="#" target="_blank"> <img src="images/img_1.jpg" /> <span>美式柔软巧克力布朗尼蛋糕，散发香醇巧克力风味。</span> </a> <a href="#"> <img src="images/img_2.jpg" /> <span>甘醇巧克力制造，完全体验巧克力的甘、醇、香。</span> </a> <a href="#" target="_blank"> <img src="images/img_3.jpg" /> <span>外酥内软口感，尽是甘醇巧克力与奶香 。</span> </a> <a href="#" target="_blank"> <img src="images/img_4.jpg" /> <span>香草蛋糕与巧克力蛋糕的完美结合，配合奶油巧克力淋浇，香香甜甜你最爱 。</span> </a> </div> </div><div class ="coin_slider_container"> <div id ="coin_slider"> <a href ="#" target="_blank"> <img src="images/img_1.jpg" /> <span>美式柔软巧克力布朗尼蛋糕，散发香醇巧克力风味。</span> </a> <a href="#"> <img src="images/img_2.jpg" /> <span>甘醇巧克力制造，完全体验巧克力的甘、醇、香。</span> </a> <a href="#" target="_blank"> <img src="images/img_3.jpg" /> <span>外酥内软口感，尽是甘醇巧克力与奶香 。</span> </a> <a href="#" target="_blank"> <img src="images/img_4.jpg" /> <span>香草蛋糕与巧克力蛋糕的完美结合，配合奶油巧克力淋浇，香香甜甜你最爱 。</span> </a> </div> </div>
2.在head标签内加入css：
<style type="text/css"> .coin_slider_container { border: 2px solid #dddddd; padding: 2px; width: 560px; height: 200px; overflow: hidden; position: relative; } .coin_slider { width: 560px; height: 200px; overflow: hidden; position: relative; } .coin_slider a { text-decoration: none; outline: none; border: none; } .cs-buttons { height: 20px; position: absolute; right: 8px; bottom: 4px; z-index: 1001; } .cs-buttons-a { background-color: #FCF2CF; border: 1px solid #F47500; color: #D94B01; cursor: pointer; float: left; font-size: 12px; height: 16px; line-height: 16px; margin-left: 3px; text-align: center; width: 16px; text-decoration: none; font-family:"宋体"; } .cs-active { background-color: #ffb442; color: #ffffff; font-weight: bold; } .cs-title { background-color: #000000; padding-left: 10px; height: 26px; line-height: 26px; font-size: 12px; width: 550px; color: #FFFFFF; } </style><style type="text/css"> .coin_slider_container { border: 2px solid #dddddd; padding: 2px; width: 560px; height: 200px; overflow: hidden; position: relative; } .coin_slider { width: 560px; height: 200px; overflow: hidden; position: relative; } .coin_slider a { text-decoration: none; outline: none; border: none; } .cs-buttons { height: 20px; position: absolute; right: 8px; bottom: 4px; z-index: 1001; } .cs-buttons-a { background-color: #FCF2CF; border: 1px solid #F47500; color: #D94B01; cursor: pointer; float: left; font-size: 12px; height: 16px; line-height: 16px; margin-left: 3px; text-align: center; width: 16px; text-decoration: none; font-family:"宋体"; } .cs-active { background-color: #ffb442; color: #ffffff; font-weight: bold; } .cs-title { background-color: #000000; padding-left: 10px; height: 26px; line-height: 26px; font-size: 12px; width: 550px; color: #FFFFFF; } </style>
3.在body底部引入js文件：
<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script> <script src="http://img.china-dirs.com.cn/public/js/coin-slider.js" type="text/javascript"></script><script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script> <script src="http://img.china-dirs.com.cn/public/js/coin-slider.js" type="text/javascript"></script>
4.在body底部添加js代码：
<script type="text/javascript"> $(document).ready(function() { $('#coin_slider').coinslider({ width: 560,//设置的宽度等于容器的宽度 height: 200,//设置的高度等于容器的高度 delay: 5000,//图片切换延迟 effect: "",//可以选4种切换效果，'random', 'swirl', 'rain', 'straight'，不写则为随机效果 navigation: true,//是否开启数字导航 links: true //是否对图片开启超链接 }); }); </script><script type="text/javascript"> $(document).ready(function() { $('#coin_slider').coinslider({ width: 560,//设置的宽度等于容器的宽度 height: 200,//设置的高度等于容器的高度 delay: 5000,//图片切换延迟 effect: "",//可以选4种切换效果，'random', 'swirl', 'rain', 'straight'，不写则为随机效果 navigation: true,//是否开启数字导航 links: true //是否对图片开启超链接 }); }); </script>
参考网站
