您的位置：首页 > Web前端 > JQuery

jquery 实现简单的图片轮换

2014-04-01 10:21 573 查看 
<!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>图片切换</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.mainbanner{width:100%;position:relative;height:389px;}
.mainbanner_window{margin:0 auto;position:relative;z-index:0; width:100%;}
.mainbanner_window ul{width:2000px;height:389px;position:relative;}
.mainbanner_window li{background:rgb(204, 204, 204);width:2000px;height:389px;text-align:center;font-size:0px;float:left;display:inline; display:none}
.mainbanner_list{left:50%;margin-left:-75px;margin-top: -30px;position:absolute;z-index: 1;}
.mainbanner_list li{width:30px;height:30px;overflow:hidden;float:left;display:inline;}
.mainbanner_list a{cursor:pointer;display:inline-block;*display:inline;zoom:1;height:10px;margin:2px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px; width:32px;}
.mainbanner_list li.active a{background:#333;text-decoration:none;}
.mainbanner_list li a:hover{background:#333;text-decoration:none;}
</style>

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
var currentindex=1;
function changeflash(i){
currentindex=i;
for(j=1;j<=4;j++){
if(j==i){
$("#flash"+j).addClass("active");
$("#f"+j).css("display","block");
}else{
$("#flash"+j).removeClass("active");
$("#f"+j).css("display","none");
}
}
}
function startAm(){
timerID = setInterval("timer_tick()",1000);
}
function stopAm(){
clearInterval(timerID);
}
function timer_tick(){
currentindex=(currentindex >= 4 ? 1 : currentindex+1);
changeflash(currentindex);
}

function mouseOver(id){
for(var i =1;i<=4;i++){
if(id == "flash"+i){
changeflash(i);
stopAm();
}
}
}
$(document).ready(function(){

$("#flash"+1).addClass("active");
$("#f"+1).css("display","block");

$(".mainbanner_list li").mouseover(function(){
var $id = this.id;
mouseOver($id)
}).mouseout(function(){
startAm();
});
$("#slideContainer li").mouseover(function(){
stopAm();
}).mouseout(function(){
startAm();
});
startAm();
});
</script>

</head>
<body>
<div class="mainbanner">
<div class="mainbanner_window">
<ul id="slideContainer">
<li id="f1"><a href="#"><img src="images/1.jpg" width="2000" height="389" alt=""  /></a></li>
<li id="f2"><a href="#"><img src="images/2.jpg" width="2000" height="389" alt=""  /></a></li>
<li id="f3"><a href="#"><img src="images/3.jpg" width="2000" height="389" alt=""  /></a></li>
<li id="f4"><a href="#"><img src="images/4.jpg" width="2000" height="389" alt=""  /></a></li>
</ul>
</div>
<ul class="mainbanner_list">
<li id="flash1"><a href="javascript:void(0);">1</a></li>
<li id="flash2"><a href="javascript:void(0);">2</a></li>
<li id="flash3"><a href="javascript:void(0);">3</a></li>
<li id="flash4"><a href="javascript:void(0);">4</a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航