jQuery 无缝图片横向滚动代码

html

<div class="t2" id="container">
	<div class="t2l f_l" id="btnNext"></div>
    <div class="t2c f_l" id="listBox">
    	<div id="list">
    	<dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝1</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝2</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝3</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝4</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝5</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝6</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝1</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝2</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝3</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝4</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝5</a></dd>
        </dl>
        <dl class="f_l">
        	<dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt>
            <dd><a href="###" title="吴珍宝">吴珍宝6</a></dd>
        </dl>
        </div>
    </div>
    <div class="t2r f_l" id="btnPrev"></div>
    <img src="images/famous.png"  width="50" height="155" class="t2Position" />
</div>

 

css

/*第二区样式*/
.t2{ width:980px; height:214px; background:url(../images/t2Bg.gif) repeat-x; margin:13px auto 0 auto; border-bottom:2px solid #f09; border-top:6px solid #f09; position:relative;}
.t2l{ width:100px; height:214px; background:url(../images/onLeft.gif) no-repeat 63px 84px;}
.t2c{ width:816px; height:180px; overflow:hidden;}
.t2c dl{ width:136px; padding-top:20px;}
.t2c dl dt{ }
.t2c dl dt img{ width:105px; height:123px; border:1px solid #ccc; display:block; padding:4px;} 
.t2c dl dd{ width:115px; text-align:center; padding-top:8px;} 
.t2c dl dd a{ font-size:14px; color:#f09; font-size:14px; font-weight:bold;}
.t2r{ width:50px; height:214px; background:url(../images/onRight.gif) no-repeat 0px 84px;}
.t2Position{ position:absolute; left:-7px; top:30px;}

 

引用

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.imageScroller.js"></script>
<script type="text/javascript">
        $(function () {
            $("#listBox").imageScroller({
                next: "btnNext",
                prev: "btnPrev",
                frame: "list",
                child: "dl",
                auto: true
            });
        });
</script>

 

 效果图：