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 相关文章推荐
php析构函数的具体用法小结
Mar 11 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
react router 4.0以上的路由应用详解
Sep 21 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
vue的for循环使用方法
Feb 12 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
PHP分页显示制作详细讲解
2006/12/05 PHP
php session 错误
2009/05/21 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python信息抽取之乱码解决办法
2017/06/29 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
高中生学习的自我评价
2013/12/14 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
办公室主任岗位职责
2015/01/31 职场文书
舞蹈社团活动总结
2015/05/07 职场文书