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入门知识简介
Mar 04 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
js实现自定义进度条效果
Mar 15 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 生成文字png图片的代码
2011/04/17 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP时间类完整代码实例
2021/02/26 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
访谈节目策划方案
2014/05/15 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书