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


Posted in jQuery onFebruary 08, 2018

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<title>jquery实现图片轮播效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#lunbo{width: 600px;height: 300px;margin: 0 auto;overflow: hidden;}
#pics{width: 600px;height: 300px;cursor: pointer;position: relative;}
ul li{width: 600px;height: 300px;list-style: none;position: absolute;top: 0;left: 0;display: none;}
img{width: 600px;height: 300px;}
</style>
</head>
<body>
<div id="lunbo">
  <ul id="pics">
    <li style="display: inline;"><img src="http://pic.qiantucdn.com/58pic/14/60/54/32n58PICxE6_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/19/09/94/5678b76f75315_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/19/39/22/01D58PICFx7_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/19/11/08/5679490f4892d_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/18/44/26/5620690acb188_1024.jpg"></li>
  </ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
  var oLi = $("li");
  var liWidth = oLi.eq(0).width();
  var liHeight = oLi.eq(0).height();
   //每隔3秒进行轮播
  var timer = setInterval(change,3000);
    //鼠标放置在图片上时停止轮播,移开时继续轮播
    $("div").mouseover ( function(){
    clearInterval(timer);
  })
  $("div").mouseout (function(){
    timer = setInterval(change,3000);
  })
  //轮播函数
  var prevIndex = 0,nextIndex = 1;
  function change(){
    if (prevIndex == oLi.length-1 ) {//若当前图片是最后一张图片,下一张出现首张图片
      nextIndex = 0;
    }
    var n = Math.floor(Math.random()*3);
    if (n == 0) {
      fade(prevIndex,nextIndex);
    }
    else if (n== 2) {
      slide(prevIndex,nextIndex);
    }
    else{
      grap(prevIndex,nextIndex);
    }
    prevIndex = nextIndex;
    nextIndex ++;
  }
  //淡入淡出效果,
   function fade(prevIndex,nextIndex){
    //传入当前显示图片以及下一张图片的索引
    oLi.eq(prevIndex).fadeOut(1000);
    oLi.eq(nextIndex).fadeIn(1000);
   }
   //向左右滑动效果
   function slide(prevIndex,nextIndex){
    var rand = Math.floor(Math.random()*2);
    oLi.eq(nextIndex).show();
    oLi.eq(nextIndex).css("z-index","-1");
    if (rand) {
      //向左滑动
      oLi.eq(prevIndex).animate({left: -liWidth},1000,fun);
    }
    else{
      oLi.eq(prevIndex).animate({left: liWidth},1000,fun);
    }
    function fun(){
      oLi.eq(prevIndex).css({"left":"0","display":"none"});
      oLi.eq(nextIndex).css("z-index","1");
    }
   }
   //收缩效果
   function grap(prevIndex,nextIndex){
    var rand = Math.floor(Math.random()*4);
    oLi.eq(nextIndex).show();
    oLi.eq(nextIndex).css("z-index","-1");
    switch (rand){
      case 0://向左上角滑动
        oLi.eq(prevIndex).animate({left: -liWidth,top: -liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":"0","top": "0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      case 1://向右上角滑动
        oLi.eq(prevIndex).animate({left: liWidth,top: -liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      case 2://向右下角滑动
        oLi.eq(prevIndex).animate({left: liWidth,top: liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      case 3://向左下角滑动
        oLi.eq(prevIndex).animate({left: -liWidth,top: liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      default:break;
    }
   }
  });
</script>
</body>
</html>

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

jQuery 相关文章推荐
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
jQuery Dom元素操作技巧
Feb 04 #jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
You might like
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php简单日历函数
2015/10/28 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JSONP之我见
2015/03/24 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python基础教程之缩进介绍
2014/08/29 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
python SOCKET编程基础入门
2021/02/27 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
财务经理的岗位职责
2013/12/17 职场文书
销售求职信范文
2014/05/26 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
护士2014年终工作总结
2014/11/11 职场文书
幼儿园辞职书
2015/02/26 职场文书
小学推普周活动总结
2015/05/07 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers