多种切换过渡效果小巧jQuery图片幻灯片插件Coin Slider

admin

发表文章数:3027

Coin Slider是款很小巧,简单易用,具有多种图片过渡效果的jquery幻灯片插件。

多种切换过渡效果小巧jQuery图片幻灯片插件Coin Slider

使用方法:

下载插件:http://pan.baidu.com/s/1pJNriFD

引用文件:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

添加HTML代码:

<div id='coin-slider'>
    <a href="img01_url" target="_blank">
        <img src='img01.jpg' >
        <span>
            Description for img01
        </span>
    </a>    
    <a href="imgN_url">
        <img src='imgN.jpg' >
        <span>
            Description for imgN
        </span>
    </a>
</div>

有多张图片,就复制多份以下代码,修改图片url或文字:

<a href="imgN_url">
	<img src='imgN.jpg' >
	<span>
		Description for imgN
	</span>
</a>

添加javascript代码:

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>

coinslder后台的括号是插件的参数,Coin slider插件有以下参数:

width: 565, // 幻灯片的宽度
height: 290, // 幻灯片的高度
spw: 7, // 焦点矩形的宽度
sph: 5, // 焦点矩形的高度
delay: 3000, // 图片过渡的时间,毫秒
sDelay: 30, // 焦点矩形的过渡时间,毫秒
opacity: 0.7, // 标题的背景透明度
titleSpeed: 500, // 标题显示出来需要的时间,毫毛
effect: ”, // 过渡效果,四种:random, swirl, rain, straight
navigation: true, // 是否显示前一张、后一张切换按钮,true或false
links : true, // 是否显示图片超链接,true或false
hoverPause: true // 是否悬停

示例:

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
    });
</script>

演示地址:http://workshop.rs/projects/coin-slider/

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《多种切换过渡效果小巧jQuery图片幻灯片插件Coin Slider》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

7 + 2 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册