自动切换图片

young_autumn

于 2011-03-23 23:11:27 发布

阅读量82

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/kqy7758/article/details/83877530

版权

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