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连接access数据库的方法
Nov 17 Javascript
js每次Title显示不同的名言
Sep 25 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
Python爬虫文件下载图文教程
2018/12/23 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python netmiko模块的使用
2020/02/14 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
采购主管岗位职责
2014/02/01 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python