JQUERY实现图片切换

最新推荐文章于 2022-11-10 08:56:30 发布

我的tcl

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量3.9k

点赞数 1

文章标签： jquery function callback list class filter

<!--
Create By Lyc-2010-06-07
text()方法是取得所有匹配元素的内容
图片切换
filter()则是筛选div的class为play_list的元素,是对自身集合元素筛选。
fadeOut(speed,[Callback])通过不透明的变化来实现所有匹配的淡出效果:
fadeIn(speed,[Callback])通过不透明的变化来实现所有匹配的淡入效果
hover(over,out)用法:当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。
当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在
特定元素中的检测.
clearInterval() 方法可取消由setInterval() 设置的timeout
siblings([expr])得到所有匹配元素集合中各个元素的所有兄弟元素集合。返回匹配元素集合
AutoPlay():自定义函数
功能：图片自动切换

-->
<html>
<head>
<title>图片切换和自动切换</title>
<style type="text/css">
*{font-size:12px; font-family:Verdana;margin:0;padding:0}
.play img {
border:0px;
}
.play {
width:346px;
height:191px;
overflow:hidden;
margin:100px 0 0 300px;
}
.play_text {
position:absolute;
margin:141px 0 0 296px;
height:50px;width:60px;
z-index:1002;
}
.play_text ul {
list-style-type:none;
width:100px;
height:50px;
display:block;
padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;
}
.play_text ul li {
width:14px;
height:14px;
float:left;
background-color:#000;
display:block;
color:#FFF;
text-align:center;
margin:1px;
cursor:pointer;
font-family:"Courier New";
}
.play_list a{
display:block;
width:400px;height:191px;
position:absolute;
overflow:hidden;
}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var t =0;
var n = 0
var count = 0;
$(function(){
//统计当前链接总个数
count = $(".play_list a").size();
$(".play_text li").click(function()
{
  //获取文本列表总数
  var i = $(this).text()-1;
  n = i;
  //如果超出范围，则不进行图片处理
  if(i>=count) return ;
  //对当前链接列表进行过滤，并且对其子元素进行动画处理
  $(".play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
  //遍历符合的无素，并进行CSS样式处理
  $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
});
t = setInterval("AutoPlay()", 1000);
$(".play").hover(function(){clearInterval(t)}, function(){t = setInterval("AutoPlay()", 2000);});
});
//自动切换函数
function AutoPlay()
{
n = n >= (count - 1) ? 0 : n + 1;
//触发CLICK事件
$(".play_text li").eq(n).trigger('click');
}
</script>
</head>
<body>
<br />
<div class="play">
<div class="play_text">
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>
</div>
<div class="play_list">
<a href="#" target="_blank">
  <img src="./imgs/1.jpg" title="" alt="#" />
</a>
<a href="#" target="_blank">
  <img src="./imgs/2.jpg" title="" alt="#" />
</a>
<a href="#" target="_blank">
  <img src="./imgs/3.jpg" title="" alt="#" />
</a>
</div>
</div>
</body>
</html>