适用于手机端的jQuery图片滑块动画
本文实例为大家分享了基于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图片切换动画特效
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子! 首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似.但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,
-
详解jQuery中基本的动画方法
大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住
-
原生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生成假加载动画效果
在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("
-
jQuery 动画效果代码分享
一．显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显示内容和隐藏内容. $('.show').click(function(){ //设置个触发事件 $('#box').show(); //显示 }); $('.hide').click(function(){ //设置个触发事件 $('#box').hide(); //隐藏 }); 在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)
-
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简单动画变换效果实例分析
本文实例讲述了jQuery简单动画变换效果.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目.j
-
jQuery之动画效果大全
下面介绍了几种动画效果的方法,具体如下: 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数. show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#
-
jquery+css3问卷答题卡翻页动画效果示例
CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
-
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL