推荐订阅源

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>

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>

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>

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>