代码：
<title></title><style>
body{
margin:0
padding:0
background-color:transparent
}
div{
width:350px
overflow:hidden
}
table img{
width:100px
height:100px
}
</style>
</head>
<body>
<div id="picScroll">
<table>
<tr>
<td><a><img src="../pic/1.jpg" /></a></td>
<td><a><img src="../pic/2.jpg"></a></td>
<td><a><img src="../pic/3.jpg"></a></td>
<td><a><img src="../pic/4.jpg"></a></td>
<td><a><img src="../pic/5.jpg"></a></td>
</tr>
</table>
</div>
</body>
</html>
<script>
var target = $('#picScroll')
var left = 0
var speed = 30
function Marqeen() {
if (target[0].offsetWidth <= left) {
left -= target[0].offsetWidth
}
else {
left++
}
target.scrollLeft(left)
}
$(function () {
var marQueen = window.setInterval(Marqeen, speed)
target.mouseover(function () {
clearInterval(marQueen)
})
target.mouseout(function () {
marQueen = window.setInterval(Marqeen, speed)
})
})
</script>
1.jquery.imgScroll.js
(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{})var imgLen=$(object.scrollImgBox).lengthvar imgNum=0var tabNum=0var nowIndex=0var indexvar scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar$(object.scrollImgBox).clone().appendTo($(this))function changeEffectNext(){if(object.changeType=='slide'){if(imgNum<imgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0})imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum})if(tabNum<imgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass)$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum<imgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow')$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow')$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass)$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}function changeEffectPrev(){if(object.changeType=='slide'){if(imgNum>0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen})imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum})if(tabNum>0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass)$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum>0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow')$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow')$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass)$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime)$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)})$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)})$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})}$(object.botNext).click(function(){changeEffectNext()})$(object.botPrev).click(function(){changeEffectPrev()})function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass)$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass)if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow')$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=indextabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index()changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index()changesmallImg(index)})}}})})(jQuery)2.html结构
a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s-o-transition:all .2s ease-in-out 0s-moz-transition:all .2s ease-in-out 0s-ms-transition:all .2s ease-in-out 0stransition:all .2s ease-in-out 0s}.lbCon{margin-top:33pxmargin-bottom:37pxposition: relative}
.lbBtn{display:blockposition: absolutetop:0width:40pxheight:143pxborder:1px solid #D7D2CAbackground:url('../../../images/special/140801/ctr_prev.png') no-repeat center center}
.lbPrev{left:0}.lbNext{right:0background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color: #ddd}
.lbBox{width:900pxheight:145pxmargin-left: 50pxoverflow: hiddenposition: relative}
.lbList{width:1000%}
.lbBox ul{float:left}
.lbBox li{float:leftwidth:150pxheight:145pxoverflow: hidden}
.lbPeo{text-align:centerline-height:18pxfont-family:"微软雅黑"color:#333}
.lbPeo img{display:blockborder: 1px solid #dddwidth:84pxheight:103pxmargin-left:32px*margin-left:5px}
.lbPeo h5{font-weight: boldfont-size:12pxpadding-top: 5px*padding-top: 0}
.lbPeo h6{font-size:12px}
.lbBox li a:hover{text-decoration: none}
.lbBox li a:hover .lbPeo{color:#ff9600} <!-- 人物-->
<div class="lbCon comWith clearfix">
<div class="lbBox">
<div class="lbList">
<ul>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
</ul>
<ul>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大2红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李2大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><a href="" target="_blank">
<div class="lbPeo clearfix">
<img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
</ul>
</div>
</div>
<a href="javascript:" class="lbBtn lbPrev"></a>
<a href="javascript:" class="lbBtn lbNext"></a>
</div>
3.页面调用：
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.imgScroll.js"></script>(上面那个js)
$('.lbCon .lbBox .lbList').imgScroll({firstDiv: '.lbCon .lbBox',
scrollBox: '.lbCon .lbBox .lbList',
scrollImgBox: '.lbCon .lbBox ul',
botPrev: '.lbCon .lbPrev',
botNext: '.lbCon .lbNext',
changeType: "slide",
thumbNowClass: 'on',
thumbOverEvent: true,
changeTime: 5000,
ImgBoxMar: 0,
flag: false
})
4.至于鼠标滑过 显示左右按钮,可以这么写（思路:css默认隐藏左右按钮，鼠标滑过显示左右按钮，划出隐藏，需要引入jquery.js）
$(function(){$(".wj_jdt_1").bind("onmouseover",function(){
$(".ctr_btn").show()
}).bind("onmouseout",function(){
$(".ctr_btn").hide()
})
})
大体是这么个意思，至于怎么延伸在你
用jquery写的，代码很简洁：<script src="jquery.js"></script>
<script>
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css().find("li:first").appendTo(this)
})
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',2000)
)}
</script>
<div id="scrollDiv">
<ul>
<li>滚动内容</li>
</ul>
</div>
希望对你有所帮助
