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


Posted in Javascript onSeptember 04, 2016

本文实例讲述了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:\5FAE\8F6F\96C5\9ED1,'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 的index
  showImg(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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
javascript操作referer详细解析
Mar 10 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 #Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 #Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 #Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 #Javascript
JS简单测试循环运行时间的方法
Sep 04 #Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 #Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
繁简字转换功能
2006/07/19 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
浅谈node的事件机制
2017/10/09 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
pycharm 安装JPype的教程
2019/08/08 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Python的in,is和id函数代码实例
2020/04/18 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
对公司合理化的建议书
2014/03/12 职场文书
超市开店计划书
2014/04/26 职场文书
反腐倡廉标语
2014/06/24 职场文书
创先争优标语
2014/06/27 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
街道社区活动报告
2015/02/05 职场文书
2016年重阳节慰问信
2015/12/01 职场文书