首页 > 图片特效 / jquery特效插件 / > jQuery满屏大图片切换特效代码

jQuery满屏大图片切换特效代码

点击: 5787 , 发布日期: 2013-5-7
jQuery满屏大图片切换特效代码

jQuery满屏大图片切换特效代码

 好孩子官网jquery全屏图片展示效果,默认状态下自动向下一张一张滑动展示,点击暂停则会显示自动播放按钮与向上向下控制按钮。这个效果要求的图片比较大因为现在的显示器是越来越大了,为了更好的适合更多的显示效果只能作成大图片才行。

jquery参数说明:

isAutoPlay:是否自动滚动,默认为true,即页面打开后焦点图自动滚动,可设为false

direction:图片自动滚动时的方向,默认为'up',即向上滚动,可设为'down'使其向下滚动。

animateTime:图片滚动时需要多少毫秒,默认为1000,可设为其它数值。

interval:图片每隔多少毫秒滚动一次,默认为3500,可设为其它数值。

jquery插件的使用:

第一步:引入CSS与JS

<link href="css/fullfoucs.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.fullfoucs.js" type="text/javascript"></script>

第二步:插入所需要的html

<div id="flash_control">
        <div class="flash-control-wrp">
            <a class="icon-up"><i></i></a>
            <a class="icon-play"><i></i></a>
            <a class="icon-pause"><i></i></a>
            <a class="icon-down"><i></i></a>
        </div>
    </div>
    <ol id="index_ex_slide" class="flash">
        <li class="default">
            <a href="#" title="满屏商品图片第一张图的说明" target="_blank">
                <img class="lazy default" src="images/1.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="http://www.kaiwo123.com/" title="满屏商品图片第二张图的说明" target="_blank">
                <img class="lazy" src="images/2.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="#" title="满屏商品图片第三张图的说明" target="_blank">
                <img class="lazy" src="images/3.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="#" title="满屏商品图片第四张图的说明" target="_blank">
                <img class="lazy default" src="images/4.jpg" alt="" />
            </a>
        </li>
    </ol>

第三步:调用jquery插件

$.fullFoucs({ direction: 'down' });

多个参数以","号分开。

关键词: jquery图片特效 全屏 满屏

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论
不错 挺好的
mimic
2015-6-16 18:12:04
不错 挺好的
白子龙-海瑞科技
2014-12-15 15:24:47
很好
愤世嫉俗的青年
2014-6-11 15:02:27