算法:
1、首先实现轮转:
(1)获取轮转对象: var play=document.getElementById("pwSlidePlayer"); var divs=play.getElementsByTagName("div");
(2)遍历对象,对单个对象进行操作,如果是当前的对象就让其显示,否则隐藏
(3)外部定义一个变量,充当当前对象索引,利用i++方法,对象进行累加转变,这样就可以得到每次执行函数,当前对象不一样,并且是循环进行
(4)最后,既然函数每次变化,我们就可以利用setInterval()来实现动画效果,图片开始切换
2、现实li按钮同时转换:
(1)获取li对象
(2)遍历对象
...............跟上面差不多,代码可以写在同一函数内
3、修补:鼠标滑过图片和按钮时停止,离开时走动
利用clearInterval()函数,注意鼠标离开时要加上一样的对象变量,否则不起效果
4、修补:鼠标点击按钮时当前样式改变,并且对应图片显示
可以做一个函数:传入一个参数,如果i==当前参数就显示,否则隐藏
代码:
function hh(h){
for(var i=0;i<lis.length;i++){
if(h==i){
divs[i].style.display="block";
lis[i].style.color="red";
lis[i].style.backgroundColor="lightblue";
}else{
divs[i].style.display="none";
lis[i].style.color="white";
lis[i].style.backgroundColor="#0C0";
}
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>LAMP Linux MySQL</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href="LAMP%20Linux%20MySQL_files/global.css">
<style>
li{
width:20px;
height:20px;
background:#0C0;
border:1px solid #000;
margin-left:10px;
float:left;
line-height:20px;
text-align:center;
color:#FFF;
}
body {
margin: 0;
padding: 0;
color:#777;
font:12px Verdana,Arial,Tahoma;
text-align:center;
background:#fff;
}
img {
border:none;
}
/* 首页图片播放器 */
.pwSlide {
width:350px;
position:relative;
height:212px;
overflow:hidden;
border:1px solid #e0e0e0;
}
.pwSlide img {
height:212px;
width:348px;
}
.pwSlide-bg {
width:348px;
z-index:1;
position:absolute;
bottom:0px;
background:#000;
left:0px;
right:0px;
height:23px;
overflow:hidden;
filter:alpha(opacity=39);-moz-opacity:0.39;opacity:0.39;
}
.pwSlide h3 {
margin:0px;
padding:0px;
font-size:12px;
font-weight:100;
color:#fff;
line-height:23px;
padding:0 8px;
position:absolute;
bottom:1px;
z-index:2;
width:348px;
cursor:pointer;
left:0;
background:#0F0;
}
</style>
</HEAD>
<BODY>
<ul id="uu">
<li onClick="hh(0);">1</li>
<li onClick="hh(1);">2</li>
<li onClick="hh(2);">3</li>
</ul>
<DIV id=pwSlidePlayer class="pwSlide cc">
<DIV id=Switch_0><A
href="http://localhost/xscms_new/index.php?a=article&aid=3"
target=_blank><IMG src="http://img.ivsky.com/img/bizhi/img/201201/13/ana_beatriz_barros-066.jpg">
<H3>分低功耗</H3></A></DIV>
<DIV style="DISPLAY: none" id=Switch_2><A
href="http://localhost/xscms_new/index.php?a=article&aid=2"
target=_blank><IMG src="http://img.ivsky.com/img/bizhi/img/201201/13/ana_beatriz_barros-067.jpg">
<H3>dfghsg</H3></A></DIV>
<DIV style="DISPLAY: none" id=Switch_3><A
href="http://localhost/xscms_new/index.php?a=article&aid=1"
target=_blank><IMG src="http://img.ivsky.com/img/bizhi/img/201201/13/ana_beatriz_barros-068.jpg">
<H3>title</H3></A></DIV>
</DIV>
<script>
var play=document.getElementById("pwSlidePlayer");
var uu=document.getElementById("uu");
var lis=document.getElementsByTagName('li');
var divs=play.getElementsByTagName("div");
var pre=0;
var go=setInterval("playswf()",1000);
function playswf(){
for(var i=0;i<divs.length;i++){
divs[i].οnmοuseοver=function(){
clearInterval(go);
}
divs[i].οnmοuseοut=function(){
go=setInterval("playswf()",3000);
}
lis[i].οnmοuseοver=function(){
clearInterval(go);
this.style.cursor='pointer';
}
lis[i].οnmοuseοut=function(){
go=setInterval("playswf()",3000);
}
if(pre==i){
divs[i].style.display="block";
lis[i].style.color="red";
lis[i].style.backgroundColor="lightblue";
}else{
divs[i].style.display="none";
lis[i].style.color="white";
lis[i].style.backgroundColor="#0C0";
}
}
pre++;
if(pre==3){
pre=0;
}
}
function hh(h){
for(var i=0;i<lis.length;i++){
if(h==i){
divs[i].style.display="block";
lis[i].style.color="red";
lis[i].style.backgroundColor="lightblue";
}else{
divs[i].style.display="none";
lis[i].style.color="white";
lis[i].style.backgroundColor="#0C0";
}
}
}
</script>
</DIV>
</BODY></HTML>