jQuery图片幻灯 向左向右按钮在右下角

仿QQ相册，淡入淡出的jQuery图片轮播。向左向右按钮在轮播图片的右下角，半透明。在轮播的最下面是每张图片对应的圆点。
第一步、在head引入下面的代码：

<link href="css/nav.css" rel="stylesheet" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.nav.js" type="text/javascript"></script>

第二步、在body引入下面的代码：

<div id="inner">
    <div class="hot-event">
        <div class="switch-nav"><a href="#" onclick="return false;" class="prev"><i class="ico i-prev"></i><span class="hide-clip">上一个</span></a><a href="#" onclick="return false;" class="next"><i class="ico i-next"></i><span class="hide-clip">下一个</span></a></div>
        <div class="event-item" style="display: block;">
            <a target="_blank" href="http://www.5imoban.net/" class="banner">
                <img src="images/1.jpg" class="photo" style="width: 960px; height: 300px;" alt="模板网" />
            </a>
        </div>
        <div class="event-item" style="display: none;">
            <a target="_blank" href="http://www.5imoban.net/" class="banner">
                <img src="images/2.jpg" class="photo" style="width: 960px; height: 300px;" alt="模板网" />
            </a>
        </div>
        <div class="event-item" style="display: none;">
            <a target="_blank" href="http://www.5imoban.net/" class="banner">
                <img src="images/3.jpg" class="photo" style="width: 960px; height: 300px;" alt="模板网" />
            </a>
        </div>
        <div class="event-item" style="display: none;">
            <a target="_blank" href="http://www.5imoban.net/" class="banner">
                <img src="images/4.jpg" class="photo" style="width: 960px; height: 300px;" alt="模板网" />
            </a>
        </div>
        <div class="event-item" style="display: none;">
            <a target="_blank" href="http://www.5imoban.net/" class="banner">
                <img src="images/5.jpg" class="photo" style="width: 960px; height: 300px;" alt="模板网" />
            </a>
        </div>
        <div class="switch-tab">
            <a href="#" onclick="return false;" class="current">1</a>
            <a href="#" onclick="return false;">2</a>
            <a href="#" onclick="return false;">3</a>
            <a href="#" onclick="return false;">4</a>
            <a href="#" onclick="return false;">5</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#inner').nav({ t: 2000, a: 1000 });
</script>

参数说明：
1、t : 表示图片切换的时间间隔，默认为 3000 ，单位毫秒；
     a : 表示图片渐变的时间，默认为 500 ，单位毫秒。

     t 和 a 都不是必需的，没进行设置的将使用默认值。

2、因为写成了 jQuery 插件的形式，所以 jQuery 原本的链式写法依旧有效，例如在启用焦点图后继续对 #inner 这个元素进行设置：

$('#inner').nav({ t : 1000 , a : 3000 }).css('background','black');

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！