实例代码
<!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图片滑块插件，它不仅在PC浏览器上可以使用，而且更适合在手机端的网页中使用。这款jQuery插件不仅可以定义图片切换的方向，而且可以即时切换图片切换的动画方式，可以有平移、...
支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式...
这个“jquery-easyui 完整 demo 演示”涵盖了 EasyUI 的核心功能和组件，旨在帮助开发者深入理解和实际运用。 1. **jQuery EasyUI 的基本概念** jQuery EasyUI 是基于 jQuery 的轻量级框架，它不依赖任何其他库，...
《jQuery拖动滑块图片拼图验证码插件详解》 在网页开发中，验证码是一种防止自动化程序（如机器人）非法操作的重要手段。随着技术的发展，传统的数字或字母组合验证码已经逐渐被更人性化的图形验证码所取代，其中...
本资源提供了一个基于jQuery实现的手机端图片滑块动画插件的源码，适用于开发者进行移动端网页开发时使用。jQuery是一个轻量级、高性能的JavaScript库，简化了HTML文档遍历、事件处理、动画设计和Ajax交互。通过利用...
本次我们将深入探讨一个名为"jQuery简约滑块动画菜单"的特效代码，该代码具有高度实用性，不仅可以直接应用到网页中，还支持二次修改，以适应各种不同的设计需求。 首先，我们来理解jQuery的核心特性。jQuery简化了...
通过理解并应用以上知识点，开发者可以创建出具有丰富动画效果且适应手机端的jQuery图片滑块。这个案例展示了如何利用现有的jQuery插件和适当的前端技术来实现一个功能强大且用户友好的图片展示方案。对于想要提升...
在本文中，我们将深入探讨如何使用jQuery来创建一个具有滑块动画效果的菜单，并且当用户点击时，菜单项能够呈现出吸引人的发光动画效果。jQuery作为一个强大的JavaScript库，提供了丰富的功能，使得动态交互和动画...
在"jQuery图片分割遮罩滑块动画"中，jQuery用于处理用户的鼠标滑动事件，监听用户的交互行为，并响应这些行为来控制图片遮罩的移动。 CSS3，即层叠样式表的第三版，提供了许多先进的样式功能，如渐变、阴影、动画等...
**jQuery 演示：深入理解与应用** jQuery 是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画...这个"jQuerydemo"压缩包中的案例，将会是你学习和探索jQuery的宝贵资源。
9. **响应式设计**：考虑到现代网页需要适应不同的设备和屏幕尺寸，图片截取DEMO可能也考虑了响应式布局，确保在各种屏幕环境下都能正常工作。 10. **安全性与性能**：在实现图片截取时，需要注意防止XSS攻击，并...
"10个jQueryHTML5图片滑块动画：为你的网页点赞" 这个标题揭示了本文档的核心内容，它涉及到的是利用jQuery和HTML5技术创建的10种不同的图片滑块动画效果。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件...
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发变得更加便捷。 首先，我们需要了解HTML结构。一个基本的滑块元素通常由`<input type="range">`组成，它提供了拖动条的...
本文将详细介绍一种适用于电脑和手机移动端的jQuery拖动滑块图片拼图验证码插件的实现原理和应用。 ### 1. 插件工作原理 拖动滑块验证码的核心在于，它要求用户通过鼠标或手指将一个缺失的部分拖动到正确的位置，...
**jQuery左侧Tab切换的图片滑块插件** 在网页设计中，为了提升用户体验，经常会使用到动态展示内容的组件，其中一种常见的方式是通过Tab切换配合图片滑块来展示信息。jQuery作为一款强大的JavaScript库，提供了丰富...
本文将详细解析"jQuery拖动滑块图片转正验证代码"这一特性，这是一种创新的图片验证方式，它提高了用户体验，同时增加了安全性。 首先，这种验证方法的核心是利用jQuery的事件处理功能，尤其是鼠标移动事件`...
jQuery带滑块拖动图片相册代码是一款带进度条拖动的3D幻灯片展示特效。
今天要分享的几款jQuery图片滑块插件，也就是jQuery焦点图插件，基本上会在每个网站都有应用，可以下载看看，也许你可以用到。 1、jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件，它...