图片带焦点并且有左右箭头的可自动可手动切换的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 左右滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:none;}
a{color:#1D569C;text-decoration:none;}
a:hover{color:#ED3E22;text-decoration:underline;}
/* focus */
.focus{width:620px;height:340px;float:left;border:3px solid #d9d9d9;position:relative;}
.focus #pic{width:620px;height:340px;overflow:hidden;}
.focus #pic ul{width:4216px;height:340px;float:left;}
.focus #pic li{width:620px;height:340px;float:left;}
.focus #pic li img{width:620px;height:340px;float:left;}
.focus .tip-bg{width:620px;height:21px;background:#000;filter:alpha(opacity=80);opacity:0.80;position:absolute;left:0;bottom:0;z-index:12;}
.focus #tip{width:96px;height:14px;position:absolute;left:40%;margin:-17px 0 0;z-index:13;}
.focus #tip ul li{width:14px;height:14px;float:left;display:inline;margin:0 5px;cursor:pointer;background:url(images/focus_tip.png) no-repeat;}
.focus #tip ul li.current{background:url(images/focus_tip_current.png) no-repeat;}
.focus .btn{width:42px;height:9px;position:absolute;right:0;bottom:5px;z-index:14;overflow:hidden;}
.focus .btn ul{width:100%;float:left;}
.focus .btn li{width:7px;height:9px;float:left;display:inline;margin:0 7px;cursor:pointer;overflow:hidden;}
.focus .btn li.btn-left{background:url(images/focus_btn_left.png) no-repeat left top;}
.focus .btn li.btn-right{background:url(images/focus_btn_right.png) no-repeat left top;}
.focus .show{display:block!important;}
</style>
</head>
<body>
<div class="focus">
<div id="pic">
<ul>
<li><a href="#/"><img width="620" height="340" src="images/2.jpg" /></a></li>
<li><a href="#/"><img width="620" height="340" src="images/3.jpg" /></a></li>
<li><a href="#/"><img width="620" height="340" src="images/4.jpg" /></a></li>
<li><a href="#/"><img width="620" height="340" src="images/5.jpg" /></a></li>
</ul>
</div>
<div class="tip-bg"></div>
<div id="tip">
<ul>
<li id="smallimg_1" onclick="change(1)" class="current"></li>
<li id="smallimg_2" onclick="change(2)"></li>
<li id="smallimg_3" onclick="change(3)"></li>
<li id="smallimg_4" onclick="change(4)"></li>
</ul>
</div>
<div class="btn">
<ul>
<li class="btn-left" id="focus_btn_left" onclick="focus_prev();"></li>
<li class="btn-right" id="focus_btn_right" onclick="focus_next();"></li>
</ul>
</div>
</div>
<script>
var isround = "";
var scrollmove = "";
var masktime = 10;
var focus_cur = 1;
var p = document.getElementById("pic").getElementsByTagName("li");
var h = document.getElementById("tip").getElementsByTagName("li");
function change(id){
clearTimeout(isround);
clearInterval(scrollmove);
for (var i = 1; i <= h.length; i++) {
if(i == id){
document.getElementById("smallimg_"+i).className="current";
}else{
document.getElementById("smallimg_"+i).className="";
}
}
if ((next = id + 1) > h.length){
next = 1;
}
isround = setTimeout("change("+next+")",4000);
scrollmove = setInterval("scrollMove("+id+")",masktime);
focus_cur = id;
}
function scrollMove(m){
var srl = document.getElementById("pic").scrollLeft;
var dsrl = Math.floor((p[0].clientWidth*(m-1)-srl)/5);
var xsrl = Math.ceil((p[0].clientWidth*(m-1)-srl)/5);
if(srl > p[0].clientWidth*(m-1)){
document.getElementById("pic").scrollLeft = srl + dsrl;
}else if(srl < p[0].clientWidth*(m-1)){
document.getElementById("pic").scrollLeft = srl + xsrl;
}else{
clearInterval(scrollmove);
}
}
function focus_prev(){
var prev = (focus_cur+3)%4;
if(prev == "0"){
prev = 4;
}
change(prev);
}
function focus_next(){
var next = (focus_cur+1)%4;
if(next == "0"){
next = 4;
}
change(next);
}
isround = setTimeout("change(2)",8000);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 左右滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:none;}
a{color:#1D569C;text-decoration:none;}
a:hover{color:#ED3E22;text-decoration:underline;}
/* focus */
.focus{width:620px;height:340px;float:left;border:3px solid #d9d9d9;position:relative;}
.focus #pic{width:620px;height:340px;overflow:hidden;}
.focus #pic ul{width:4216px;height:340px;float:left;}
.focus #pic li{width:620px;height:340px;float:left;}
.focus #pic li img{width:620px;height:340px;float:left;}
.focus .tip-bg{width:620px;height:21px;background:#000;filter:alpha(opacity=80);opacity:0.80;position:absolute;left:0;bottom:0;z-index:12;}
.focus #tip{width:96px;height:14px;position:absolute;left:40%;margin:-17px 0 0;z-index:13;}
.focus #tip ul li{width:14px;height:14px;float:left;display:inline;margin:0 5px;cursor:pointer;background:url(images/focus_tip.png) no-repeat;}
.focus #tip ul li.current{background:url(images/focus_tip_current.png) no-repeat;}
.focus .btn{width:42px;height:9px;position:absolute;right:0;bottom:5px;z-index:14;overflow:hidden;}
.focus .btn ul{width:100%;float:left;}
.focus .btn li{width:7px;height:9px;float:left;display:inline;margin:0 7px;cursor:pointer;overflow:hidden;}
.focus .btn li.btn-left{background:url(images/focus_btn_left.png) no-repeat left top;}
.focus .btn li.btn-right{background:url(images/focus_btn_right.png) no-repeat left top;}
.focus .show{display:block!important;}
</style>
</head>
<body>
<div class="focus">
<div id="pic">
<ul>
<li><a href="#/"><img width="620" height="340" src="images/2.jpg" /></a></li>
<li><a href="#/"><img width="620" height="340" src="images/3.jpg" /></a></li>
<li><a href="#/"><img width="620" height="340" src="images/4.jpg" /></a></li>
<li><a href="#/"><img width="620" height="340" src="images/5.jpg" /></a></li>
</ul>
</div>
<div class="tip-bg"></div>
<div id="tip">
<ul>
<li id="smallimg_1" onclick="change(1)" class="current"></li>
<li id="smallimg_2" onclick="change(2)"></li>
<li id="smallimg_3" onclick="change(3)"></li>
<li id="smallimg_4" onclick="change(4)"></li>
</ul>
</div>
<div class="btn">
<ul>
<li class="btn-left" id="focus_btn_left" onclick="focus_prev();"></li>
<li class="btn-right" id="focus_btn_right" onclick="focus_next();"></li>
</ul>
</div>
</div>
<script>
var isround = "";
var scrollmove = "";
var masktime = 10;
var focus_cur = 1;
var p = document.getElementById("pic").getElementsByTagName("li");
var h = document.getElementById("tip").getElementsByTagName("li");
function change(id){
clearTimeout(isround);
clearInterval(scrollmove);
for (var i = 1; i <= h.length; i++) {
if(i == id){
document.getElementById("smallimg_"+i).className="current";
}else{
document.getElementById("smallimg_"+i).className="";
}
}
if ((next = id + 1) > h.length){
next = 1;
}
isround = setTimeout("change("+next+")",4000);
scrollmove = setInterval("scrollMove("+id+")",masktime);
focus_cur = id;
}
function scrollMove(m){
var srl = document.getElementById("pic").scrollLeft;
var dsrl = Math.floor((p[0].clientWidth*(m-1)-srl)/5);
var xsrl = Math.ceil((p[0].clientWidth*(m-1)-srl)/5);
if(srl > p[0].clientWidth*(m-1)){
document.getElementById("pic").scrollLeft = srl + dsrl;
}else if(srl < p[0].clientWidth*(m-1)){
document.getElementById("pic").scrollLeft = srl + xsrl;
}else{
clearInterval(scrollmove);
}
}
function focus_prev(){
var prev = (focus_cur+3)%4;
if(prev == "0"){
prev = 4;
}
change(prev);
}
function focus_next(){
var next = (focus_cur+1)%4;
if(next == "0"){
next = 4;
}
change(next);
}
isround = setTimeout("change(2)",8000);
</script>
</body>
</html>