简单的图片滑动效果插件 jQuery.iocnSlider.js
近几日在制作一个客户引导页面,其中有一个图片展示而且带滑动的效果。好久没练手了,索性自己写一个插件吧。
依据设计原型,需要满足两套分辨率下图片不同的尺寸,所以在css中使用了media query的相关技术(此处不考虑IE那家伙,但是js可以正常运行),插件中也对按钮的事件以及 $(window).resize 进行了处理。
值得注意的是:
var resizeTimer = null;
$(window).resize(function() {
if (resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(winResizble, 500);
});
此处是防止 resize() 事件在实际情况中多次执行而进行的限制。
代码走起:
/*
* choose site style
* dereksunok
*/
(function($) {
$.fn.iocnSlider = function(options) {
var settings = {
leftBtn: null,
rightBtn: null,
slidetime: 160,
n: 2
};
var opts = $.extend(settings, options, {}); //公共参数
var obj = this.find("ul");
var offset = obj.find("li").width();
var i = obj.find("li").length;
var viewSize; var resizeTimer = null;
$(window).resize(function() {
if (resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(winResizble, 500);
}); //模块尺寸变化时重置offset
function winResizble(){
var n = obj.find("li").length-i;
var _offset = obj.find("li").width()*n;
$(".siteStyleChooseCont ul").animate({
'left':'-'+_offset
},300);
} //右滑方法
function rightSlide() {
offset = obj.find("li").width();
viewSize = parseInt(obj.parent().width() / offset);
if ((i - viewSize) > 0) {
obj.animate({
left: "-=" + offset
}, settings.slidetime, function() {
settings.leftBtn.removeClass("disabled");
});
i--;
if ((i - viewSize) == 0) {
settings.rightBtn.addClass("disabled");
}
};
}; //左滑方法
function leftSlide() {
offset = obj.find("li").width();
viewSize = parseInt(obj.parent().width() / offset);
if ((i - viewSize) < obj.find("li").length - viewSize) {
++i;
obj.animate({
left: "+=" + offset
}, settings.slidetime, function() {
settings.rightBtn.removeClass("disabled");
});
if ((i - viewSize) == obj.find("li").length - viewSize) {
settings.leftBtn.addClass("disabled");
}
};
}; //事件绑定
if (i - (obj.parent().width() / offset) <= 0) {
settings.leftBtn.add(settings.rightBtn).hide();
};
settings.leftBtn.bind("click", leftSlide);
settings.rightBtn.bind("click", rightSlide);
};
})(jQuery);
html:
<div class="siteStyleChoose">
<a href="javascript:;" id="left" class="btns disabled">left</a>
<div class="siteStyleChooseCont">
<ul class="fix" style="left: 0px;">
<li class="checkedThis">
<a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a>
<span class="checkIcon"></span>
</li>
<li>
<a href="javascript:;"><img src="../images/demo02.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="../images/demo03.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a>
</li>
</ul>
</div>
<a href="javascript:;" id="right" class="btns">right</a>
</div>
css:
/*siteStyleChooseCont*/
.siteStyleChoose { position: relative;}
.siteStyleChoose > .btns { position:absolute; height: 40px; width: 20px; z-index:; overflow: hidden; text-indent: -99em; background-image:url(../images/sliderbtnbg.gif); top: 100px;}
.siteStyleChoose #left { left: 10px; background-position: left bottom;}
.siteStyleChoose #right { right: 10px; background-position: right bottom;}
.siteStyleChoose #left.disabled { background-position: left top;}
.siteStyleChoose #right.disabled { background-position: right top;}
.siteStyleChooseCont { position: relative; margin: 0 auto; width: 1000px; height: 230px; overflow: hidden;}
.siteStyleChooseCont ul { position: relative; width: 999em;}
.siteStyleChooseCont li { position: relative; float: left; width: 333px; padding-bottom:6px; text-align: center;}
.siteStyleChooseCont li a { outline: none; background-color: #000; display: block; width: 313px; margin: 0 auto;}
.siteStyleChooseCont li img { width: 313px;}
.siteStyleChooseCont li img:hover,.siteStyleChooseCont li.checkedThis img { opacity: 0.7; filter:alpha(opacity=70);}
.siteStyleChooseCont li .checkIcon { position:absolute; bottom:; left:; height: 80px; width: 84px; background: url(../images/check.png) top left no-repeat;}
@media screen and (min-width:1440px) and (max-width:2560px){
.siteStyleChooseCont { width: 1402px; height: 310px;}
.siteStyleChooseCont li { width: 467px;}
.siteStyleChooseCont li a { width: 413px;}
.siteStyleChooseCont li img { width: 413px;}
.siteStyleChoose > .btns { top: 140px;}
.siteStyleChoose #left { left: 60px;}
.siteStyleChoose #right { right: 60px;}
}
@media screen and (min-width:1680px) and (max-width:2560px){
.siteStyleChoose #left { left: 50px;}
.siteStyleChoose #right { right: 50px;}
}
.siteStyleChooseCont li a,.siteStyleChooseCont li img {
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
-ms-transition:all .3s linear;
-o-transition:all .3s linear;
transition:all .3s linear;
}
干货已上,我们该如何使用呢?So Easy!
插件中我只设置了三个参数(左右按钮,滑动时间),照葫芦画瓢,如下:
$(".siteStyleChooseCont").iocnSlider({leftBtn:$(".siteStyleChoose #left"),rightBtn:$(".siteStyleChoose #right"),slidetime:400});
当然,在插件之前别忘了调用jquery.js 哟!
简单的图片滑动效果插件 jQuery.iocnSlider.js的更多相关文章
- 简单jQuery图片自适应宽度插件jQuery.imgAutoSize.js
(function ($) { var loadImg = function (url, fn) { var img = new Image(); img. ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 100种不同图片切换效果插件pageSwitch
分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览 源码下载 实现的代码. ht ...
- 图片文字滚动插件jQuery Scrollbox
图片文字滚动插件jQuery Scrollbox附件中提供了五种图片.文字滚动样式,只需调用jquery库和jQuery Scrollbox插件,然后再加一段简单的jquery代码即可使用,兼容性良好 ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
随机推荐
- SVN文件自动加锁-Win7
在Win7操作系统上 打开目录C:\Users\Administrator\AppData\Roaming\Subversion 用记事本打开config文件 将enable-auto-props = ...
- OSD仿真_MFC程序01
Windows系统具有强大的绘图功能,可以用来模拟OSD显示.接下来将设计一个简单的模拟显示终端的程序,用于后续显示功能和菜单系统的开发.说明一下,对于Windows下的MFC编程我不怎么了解,只知道 ...
- 轻量ORM-SqlRepoEx (七)AspNetCore应用
ORM-SqlRepoEx 是 .Net平台下兼容.NET Standard 2.0,一个实现以Lambda表达式转转换标准SQL语句,使用强类型操作数据的轻量级ORM工具,在减少魔法字串同时,通过灵 ...
- DML-修改
一, 修改单表的记录 语法: update 表名 set 字段=值[where 筛选条件] 二,修改多表 update 表名 别名 inner/left/rigth join 表二 on 连接条件 s ...
- 通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学
首发于:Aardio通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=429 ...
- 集合Gk表示这样一堆数字,该集合内的数字有k个1
问题描述 集合Gk表示这样一堆数字,该集合内的数字有k个1.比如,G1 = { 1, 10, 100, 1000, ...} G2 = {11, 110, 1110 }, ... , Gk { ... ...
- ubuntu8.04下mysql更改用户和密码
1.最近由于系统原因重装了mysql,但是发现安装过程中没有提示设置密码. 2.修改用户名和密码步骤 A.service mysql stop #停止mysql服务 B.sudo vim /et ...
- Python基础知识--Slice(切片)和Comprehensions(生成式)
最近在Youtube的Python视频教程上学习Python相关的基础知识,视频由Corey Schafer制作,讲得十分简单明了,英文发音也比较清晰,几乎都能听懂,是一个不错的Python入门学习的 ...
- Dubbo 安装监控中心
一.Dubbo 安装服务管理控制台 1.在官方Github下载Dubbo OPS 2.下载incubator-dubbo-ops源码后,解压修改配置文件Zookeeper注册中心地址 3.maven打 ...
- 缓存反向代理-Varnish
简介 Varnish是一款高性能.开源的缓存反向代理服务器.它从客户端接受请求,并尝试从缓存中响应请求,如果无法从缓存中提供响应,Varnish 向后端服务器发起请求,获取响应,将响应存储在缓存中,然 ...