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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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之生成GIF动画的实现方法
2013/06/07 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python splitlines使用技巧
2008/09/06 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python lambda和Python def区别分析
2014/11/30 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
使用Pycharm分段执行代码
2020/04/15 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
仓库管理计划书
2014/05/04 职场文书
法制宣传月活动方案
2014/05/11 职场文书
消防安全承诺书
2014/05/22 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
python入门之算法学习
2021/04/22 Python