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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
深入分析jQuery.one() 函数
Jun 03 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出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php文件下载处理方法分析
2015/04/22 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
法制报告会主持词
2014/04/02 职场文书
意向协议书范本
2014/04/23 职场文书
同学聚会邀请函
2015/01/30 职场文书
2015年底工作总结范文
2015/05/15 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python