jQuery 图片滚动效果

2019独角兽企业重金招聘Python工程师标准>>>

使用了网上的一个JS插件，配置起来相当灵活好用，效果如下：

下面整理下使用的过程：

1.在插件网站http://www.gmarwaha.com上下载插件jcarousellite_1.0.1.min.js，既然说了是jquery图片滚动效果，引入jquery是必须的，可以在页面上引入：

<script src="jquery-1.4.2.min.js"></script>
<script src="jcarousellite_1.0.1.min.js" ></script>

2.在div中引入图片：

<!--图片左移动-->
<a class="prev" href="#"><img border="0" src="imageLeft.gif"/></a>
<!--图片右移动-->
<a class="next" href="#"><img border="0" src="imageRight.gif"/></a>
<div class="anyClass">
	<ul>
		<li>
			<a href="#" target="_blank">
				<img src="1.jpg" width="100" height="50"/>
			</a>
		</li>
		<li>
			<a href="#" target="_blank">
				<img src="2.jpg" width="100" height="50"/>
			</a>
		</li>
		<li>
			<a href="#" target="_blank">
				<img src="3.jpg" width="100" height="50"/>
			</a>
		</li>
	</ul>
</div>

3.接下来就是最后一步，在初始化的时候添加onclick事件：

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        //图片数
        visible: 4
    });
});

4.现在整个页面基本可以切换了，但是有个问题就是样式也就是CSS的问题，这个只能靠自己去根据实际情况调试了，我做的如下：

<style>
.anyClass{
	margin:0  auto; 
	width:790px; 
	height:180px;
}
</style>

整个做下来调试还是相当容易的，要求很急，大概从找到调试好花了大半个小时的时间。

做下记录方便自己后面使用的时候再用。

转载于:https://my.oschina.net/hanweifeng/blog/172531