实现图片自动循环滚动效果的jquery插件scroller_roll.js_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java

Simple images and title scroller with jquery plugin

Demo1

Demo2

Demo2

Usage

Add js and css files

<link href="css/scroller_roll.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/scroller_roll.js"></script>

Add html code

<div id="scroller_roll1" class="scroller_roll">
<ul>
<li><a href="link1" title="title1"><img src="images/slideshow_large_1.jpg" width="60" height="60" alt="title"/></a></li>
<li><a href="link2" title="title2"><img src="images/slideshow_large_2.jpg" width="60" height="60" alt="title"/></a></li>
<li><a href="link3" title="title3"><img src="images/slideshow_large_3.jpg" width="60" height="60" alt="title"/></a></li>
<li><a href="link4" title="title4"><img src="images/slideshow_large_4.jpg" width="60" height="60" alt="title"/></a></li>
</ul>
<div style="clear: both"></div>
</div>

Add start script

        <script language="javascript" type="text/javascript">
$(function() {
$("#scroller_roll1").scroller_roll({
title_show: 'enable',//enable disable
time_interval: '15',
window_background_color: "#C1F0FF",
window_padding: '1',
border_size: '1',
border_color: '#0099CC',
images_width: '75',
images_height: '70',
images_margin: '5',
title_size: '12',
title_color: 'black',
show_count: '3'
});
});
</script>

代码整理:时代Java(NowJava.com) 

转载请注明出处,此代码仅供学习交流,请勿用于商业用途。

下载代码说明
X关闭

实现图片左右自动循环滚动效果的jquery插件scroller_roll.js

实现图片自动循环滚动效果的jquery插件scroller_roll.js,通过此插件,只需要将需要循环滚动的图片在html代码中排列好,就可以实现图片的左右自动循环滚动展示,效果非常实用。