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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
如何在vue 中引入使用jquery
Nov 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 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php cookie 详解使用实例
2016/11/03 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
js实现延时加载Flash的方法
2015/11/26 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
python中精确输出JSON浮点数的方法
2014/04/18 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
django实现模型字段动态choice的操作
2020/04/01 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
献爱心标语
2014/06/21 职场文书
北京天坛导游词
2015/02/12 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
公司考勤管理制度
2015/08/04 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server