jquery 图片自动切换

发布时间:2017-09-02 15:50:34
jquery 图片自动切换 [html]

[html]

<!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=gb2312" />

<title>JQUERY实现图片自动切换</title>

<style>

body{margin:0px; padding:0px; font-family:Arial}

ul{list-style:none;margin:0px;padding:0px}

.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }

.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }

</style>

<script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>

</head>

<body>

<div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">

<div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">

<div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>

<div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>

<div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>

<div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>

</div>

<ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">

<li class="click_over">1</li>

<li class="click_out">2</li>

<li class="click_out">3</li>

<li class="click_out">4</li>

</ul>

</div>

<script language="javascript">

$(document).ready(function()

{

var len=$("#flash_num>li").length;

var index=1;

var int;

function showSys(num) //图片切换函数

{

$("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");

$("#flash_pic>div").fadeOut().eq(num).fadeIn();

}

function ziDong() //自动切换

{

if(index==len)

{

index=0;

}

showSys(index);

index=index+1;

}

int=setInterval(ziDong,3000);

$("#flash_num>li").click(function() //点击切换

{

var index_num=$("#flash_num>li").index(this);

showSys(index_num);

index=index_num+1; //改变全局变量的值,以便鼠标移开的时候能够衔接上

//$(".click_out").removeClass("click_over").eq(index).addClass("click_over");

//$(".click_out").eq(index).removeClass().addClass("click_over");

//alert(index);

});

$("#flash_outer").mouseover(function() //移动到上面时停止自动切换

{

clearInterval(int);

});

$("#flash_outer").mouseout(function() //移开时继续自动切换

{

int=setInterval(ziDong,3000);

});

});

</script>

</body>

</html>

,可视化专题,专题系统

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网页制作 http://www.feimao666.com