图片轮转播放器实现原理

来源：互联网发布：知豆电动车网上怎么租编辑：程序博客网时间：2024/05/29 07:27

算法:

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==当前参数就显示，否则隐藏

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>LAMP Linux MySQL</TITLE>

<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>

</BODY></HTML>