适用于手机端的jQuery图片滑块动画

2024-12-14 06:44:55

本文实例为大家分享了基于jQuery实现的手机端图片滑块动画源码，供大家参考，具体内容如下

效果图：

在线预览 下载地址

实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>适应手机端的jQuery图片滑块动画DEMO演示</title>
<link rel="stylesheet" href="/api/jq/5733e37626dcb/css/style.css" />
<script src="/api/jq/5733e37626dcb/js/islider.js"></script>
<script src="/api/jq/5733e37626dcb/js/plugins/islider_desktop.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<!--<h4 style="text-align: center">animateType参数中设置，目前支持default, rotate, flip 和 depth, 点击按钮看效果</h4>-->
<div id="iSlider-effect-wrapper">
 <div id="animation-effect" class="iSlider-effect"></div>
</div>
<div id="menu-select">
 <span class="on">default</span>
 <span>rotate</span>
 <span>flip</span>
 <span>depth</span>
</div>
<h4 style="text-align: center">垂直轮播</h4>
<div id="vertical-slide" class="iSlider-effect"></div>
<h4 style="text-align: center">不循环模式(最始及最末图片滑动会有衰减效果)</h4>
<div id="non-looping" class="iSlider-effect"></div>
<h4 style="text-align: center">DOM</h4>
<div id="dom-effect" class="iSlider-effect"></div>
<script>
  var picList = [
  {
   width: 150,
   height: 207,
   content: "/api/jq/5733e37626dcb/images/1.jpg",
  },
  {
   width: 150,
   height: 207,
   content: "/api/jq/5733e37626dcb/images/2.jpg",
  },
  {
   width: 150,
   height: 207,
   content: "/api/jq/5733e37626dcb/images/3.jpg",
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/5.jpg"
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/6.jpg"
  },
  {
   width: 300,
   height: 414,
   content:"/api/jq/5733e37626dcb/images/7.jpg"
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/8.jpg"
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/9.jpg"
  }
  ];
  var domList = [
  {
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
  },{
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
  },{
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
  },{
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Page3</h1><h2>This is page3</h2><p>page3 is pretty awsome</p><div>'
  }
  ];
  //all animation effect
  var islider1 = new iSlider({
   data: picList,
   dom: document.getElementById("animation-effect"),
   duration: 2000,
   animateType: 'default',
   isAutoplay: true,
   isLooping: true,
   // isVertical: true, 是否垂直滚动
  });
  islider1.bindMouse();
  //vertical slide
  var islider2 = new iSlider({
   data: picList,
   dom: document.getElementById("vertical-slide"),
   duration: 2000,
   animateType: 'default',
   isVertical: true,
   isAutoplay: true,
   isLooping: true,
  });
  islider2.bindMouse();
  //不循环 不自动播放
  var islider3 = new iSlider({
   data: picList,
   dom: document.getElementById("non-looping"),
   animateType: 'default',
  });
  islider3.bindMouse();
  //滚动dom
  var islider4 = new iSlider({
   data: domList,
   dom: document.getElementById("dom-effect"),
   type: 'dom',
   animateType: 'default',
   isAutoplay: true,
   isLooping: true,
  });
  islider4.bindMouse();
  var menu = document.getElementById('menu-select').children;
  function clickMenuActive(target) {
   for (var i = 0; i < menu.length; i++) {
    menu[i].className = '';
   }
   target.className = 'on';
  }
  menu[0].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
  menu[1].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
  menu[2].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
  menu[3].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
</script>
<!-- 代码 结束 -->
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery+css3问卷答题卡翻页动画效果示例

CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
jQuery 动画效果代码分享

一．显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显示内容和隐藏内容. $('.show').click(function(){ //设置个触发事件 $('#box').show(); //显示 }); $('.hide').click(function(){ //设置个触发事件 $('#box').hide(); //隐藏 }); 在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)
jQuery生成假加载动画效果

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("
jQuery实现图像旋转动画效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
jQuery之动画效果大全

下面介绍了几种动画效果的方法,具体如下: 1.show()显示效果语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数. show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#
详解jQuery中基本的动画方法

大致介绍通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住
jQuery简单动画变换效果实例分析

本文实例讲述了jQuery简单动画变换效果.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目.j
jQuery图片切换动画特效

由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子! 首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似.但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,
原生js仿jquery animate动画效果

jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

适用于手机端的jQuery图片滑块动画

相关推荐

随机推荐