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=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
#slideBox{ width: 100%; height: 540px; overflow:hidden;position: relative;}
ul,li{padding: 0; margin: 0; width: 100%;}
li{ list-style: none;}
.slideImg{ height: 500px; overflow: hidden; position: relative;}
.slideImg li{position: absolute;}
.slideBtn{ position: absolute; bottom: 0;left: 30%;}
.slideBtn li{ display: block;float: left; cursor: pointer; width: 100px;height: 40px;background-color: #f60; border-right: 1px solid #fff;}
.slideBtn li.active{ background-color: #f00}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript">
;(function($){
$.fn.slideCom=function(options){
var options=$.extend(this,options), i=0,timer;
this.each(function(){
var _this=$(this),
slideImg=_this.find(options.slideImg),
slideBtn=_this.find(options.slideBtn);
timer=setInterval(slideImgFun,options.times);
_this.hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(slideImgFun,options.times);
}); var slideImgFun=function(){
i+=1;
if(i==options.slideLength){i=0};
var lie=slideImg.eq(i);
lie.siblings().css("z-index",2);
lie.css("z-index",3).animate({"opacity":1},150,function(){
lie.siblings().css({"opacity":0.1,"z-index":1});
})
slideBtn.eq(i).addClass(options.elemClass).siblings().removeClass(options.elemClass);
};
slideBtn.on(options.elemType,function(){
slideBtn.removeClass(options.elemClass);
$(this).addClass(options.elemClass);
i=$(this).index()-1;
slideImgFun();
return false;
}) return this;
}) }
})(jQuery); $(function()
{
$("#slideBox").slideCom({
slideImg:".slideImg li",
slideBtn:".slideBtn li",
elemClass:"active",
elemType:"click",
times:3000,
slideLength:$("#slideBox .slideImg li").length
})
}) </script>
</head>
<body> <div id="slideBox">
<ul class="slideImg">
<li style="z-index: 3;opacity: 1;"> <a href="#" target="_blank" title="" ><img src="data:images/1.jpg" alt="" /></a></li>
<li> <a href="#" target="_blank" title="" style=""><img src="data:images/2.jpg" alt="" /></a></li>
<li> <a href="#" target="_blank" title="" style=""><img src="data:images/3.jpg" alt="" /></a></li>
<li> <a href="#" target="_blank" title="" style=""><img src="data:images/4.jpg" alt="" /></a></li>
</ul>
<ul class="slideBtn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> </body>
</html>
jquery自己写的幻灯片插件,好用不解释的更多相关文章
- jQuery幻灯片插件autoPic
原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- Jquery Slick幻灯片插件
slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- 学会自己写jQuery插件(二)---自己写的tab插件
通过上一个基础篇我们知道插件的格式,这次我来写一个tab插件 $(function() { $.fn.插件名称 = function(options) { var defaults = { Event ...
随机推荐
- JavaScript--自调用函数(小闭包)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- POJ - 1679_The Unique MST
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Description Given a connected undirected grap ...
- MaxCompute 图计算用户手册(上)
概要 ODPS GRAPH是一套面向迭代的图计算处理框架.图计算作业使用图进行建模,图由点(Vertex)和边(Edge)组成,点和边包含权值(Value),ODPS GRAPH支持下述图编辑操作: ...
- Quick BI 3.0 - 强大的多维分析表格:交叉表
写在开头 对于普通的表格展示数据,相信大家都非常熟悉了,今天给大家介绍的是BI领域的分析利器-交叉表,这个在BI分析场景中使用占比最多的分析利器.通过交叉表对数据的承载和管理,用户可以一目了然地分析出 ...
- @codeforces - 793G@ Oleg and chess
目录 @description - translation@ @solution@ @part - 1@ @part - 2@ @part - 3@ @part - 4@ @accepted code ...
- python代码实现树莓派3b+驱动步进电机
python代码实现树莓派3b+驱动步进电机 之前买了个树莓派,刚买回来那会儿热情高涨,折腾了一段时间,然后就放那吃灰了.前几天忽然想起来这个东西了,决定再玩玩儿,于是就从某宝上购买了一套步进电机.驱 ...
- websocket实现数据库更新时前端页面实时刷新
websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...
- JS高级第1天
阶段目标 主要学习 JS 的面向对象编程思想. 对象 概念 在编程领域,任何 事 和 物都可以概括成对象. 对象概念练习 用编程思想抽象出你心仪对象的属性和方法. 对象由属性和方法组成,属性和方法都可 ...
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
现在很多APP,如微信.QQ.微博等等,它们的主页面都无一例外的选择使用底部Tab导航, 通过这种方式,可以很好的把页面层级分化,很好的提高用户体验.相信,很多Android开发者,都使用到过这种经典 ...
- OracleSpatial函数
Oracle_spatial的函数 一sdo_Geom包的函数: 用于表示两个几何对象的关系(结果为True/False)的函数:RELATE,WITHIN_DISTANCE 验证的函数:VALIDA ...