洗牌式新闻图片切换 多浏览器兼容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.<html xmlns="http://www.
<head>
<style>
*{ margin:0; padding:0; font-size:13px; border:0; font:宋体,arial}
li{ list-style-type:none}
.imgbox{ position:absolute;left:300px;top:50px; width:200px; height:130px; position:relative}
.img{ position:absolute; width:200px; height:130px}
.img li{ display:block; position:absolute; width:200px; height:130px}
.img div{ width:400px; height:130px; overflow:hidden; position:relative; left:-200px}
.img span{ display:block; width:700px; height:130px; position:absolute}
.img img{ width:200px; height:130px; position:absolute; left:200px}
.buttom{ position:absolute; left:10px; top:115px; overflow:hidden; z-index:4 ; width:190px}
.buttom li{ display:block; float:right; width:20px; border:solid 1px #000000; text-align:center; line-height:15px; background:#FF0; color: #000; cursor:pointer}
#a5{ background:#093}
</style>
<script>
var long = 200;//行进的距离 是图片的宽度
var step = 3 ;//图片移动的像素
var n = 6 ;//图片个数，根据你设置的图片个数而定，我用了6个图片
var start = 0;
var number = n;
var id = "box" + n ;
var direction = "left" ;
slideleft();
function slideleft(){
function slide(){
if( direction == "left" ){
start = start + step;
document.getElementById(id).scrollLeft = start;
if( start >= long){
direction = "right" ;
transposition();
buttoncolor(n);
}
}
if(direction == "right"){
start = start - step;
document.getElementById(id).scrollLeft = start;
if(start <= 0){
direction = "left" ;
n = n-1 ;
if(n == 0){ n = number;}
id = "box" + n ;
}
}
}
timer = setInterval(slide,20);
}
function transposition(){
var myul = document.getElementById("img");//获取id 为 "img" 的ul容器
var newli = document.createElement("li"); //创建一个新的li
var li01 = myul.getElementsByTagName("li").item(0);//获取ul容器中的第0条li
var li04 = myul.getElementsByTagName("li").item(number-1);//获取ul容器中的最后一条li
newli.innerHTML = li04.innerHTML; //将最后的li中的HTML代码赋给新创建的li
myul.removeChild(li04);//删除最后一条li
myul.insertBefore(newli,li01); //将新创建的li添加到第0条前
}
function buttoncolor(num){
for(i=1;i<=number;i++){
id2 = "a" + i ;
document.getElementById(id2).style.background = "#FF0" ;
}
var n = num ;
n = n -1 ;
if(n == 0){ n = number;}
var id2 = "a" + n ;
document.getElementById(id2).style.background = "#093" ;
}
function imgmouseover(){
clearInterval(timer);
}
function imgmouseout(){
slideleft() ;
}
function buttonmouseover(buttonnum){
clearInterval(timer);
for(var i=1;i<=number;i++){
id1 = "box" + i;
document.getElementById(id1).scrollLeft = 0 ;
document.getElementById(id1).style.display = "none" ;
}
var id2 = "box" + buttonnum ;
document.getElementById(id2).style.display = "block" ;
var num = buttonnum +1 ;
if( num == number+1){ num = 1;}
buttoncolor(num);
}
function buttonmouseout(){
for(var i=1;i<=number;i++){
id2 = "box" + i ;
document.getElementById(id2).style.display = "block" ;
}
slideleft();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>洗牌式新闻图片切换 多浏览器兼容 新闻中心胡勇编制</title>
</head>
<body>
<div class="imgbox">
<ul class="img" id="img" onmouseover="imgmouseover()" onmouseout="imgmouseout()">
<li id="li1"><div id="box1"><span><img src="images/an06.jpg" /></span></div></li>
<li id="li2"><div id="box2"><span><img src="images/an05.jpg" /></span></div></li>
<li id="li3"><div id="box3"><span><img src="images/an04.jpg" /></span></div></li>
<li id="li4"><div id="box4"><span><img src="images/an03.jpg" /></span></div></li>
<li id="li5"><div id="box5"><span><img src="images/an02.jpg" /></span></div></li>
<li id="li6"><div id="box6"><span><img src="images/an01.jpg" /></span></div></li>
</ul>
<ul class="buttom" onmouseout="buttonmouseout()">
<li id="a1" onmouseover="buttonmouseover(1)" >6</li>
<li id="a2" onmouseover="buttonmouseover(2)" >5</li>
<li id="a3" onmouseover="buttonmouseover(3)" >4</li>
<li id="a4" onmouseover="buttonmouseover(4)" >3</li>
<li id="a5" onmouseover="buttonmouseover(5)" >2</li>
<li id="a6" onmouseover="buttonmouseover(6)" >1</li>
</ul>
</div>
</body>
</html>
[ 本帖最后由 dsthy 于 2012-11-7 15:08 编辑 ]
