jQuery 图片向左滚动代码

html

<div class="tf">
	<div class="tfTitle">
    	<h3>医院环境</h3>
    </div>
    <div class="tfList" id="scroller_roll">
        <ul class="f_l">
        	<li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
            <li class="f_l"><a href="###"><img src="images/tf.jpg" class="f_l" /></a></li>
        </ul>
    </div>
</div>

 

css

/*幻灯片区*/
.tf{ width:978px; height:175px; margin:8px auto 0 auto; border:1px solid #ccc; }
.tfTitle{ background:#f2f2f2 url(../images/ico.gif) no-repeat 10px 8px; border-top:1px solid #fff; border-bottom:1px solid #fff; height:30px;}
.tfTitle h3{ padding-left:32px; color:#f09; font-size:14px; font-weight:bold; line-height:28px; }
.tfList{ border-top:1px solid #ccc; width:960px; height:140px; margin:0 auto; overflow: hidden;}
.tfList ul{ width:960px; height:140px;}
.tfList ul li{ width:172px; height:107px; padding:22px 0 0 20px;}
.tfList ul li img{}

 

调用

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/scrollerRoll.js"></script>
<script language="javascript" type="text/javascript">
	$(function() {
		$("#scroller_roll").scroller_roll({
			title_show: 'disable',//enable  disable
			time_interval: '30',
			window_background_color: "none",
			window_padding: '1',
			border_size: '0',
			border_color: '#0099CC',
			images_width: '172',
			images_height: '107',
			images_margin: '0',
			title_size: '12',
			title_color: 'black',
			show_count: '4'
		});
	});
</script>

 

效果图：