焦点图网页特效 多方向滚动的焦点图特效代码

特效描述：利用jQuery实现 多方向 滚动的 焦点图特效，利用jQuery实现多方向滚动的焦点图特效

代码结构

1. 引入CSS

<link href=’http://fonts.googleapis.com/css?family=PT+Sans+Narrow’ rel=’stylesheet’ type=’text/css’ />

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

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

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

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

3. HTML代码

<div id="header">
<a href="http://cxvn.com/">
<span>&laquo; 乐分享</span>
</a>
<span class="right_ab">
<a href="http://cxvn.com/" target="_blank">乐分享</a>
</span>
</div>
<h1>Portfolio Image Navigation</h1>
<div id="portfolio">
<div id="background"></div>
<div class="arrows">
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="pv">Previous</a>
<a href="#" class="next">Next</a>
</div>
<div class="gallery">
<div class="inside">
<div class="item">
<div><img src="images/1.jpg" alt="image1" /></div>
<div><img src="images/2.jpg" alt="image2" /></div>
<div><img src="images/3.jpg" alt="image3" /></div>
</div>
<div class="item">
<div><img src="images/4.jpg" alt="image4" /></div>
<div><img src="images/5.jpg" alt="image5" /></div>
</div>
<div class="item">
<div><img src="images/6.jpg" alt="image6" /></div>
<div><img src="images/7.jpg" alt="image7" /></div>
<div><img src="images/8.jpg" alt="image8" /></div>
<div><img src="images/9.jpg" alt="image9" /></div>
<div><img src="images/10.jpg" alt="image10" /></div>
<div><img src="images/11.jpg" alt="image11" /></div>
</div>
<div class="item">
<div><img src="images/12.jpg" alt="image12" /></div>
<div><img src="images/13.jpg" alt="image13" /></div>
<div><img src="images/14.jpg" alt="image14" /></div>
<div><img src="images/15.jpg" alt="image15" /></div>
</div>
</div>
</div>
</div>

下载地址

立即下载