首先,这个是简易版的,所以程序可能会有不完善,见谅,老样子,话不多说,直接上码。
首先我们编写html的代码,一拨胡乱分析过后,我们发现布局可以简化为就是一个盒子中装了两个ul标签,左边一个右边一个,这样我们可以这样布局。
<div id="BOSS" >
<ul id="one">
<li style="display:list-item;">
<img src="img/1.jpg" style="width:1000px;height:300px;" />
</li>
<li>
<img src="img/2.jpg" style="width:1000px;height:300px;" />
</li>
<li>
<img src="img/3.jpg" style="width:1000px;height:300px;" />
</li>
<li>
<img src="img/4.JPG" style="width:1000px;height:300px;" />
</li>
<li>
<img src="img/5.jpg" style="width:1000px;height:300px;" />
</li>
</ul>
<ul id="two">
<li class="current"><a href="#">帅1</a></li>
<li><a href="#">帅2</a></li>
<li><a href="#">帅3</a></li>
<li><a href="#">帅4</a></li>
<li class="last"><a href="#">帅5</a></li>
</ul>
</div>
当然,图片的话最好是自己整理下,不一定要和我的一样,但是为了方便遍历和插入,还是取数字的好。
那么接下来是样式表,样式表的话我就简写了,当然,你们可以用定位来做右边的选择栏,我为了图方便就直接写了float:right。
<style type="text/css">
#one {
width:1000px;
height:300px;
list-style:none;
display:inline-block;
}
#one li {
display:none;
}
#two {
width:247px;
height:300px;
float:right;
list-style:none;
line-height:50px;
}
#two li {
}
#two .current {
background-color:#000;
color:#fff;
}
那么接下来才是重点,上js代码:
<script type="text/javascript">
//首先是showImage函数,用来隐藏li和增加样式
function showIame(index){
currentIndex=index;
$("#one li ").hide();
$("#one li").eq(index).stop(true).fadeIn(500);
$("#two li").removeClass("current");
$("#two li").eq(index).addClass("current");
}
//现在是star函数,用来播放图片
function star(){
var currentIndex=0;
var temId;
temId=window.setInterval(funciton(){
if(currentIndex<9){
currentIndex++;
}
else{
currentIndex=0;
}
showImage(currentIndex);
},1000);
}
//现在是停止函数
function stop(){
windows.clearInterval(temId);
}
$(function(){
$("#BOSS").hover(
function () {star(); },
function () {stop();} );
$("#two li").each(function (index){
$(this).mouseover(function(){showImage(index);})
});
});
</script>