轮播JS动画
<!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>幻灯片播放js</title>
<style type="text/css">
*{margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif;}
.fileSlide{display:block;}
.diapositive{display:none;}
.content{width:986px; margin:0px auto; position:relative;}
.content_image{width:986px; height:380px; }
.content_image ul{list-style-type:none;}
.content_title{ width:200px; height:30px; position:absolute; top:350px; right:0px;}
.content_title ul{list-style-type:none;}
.content_title ul li{float:left; cursor:pointer; margin-left:5px; display:inline;}
.shallow{ width:35px; height:30px; background-color:#F9F; font-size:14px; font-weight:bold; line-height:30px; text-align:center; opacity:0.7;}
.deppon{background-color:#F00; width:35px; height:30px; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#FFFFFF;}
</style>
</head>
<body>
<!---html布局和css样式控制实现这样的有很多种，根据个人习惯可以不同，这里是我写的一种-->
<div class="content">
<div class="content_image">
<ul class="imageUL">
<li class="fileSlide" id="switch_image_1" index="1"><a href="#"><img src="images/0BD5DCC1CAA14FACA273AB30E08FF766.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_2" index="2"><a href="#"><img src="images/6343FBEA187A5FD7D54D07EC9D0492C4.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_3" index="3"><a href="#"><img src="images/7825557ABCC86509A53B190EAFB52637.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_4" index="4"><a href="#"><img src="images/BCD299F0E1072836F92EB8E1CD5307A9.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_5" index="5"><a href="#"><img src="images/BEE35F56FC622A2D5B03D3186E0B62B9.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
</ul>
</div>
<div class="content_title">
<ul class="titleUL">
<li id="switch_title_1" class="shallow deppon" index="1">1</li>
<li id="switch_title_2" class="shallow" index="2">2</li>
<li id="switch_title_3" class="shallow" index="3">3</li>
<li id="switch_title_4" class="shallow" index="4">4</li>
<li id="switch_title_5" class="shallow" index="5">5</li>
</ul>
</div>
</div>
<!--引用外部js-->
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
=====================================index.js代码===================================
$(function(){
var timer = setTimeout(change,3000); //在当前DOM结构加载完毕后3秒执行定时器，调用change函数
function change(){
var length = $("li[id^=switch_image_]").length; //以属性id为"switch_image_"开头的li个数
var index = $("li[class=fileSlide]").attr("index"); //获取属性class为fileSlide的li中属性为index的值
var next_index;
if(index < length){
next_index = parseInt(index) + 1;
}else{
next_index = 1;
}
//图片和文字对应切换。 移除当前执行动画的li元素的css样式，给下一个增加动画样式
$("li[id^=switch_image_"+ index +"]").removeClass("fileSlide").addClass("diapositive");
$("li[id^=switch_image_"+ next_index +"]").removeClass("diapositive").addClass("fileSlide");
$("li[id^=switch_title_"+ next_index +"]").removeClass("shallow").addClass("deppon")
.siblings() //获取当前元素的节点上同级兄弟元素
.removeClass("deppon").addClass("shallow");
//3秒后继续调用change函数
timer = setTimeout(change,3000);
}
$(".titleUL li").mouseover(function(){
clearTimeout(timer); //清除定时器
var flg = $(this).attr("index"); //获取当前li元素中属性index的值
$("li[id^=switch_title_"+ flg +"]").removeClass("shallow").addClass("deppon")
.siblings() //获取当前元素的节点上同级兄弟元素
.removeClass("deppon").addClass("shallow");
$("li[id^=switch_image_"+ flg +"]").removeClass("diapositive").addClass("fileSlide")
.siblings() //获取当前元素的节点上同级兄弟元素
.addClass("diapositive").removeClass("fileSlide");
}).mouseout(function(){
//开启定时器
timer = setTimeout(change,3000);
});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片播放js</title>
<style type="text/css">
*{margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif;}
.fileSlide{display:block;}
.diapositive{display:none;}
.content{width:986px; margin:0px auto; position:relative;}
.content_image{width:986px; height:380px; }
.content_image ul{list-style-type:none;}
.content_title{ width:200px; height:30px; position:absolute; top:350px; right:0px;}
.content_title ul{list-style-type:none;}
.content_title ul li{float:left; cursor:pointer; margin-left:5px; display:inline;}
.shallow{ width:35px; height:30px; background-color:#F9F; font-size:14px; font-weight:bold; line-height:30px; text-align:center; opacity:0.7;}
.deppon{background-color:#F00; width:35px; height:30px; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#FFFFFF;}
</style>
</head>
<body>
<!---html布局和css样式控制实现这样的有很多种，根据个人习惯可以不同，这里是我写的一种-->
<div class="content">
<div class="content_image">
<ul class="imageUL">
<li class="fileSlide" id="switch_image_1" index="1"><a href="#"><img src="images/0BD5DCC1CAA14FACA273AB30E08FF766.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_2" index="2"><a href="#"><img src="images/6343FBEA187A5FD7D54D07EC9D0492C4.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_3" index="3"><a href="#"><img src="images/7825557ABCC86509A53B190EAFB52637.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_4" index="4"><a href="#"><img src="images/BCD299F0E1072836F92EB8E1CD5307A9.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
<li class="diapositive" id="switch_image_5" index="5"><a href="#"><img src="images/BEE35F56FC622A2D5B03D3186E0B62B9.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
</ul>
</div>
<div class="content_title">
<ul class="titleUL">
<li id="switch_title_1" class="shallow deppon" index="1">1</li>
<li id="switch_title_2" class="shallow" index="2">2</li>
<li id="switch_title_3" class="shallow" index="3">3</li>
<li id="switch_title_4" class="shallow" index="4">4</li>
<li id="switch_title_5" class="shallow" index="5">5</li>
</ul>
</div>
</div>
<!--引用外部js-->
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
=====================================index.js代码===================================
$(function(){
var timer = setTimeout(change,3000); //在当前DOM结构加载完毕后3秒执行定时器，调用change函数
function change(){
var length = $("li[id^=switch_image_]").length; //以属性id为"switch_image_"开头的li个数
var index = $("li[class=fileSlide]").attr("index"); //获取属性class为fileSlide的li中属性为index的值
var next_index;
if(index < length){
next_index = parseInt(index) + 1;
}else{
next_index = 1;
}
//图片和文字对应切换。 移除当前执行动画的li元素的css样式，给下一个增加动画样式
$("li[id^=switch_image_"+ index +"]").removeClass("fileSlide").addClass("diapositive");
$("li[id^=switch_image_"+ next_index +"]").removeClass("diapositive").addClass("fileSlide");
$("li[id^=switch_title_"+ next_index +"]").removeClass("shallow").addClass("deppon")
.siblings() //获取当前元素的节点上同级兄弟元素
.removeClass("deppon").addClass("shallow");
//3秒后继续调用change函数
timer = setTimeout(change,3000);
}
$(".titleUL li").mouseover(function(){
clearTimeout(timer); //清除定时器
var flg = $(this).attr("index"); //获取当前li元素中属性index的值
$("li[id^=switch_title_"+ flg +"]").removeClass("shallow").addClass("deppon")
.siblings() //获取当前元素的节点上同级兄弟元素
.removeClass("deppon").addClass("shallow");
$("li[id^=switch_image_"+ flg +"]").removeClass("diapositive").addClass("fileSlide")
.siblings() //获取当前元素的节点上同级兄弟元素
.addClass("diapositive").removeClass("fileSlide");
}).mouseout(function(){
//开启定时器
timer = setTimeout(change,3000);
});
});