jQuery轮播图效果精简版完整示例

本文实例讲述了jQuery轮播图效果。分享给大家供大家参考，具体如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>轮播图</title><style type="text/css">/*base style*/html, body, div, ul, li{ margin:0; padding:0;}body{ font-family:5FAE8F6F96C59ED1,"Arial"; color:#333; font-size:12px; background-color:#fff;}img{ border:none;}ul li{ list-style-type:none;}/*lunbo style*/#scrollPics{width:560px;height: 300px;margin:20px auto 0 auto;overflow: hidden;position:relative;}.num{position:absolute;right:5px;bottom:5px;}#scrollPics .num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}#scrollPics .num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;}</style></head><body><div id="scrollPics"><ul class="slider" ><li><img src="2.jpg"/></li><li><img src="3.jpg"/></li><li><img src="4.jpg"/></li><li><img src="5.jpg"/></li><li><img src="1.jpg"/></li></ul><ul class="num" ><li class="on">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script type="text/javascript" src="jquery-1.10.1.min.js"></script><script type="text/javascript">var len = $（".num > li"）.length;var index = 0; //图片序号var adTimer;$（".num li"）.mouseover（function（） {index = $（".num li"）.index（this）; //获取鼠标悬浮 li 的indexshowImg（index）;}）.eq（0）.mouseover（）;//滑入停止动画，滑出开始动画.$（"#scrollPics"）.hover（function（） {clearInterval（adTimer）;}, function（） {adTimer = setInterval（function（） {showImg（index）index++;if （index == len） { //最后一张图片之后，转到第一张index = 0;}}, 3000）;}）.trigger（"mouseleave"）;function showImg（index） {var adHeight = $（"#scrollPics>ul>li:first"）.height（）;$（".slider"）.stop（true, false）.animate（{"marginTop": -adHeight * index + "px" //改变 marginTop 属性的值达到轮播的效果}, 1000）;$（".num li"）.removeClass（"on"）.eq（index）.addClass（"on"）;}</script></body></html>

运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格（table）操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。