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

来源：互联网发布：投资网络销售好做吗编辑：程序博客网时间：2024/06/10 00:22
图片全部放在本地，只贴代码。自己拷贝到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>
0 0