<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电影胶卷风格带缩略图幻灯片轮播js特效</title>
<style type="text/css">
*{margin:0;padding:0;}
#jdjxc .clear{clear:both;}
#jdjxc ul{list-style:none;}
#jdjxc{width:1200px;margin:0 auto;}
#imgRolling{clear:both;}
#imgRolling .imagebg{height:550px;overflow:hidden;position:relative;}
#imgRolling .imagebg li{height:550px;overflow:hidden;width:1200px;margin:0 auto;display:block;text-align:center;}
#imgRolling .scrollbg{height:282px;background:url(images/scroll_bg.png) no-repeat center center;}
#imgRolling .scroll{width:1090px;height:282px;position:relative;margin:0 auto;}
#imgRolling .pre, .next{display:block;position:absolute;width:48px;height:76px;}
#imgRolling a.pre{background:url(images/arr_l.png);top:90px;left:0;}
#imgRolling a.pre:hover{background:url(images/arr_l_on.png);}
#imgRolling a.next{background:url(images/arr_r.png);top:90px;right:0;}
#imgRolling a.next:hover{background:url(images/arr_r_on.png);}
#imgRolling .outScroll_pic{ width:952px;height:282px;overflow:hidden;margin-left:70px;position:relative;top:2px;}
#imgRolling .outScroll_pic .scroll_img{position:absolute}
#imgRolling .scroll_img{margin:0 auto;width:40000px;height:282px;}
#imgRolling .scroll_img li{float:left;height:135px;width:171px;margin:60px 9px;_margin:5px 14px 5px 4px;cursor:pointer;}
#imgRolling .scroll .present{width:170px;height:135px;border:2px #fff solid;background:url(images/arr_on.png) 50% -4px no-repeat;z-index:10;position:absolute;top:60px;left:0;}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="jdjxc">
<div id="imgRolling">
<ul class="imagebg" id="imagebg">
<li data-sPic="images/small1.jpg">
<img src="images/big1.jpg">
</li>
<li data-sPic="images/small2.jpg">
<img src="images/big2.jpg">
</li>
<li data-sPic="images/small3.jpg">
<img src="images/big3.jpg">
</li>
<li data-sPic="images/small4.jpg">
<img src="images/big4.jpg">
</li>
<li data-sPic="images/small5.jpg">
<img src="images/big5.jpg">
</li>
<li data-sPic="images/small6.jpg">
<img src="images/big6.jpg">
</li>
<li data-sPic="images/small7.jpg">
<img src="images/big7.jpg">
</li>
<li data-sPic="images/small8.jpg">
<img src="images/big8.jpg">
</li>
<li data-sPic="images/small9.jpg">
<img src="images/big9.jpg">
</li>
</ul>
<div class="scrollbg">
<div class="scroll">
<a id="left_btn" class="pre" href="javascript:void(0)"></a>
<div class="present" id="present"></div>
<div class="outScroll_pic">
<ul class="scroll_img cls" id="small_pic"></ul>
</div>
<a id="right_btn" class="next" href="javascript:void(0)"></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/imgSlider.js"></script>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
电影胶卷风格带缩略图幻灯片轮播js特效.zip （28个子文件） 
js 
imgSlider.js 7KB
index.html 3KB images 
scroll_bg.png 62KB
small2.jpg 17KB big2.jpg 120KB small9.jpg 16KB small1.jpg 9KB big1.jpg 70KB big5.jpg 99KB arr_r.png 2KB big9.jpg 106KB big3.jpg 127KB imgshow_mask.png 151B small3.jpg 15KB arr_l.png 2KB big6.jpg 145KB small4.jpg 16KB arr_l_on.png 2KB arr_r_on.png 2KB arr_on.png 971B small8.jpg 11KB big8.jpg 89KB jdjxc_banner.jpg 146KB small5.jpg 9KB big4.jpg 128KB big7.jpg 84KB small6.jpg 14KB small7.jpg 13KB资源评论
