使用Jquery实现图片轮播效果

来源：互联网发布：mysql配置文件调优编辑：程序博客网时间：2024/06/09 20:48
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery实现图片轮播</title><style type="text/css">*{margin: 0;padding: 0;}#box{width:600px;height:240px;position: relative;}#pic{width:600px;height:240px;position: relative;top:0px;left:0px;}img{position: absolute;}/* 将三个图片层叠在一起 */#but{ width:120px; height:25px;position: absolute;border: 1px solid #3ff;bottom:5px; right: 0px;}#but ul li{list-style:none;width:25px; height:25px; float:left;background:#ccff99; border-radius:15px;text-align:center; line-height:20px;margin-right: 5px;}#but ul .sel{background: #ccffff;}</style><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript">$(function(){var index = 0,begin = null;var picNums = $("#pic img").length;$("#but ul li").hover(function(){clearInterval(begin);//鼠标移上,清除定时器对象$(this).addClass("sel").siblings().removeClass("sel");index = $("#but ul li").index();$("#pic img").eq(index).show().siblings().hide();},function(){auto();});//鼠标移走执行auto函数,执行定时器function auto(){begin = setInterval(function(){//定时器,每秒转换图片index++;if(picNums == index){index = 0;}$("#but ul li").eq(index).addClass("sel").siblings().removeClass("sel");$("#pic img").eq(index).show().siblings().hide();}, 1000);}auto();})</script></head><body><div id="box"><div id="pic"><img src="imgs/1.jpg" width= 600 height=240/><img src="imgs/2.jpg" width= 600 height=240/><img src="imgs/3.jpg" width= 600 height=240/></div><div id="but"><ul><li class="sel">1</li><li class="">2</li><li class="">3</li></ul></div></div></body></html>
0 0