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

jquery实现图片轮播【一般用于网站首页】

2017-05-11 16:06 916 查看

图片全部放在本地，只贴代码。自己拷贝到html页面，需要一个jquery-1.4.3.js 文件图片自己来5张就行当鼠标离开div区域，图片自动上下轮播以次/10s速度；可以将他改为横向轮播

<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#d1 {
border: 2px solid #E98C36;
width:550px;
height:260px;
margin-left:25%;
margin-top:10%;
/*重要！表明该父元素的position不是static
目的:所包含的子元素可以根据它相对定位  */
position:relative;
/* 使图片溢出层块的部分不显现  */
overflow:hidden;
}

#adv, #num {
/*图片列表相对于父元素div的绝对定位(例如距离div上边框的移动)，
每次绝对定位的调整，导致图片的滚动 */
position:absolute;
}

#num {
/*数字列表相对于父元素的位置，要求父元素是relative(非static)*/
right:5px;
bottom:5px;
}
ul li {
/*ul样式的综合设定: outside 图片 disc*/
list-style:none;/*去掉图标  */
}
ul img {
/* 通过指定图片的宽度和高度，将图片
刚好嵌入到div层块中  */
width:550px;
height:260px;
display:block;
}
#num li {
/* 列表项如果是横向排列的话，需要设定float属性  */
float:left; /* 使列表项左浮动 */
color:#FF7300;
margin: 3px 1px;
border:1px solid #FF7300;
width:16px;
height:16px;
text-align:center;
font-family: Arial;
font-size:12px;
line-height:16px;
cursor: pointer; /* 鼠标的形状:小手 */
}
.on {/* 页面执行时，由jquery对象动态添加的样式  */
background-color:red;
font-weight:bold;
}
</style>

<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>

<script type="text/javascript">
var currentIndex=0;//当前图片的下标
$(function(){
//功能Ⅰ:通过鼠标指示数字，显示对应的图片
$("#num li").mouseover(function(){
//鼠标指定图片下标
currentIndex=$("#num li").index(this);
//显示鼠标指定图片
showImage(currentIndex);
});
/*程序产生事件，但只能显示第一张图片*/
/* 当载入页面时，数字列表中的第一项产生mouseover事件，
导致数字列表中的第一项呈现选中状态 */
$("#num li").eq(0).mouseover();//注意：不能放在事件处理方法之前

/* 功能Ⅱ:鼠标悬停在图片上，图片静止显示；
鼠标离开图片时，图片开始自动显示；*/
var taskId;
/* hover的两个匿名函数，一个对应mouseover事件，
一个对应mouseleave事件 */
$("#d1").hover(function(){
clearInterval(taskId)
},function(){
taskId=setInterval(function(){
//自动显示当前图片
showImage(currentIndex);
//自动维护图片下标，共显示5张图片（下标0-4）
currentIndex++;
if(currentIndex==5) currentIndex=0;
},2000);
});
//触发hover方法中的第二个匿名函数的执行,导致程序自动执行!
$("#d1").mouseout();//注意：不能放在事件处理方法之前
//$("#d1").mouseleave();

//显示当前图片（显示指定下标的图片）
function showImage(index){//index:0,1,2,3,4

/*var height=$("#d1").height();*/
var width=$("#d1").width();

/* 通过animate方法对图片显示实施动画
图片从当前位置向上移动（注意：y坐标正值向下，负值向上）*/

/*$("#adv").animate({"top":-height*index},1000);*/S
$("#adv").animate({"left":-width*index},1000);

/* 当前显示的图片所对应的列表项，需要动态施加样式，而去除非当前列表项的样式 */
$("#num li").eq(index).addClass("on").siblings().removeClass("on");
}
});
</script>

</head>
<body>
<div id="d1">
<!--图片列表  -->
<ul id="adv">
<li><img src="../images/1.jpg" /></li>
<li><img src="../images/2.jpg" /></li>
<li><img src="../images/3.jpg" /></li>
<li><img src="../images/4.jpg" /></li>
<li><img src="../images/5.jpg" /></li>
</ul>
<!--数字列表  -->
<ul id="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航