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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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使用者状态管理功能的应用
2006/10/09 PHP
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
vue生命周期的探索
2019/04/03 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python批量下载图片的三种方法
2013/04/22 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
ipad上运行python的方法步骤
2019/10/12 Python
python3图片文件批量重命名处理
2019/10/31 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
教师党员承诺书
2014/03/25 职场文书
慰问信格式规范
2015/03/23 职场文书
会议主持词开场白
2015/05/28 职场文书
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers