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

js实现图片轮播效果

2015-08-12 16:26 881 查看

<!DOCTYPEhtml>
<html>
<head>

<metacharset="UTF-8">
<title>
图片轮播效果</title>

<styletype="text/css">

#auto_move

{
width:480px;

height:130px;
margin:40pxauto;

text-align:center

}

#auto_moveimg

{
float:left;
width:426px;

}

#auto_moveli

{
list-style:none;
width:20px;
height:20px;
border:1pxred solid;
margin-top:8px;
margin-left:5px;

}

#auto_moveul

{
float:left;
width:20px;
margin:0px;
padding:0px;

}

.selectColor

{
background:orange;

}

.unselectColor

{
background:wuite;

}

</style>

<scripttype="text/javascript">

//对getElement取对象的方法进行封装
//要求：id使用#前缀 class使用.前缀
标签不用

function$(name)

{
if(name.charAt(0)== '#')
{

returndocument.getElementById(name.substring(1));
}
elseif(name.charAt(0) == '.')
{

returndocument.getElementsByClassName(name.substring(1));
}
else
{

returndocument.getElementsByTagName(name);
}

}

//图片轮播功能的实现

varindex = 1;

functionautoPic()

{
$("#pic").src= "../images/class1-"+(index = index%4+1)+".jpg";
for(var i = 0; i < $("li").length; i++) {

$("li")[i].className= (i == index -1) ? 'selectColor' : 'unselectColor';

}

}

//设定定时器 2种方法

//vartempTime = setTimeout(autoPic, 500);

vartempTime = setInterval(autoPic, 500);

//添加事件

onload = function()
{ //鼠标放到图片上时的事件
$("#pic").onmouseover= function()
{

clearInterval(tempTime);
}
//鼠标移开时的事件
$("#pic").onmouseout= function()
{

tempTime= setInterval(autoPic, 500);

}

}

</script>
</head>
<body>

<divid = 'auto_move'>
<img src="../images/class1-1.jpg" id ="pic"/>
<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>
</ul>

</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航