jquery图片切换

最新推荐文章于 2019-05-13 00:17:00 发布

虎三儿

最新推荐文章于 2019-05-13 00:17:00 发布

阅读量557

点赞数

分类专栏： jquery 文章标签： jquery js

本文链接：https://blog.csdn.net/itforward/article/details/40266485

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近看到网上一些图片切换的效果，感觉比较有意思，于是用jquery试了试，欢迎拍砖；代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
div {
margin: 0px;
padding: 0px;
}
.backgrounds
{
background: white;
}
span{
color: red;
cursor: pointer;
}
img{
cursor: pointer;
width: 400px;
height: 300px;
}
#content
{
position: relative;
bottom: -20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
($(function() {
var timer = 0;
var imgDom = $("#showPicDiv img");
imgDom.each(function(n){
$("#content").append("<span>["+(n+1)+"]</span>");
eachFunction($(this),n);
}).hide().filter(":eq(0)").show();
var spanDom = $("#content span");
spanDom.filter(":eq(0)").addClass("backgrounds");
var index = 1;
function changePic()
{
imgDom.css("display","none").filter(":eq("+(index)+")").fadeIn("slow");
spanDom.removeClass("backgrounds").filter(":eq("+(index)+")").addClass("backgrounds");
index++;
if(index>5)
{
imgDom.css("display","none").filter(":eq(0)").fadeIn("slow");
spanDom.removeClass("backgrounds").filter(":eq(0)").addClass("backgrounds");
index=1;
}
}
timer = setInterval(changePic,3000);
spanDom.each(function(n){
eachFunction($(this),n);
});

function eachFunction(dom,n)
{
dom.on("mouseover",function(){
overFunction(n)
}).on("mouseout",function(){
outFunction();
});

}

function outFunction()
{
spanDom.removeClass("backgrounds").filter(":eq("+(index)+")").addClass("backgrounds");
imgDom.css("display","none").filter(":eq("+(index)+")").show();
index++;
timer = setInterval(changePic,3000);
}

function overFunction(n)
{
clearInterval(timer);
spanDom.removeClass("backgrounds").filter(":eq("+(n)+")").addClass("backgrounds");
imgDom.css("display","none").filter(":eq("+(n)+")").show();
index=n;

}

}))();

</script>
</head>
<body>
<div>图片切换</div>
<div id="showPicDiv">
<div id="pictures">
<div id="content">

</div>

<img alt="pic" src="images/1.jpg" />
<img alt="pic" src="images/2.jpg" />
<img alt="pic" src="images/3.jpg" />
<img alt="pic" src="images/4.jpg" />
<img alt="pic" src="images/5.jpg" />
</div>
</div>
</body>
</html>