jQuery实现的图片轮播效果完整示例


Posted in Javascript onSeptember 12, 2016

本文实例讲述了jQuery实现的图片轮播效果。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
*{ padding: 0; margin: 0;}
li{ list-style-type: none;}
body{ margin: 50px;}
a img{ border:none;}
.wrap{
  width: 500px;
  height: 350px;
  border: 3px solid #f00;
  position:relative;
  overflow: hidden;
}
.wrap ul{
  width: 2500px;
  position: absolute;
  left: 0;
  top: 0;
}
.wrap ul li{
  float: left;
  width: 500px;
}
.wrap ol{
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.wrap ol li{
  float: left;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #fc0;
  background: #000;
  color: #fff;
  margin-right: 3px;
  cursor: pointer;
}
.wrap ol li.current{
  background: #fff;
  color: #000;
}
.wrap .introduce{
  height: 30px;
  line-height: 30px;
  width: 350px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  bottom: 10px;
  left: 0;
  /*opacity: 0.5;
  filter:alpha(opacity=50); */
}
</style>
</head>
<body>
<div class="wrap">
  <ul>
    <li><a href="###"><img src="1.jpg" alt="阅谁问君诵,水落清香浮"></a></li>
    <li><a href="###"><img src="2.jpg" alt="天若无人解上文,吾人自惜问天去"></a></li>
    <li><a href="###"><img src="3.jpg" alt="风雨聊程"></a></li>
    <li><a href="###"><img src="4.jpg" alt="流星与共谁与共,人生无求复何求"></a></li>
    <li><a href="###"><img src="5.jpg" alt="一站式共享网络"></a></li>
  </ul>
  <ol>
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ol>
  <p class="introduce">111111</p>
</div>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  var oul = $('.wrap ul');
  var ali = $('.wrap ul li');
  var numLi = $('.wrap ol li');
  var aliWidth = $('.wrap ul li').eq(0).width();
  var _now = 0;  //这个是控制数字样式的计数器
  var _now2 = 0; //这个是控制图片运动距离的计数器
  var timeId;
  var aimg = $('.wrap ul img');
  var op = $('.wrap p');
  numLi.click(function(){
    var index = $(this).index();
    _now = index;
    _now2=index;
    var imgAlt = aimg.eq(_now).attr('alt');
    op.html(imgAlt);
    $(this).addClass('current').siblings().removeClass();
    oul.animate({'left':-aliWidth*index},500);
  });
  /**
   * [slider description] 图片运动的函数
   * @return {[type]} [description] 无返回值
   */
  function slider(){
    if(_now==numLi.size()-1){
      ali.eq(0).css({
          'position':'relative',
          'left': oul.width()
      });
      _now=0;
    }else{
      _now++;
    }
    _now2++;
    numLi.eq(_now).addClass('current').siblings().removeClass();
    var imgAlt = aimg.eq(_now).attr('alt');
    op.html(imgAlt);
    oul.animate({'left':-aliWidth*_now2},500,function(){
      if(_now==0){
        ali.eq(0).css('position','static');
        oul.css('left',0);
        _now2=0;
      }
    });
  }
  timeId = setInterval(slider,1500);
  /*$('.wrap').mouseover(function(){
    clearInterval(timeId);
  });
  $('.wrap').mouseout(function(){
    timeId = setInterval(slider,1500);
  });*/
  $('.wrap').hover(function(){
    clearInterval(timeId);
  },function(){
    timeId = setInterval(slider,1500);
  });
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现的图片轮播效果完整示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 #Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 #Javascript
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php中对2个数组相加的函数
2011/06/24 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
YII中assets的使用示例
2014/07/31 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python通过len函数返回对象长度
2020/10/22 Python
python实现图片转字符画的完整代码
2021/02/21 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
车间班组长的职责
2013/12/13 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
大学生英语演讲稿
2014/04/24 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers