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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
德生PL330的评价与改造
2021/03/02 无线电
简单实用的网站PHP缓存类实例
2014/07/18 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
js对象的比较
2011/02/26 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
js友好的时间返回函数
2016/08/24 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
从零学Python之hello world
2014/05/21 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python中@contextmanager实例用法
2021/02/07 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
物理教师自荐信范文
2013/12/28 职场文书
食品安全承诺书
2014/05/22 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2014年药店工作总结
2014/11/20 职场文书
护士自荐信范文
2015/03/25 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
业务员管理制度范本
2015/08/06 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers