jQuery演示10种不同的切换图片列表效果

本文的图片列表切换动画效果很多，你可以点击demo进行查看。鼠标悬浮在图片区域，支持鼠标滚动。

淘建站为您提供更多_图片代码_图片插件_画廊_grid，在此特别感谢您对我们的支持与厚爱！

画廊html代码

<div id="tj_container" class="tj_container">
    <div class="tj_nav">
        <span id="tj_prev" class="tj_prev">Previous</span>
        <span id="tj_next" class="tj_next">Next</span>
    </div>
    <div class="tj_wrapper">
        <ul class="tj_gallery">
            <li><a href="http://www.sucaiq.com/js/664.html" target='_blank'><img src="images/1.jpg" alt="image01" /></a></li>
            <li><a href="http://www.sucaiq.com/js/665.html" target='_blank'><img src="images/2.jpg" alt="image02" /></a></li>
            <li><a href="http://www.sucaiq.com/js/666.html" target='_blank'><img src="images/3.jpg" alt="image03" /></a></li>
            <li><a href="http://www.sucaiq.com/js/667.html" target='_blank'><img src="images/4.jpg" alt="image04" /></a></li>
            <li><a href="http://www.sucaiq.com/js/668.html" target='_blank'><img src="images/5.jpg" alt="image05" /></a></li>
            <li><a href="http://www.sucaiq.com/js/669.html" target='_blank'><img src="images/6.jpg" alt="image06" /></a></li>
            <li><a href="http://www.sucaiq.com/js/670.html" target='_blank'><img src="images/7.jpg" alt="image07" /></a></li>
            <li><a href="http://www.sucaiq.com/js/671.html" target='_blank'><img src="images/8.jpg" alt="image08" /></a></li>
            <li><a href="http://www.sucaiq.com/js/672.html" target='_blank'><img src="images/9.jpg" alt="image09" /></a></li>
            <li><a href="http://www.sucaiq.com/js/673.html" target='_blank'><img src="images/10.jpg" alt="image10" /></a></li>
            <li><a href="http://www.sucaiq.com/js/674.html" target='_blank'><img src="images/11.jpg" alt="image11" /></a></li>
            <li><a href="http://www.sucaiq.com/js/675.html" target='_blank'><img src="images/12.jpg" alt="image12" /></a></li>
            <li><a href="http://www.sucaiq.com/js/676.html" target='_blank'><img src="images/13.jpg" alt="image13" /></a></li>
            <li><a href="http://www.sucaiq.com/js/677.html" target='_blank'><img src="images/14.jpg" alt="image14" /></a></li>
            <li><a href="http://www.sucaiq.com/js/678.html" target='_blank'><img src="images/15.jpg" alt="image15" /></a></li>
            <li><a href="http://www.sucaiq.com/js/679.html" target='_blank'><img src="images/16.jpg" alt="image16" /></a></li>
            <li><a href="http://www.sucaiq.com/js/680.html" target='_blank'><img src="images/17.jpg" alt="image17" /></a></li>
            <li><a href="http://www.sucaiq.com/js/681.html" target='_blank'><img src="images/18.jpg" alt="image18" /></a></li>
            <li><a href="http://www.sucaiq.com/js/682.html" target='_blank'><img src="images/19.jpg" alt="image19" /></a></li>
            <li><a href="http://www.sucaiq.com/js/683.html" target='_blank'><img src="images/20.jpg" alt="image20" /></a></li>
        </ul>
    </div>
</div>

引入gridnav插件

<script type="text/javascript" src="js/jquery.gridnav.js"></script>

$('#tj_container').gridnav();