JQUERY 轮播插件
闲来无事,写个轮播插件,项目中用到的时候就无需在写了,不然会累死宝宝的
废话少说 代码上
html部分
<div class="lunbo">
<ul>
<li class="xianshi"><a href="#"><img src="bg_img1.jpg" alt=""/></a> </li>
<li><a href="#"><img src="bg_img2.jpg" alt=""/></a> </li>
<li><a href="#"><img src="bg_img3.jpg" alt=""/></a> </li>
<li><a href="#"><img src="bg_img4.jpg" alt=""/></a> </li>
<li><a href="#"><img src="bg_img5.jpg" alt=""/></a> </li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
接着就是css
*{margin:;padding:}
.lunbo{
width: 800px;
height: 400px;
border:1px solid yellowgreen;
margin: 100px auto 0 auto;
position: relative;
}
ul{list-style: none;
width: 800px;
height: 400px;
position: relative; }
ul img{
width: 800px;
height: 100%; }
/*注意li绝对定位,使得他们在同一个地方显示,只是每一个的Z-index值不同,所以只会显示最后一个在最上面*/
/*你不信试试给不同的Z-index不同的值*/
ul>li{
position: absolute;
height: 100%;
display: none;
}
ol{
list-style: none;
position: absolute;
bottom: 20px;
right: 20px;
}
ol>li{
float: left;
width: 14px;
height: 14px;
border-radius: 7px;
background-color: orangered;
margin-right: 10px;
}
接下来在你的页面中引入插件,并给你的插件方法传递一个对象
$("ul>li").lunbotu({
ImgLength:$("ul>li").length-1,//img图片的个数
speed:5000,//每次轮播的间隔时间
fousejiao:"#fff",//当图轮播或点击在某个小序号时候得到焦点样式
blurjiao:"orangered"//失去焦点
});
紧接着就是我们的轮播实现的代码,往下看
(function(){
//轮播插件
$.fn.extend({
lunbotu:function(Canshu){
var timer1,timer2;
var i=1;
var xuhao=0;
var $ul_li=$("ul>li");
var $ol_li=$("ol>li");
//初次加载的时候出发轮播
$ol_li.css({background:Canshu.blurjiao});
$ul_li.eq(0).css("display","block");
$ol_li.eq(0).css({background:Canshu.fousejiao});
timer1=setInterval(lunbo,Canshu.speed);
function lunbo(){
if(i>Canshu.ImgLength){i=0;}
donghua(i);
i++;
}
//定义通用函数
function donghua(a){
$ul_li .fadeOut(800);
$ol_li.css({background:Canshu.blurjiao});
$ul_li.eq(a).fadeIn(500);
$ol_li.eq(a).css({background:Canshu.fousejiao});
}
//点击ol小序列号的时候,进行操纵
$ol_li.on("click",function(){
clearInterval(timer1);
clearInterval(timer2);
var $index=$(this).index();
donghua($index);
});
//鼠标从ol上面移开的时候清除定时器
$ol_li.on("mouseleave",function(){
clearInterval(timer1);
clearInterval(timer2);
//再一次出发轮播
xuhao=$(this).index();
timer2=setInterval(zlunbo,Canshu.speed);
function zlunbo() {
if(xuhao>=Canshu.ImgLength){xuhao=-1;}
donghua(xuhao+1);
xuhao++;
}
});
}
});
}());
在本例中用了一个匿名函数避免污染全局
JQUERY 轮播插件的更多相关文章
- 自己写的一个jQuery轮播插件
大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...
- 12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- jQuery轮播插件SuperSlide【2016-10-14】
[一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码 autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...
- 基于 html5的 jquery 轮播插件 flickerplate
https://github.com/chrishumboldt/Flickerplate 官网 <link href="${baseURL}/themes/default/css/f ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
随机推荐
- C#操作Kentico cms
C#操作Kentico cms 中的 content(winform环境) 前段时间做了个winform程序,去管理kentico网站的content,包括content节点的增删改查,以及相应节点内 ...
- enode框架step by step之事件驱动架构(EDA)思想的在框架中如何体现
enode框架step by step之事件驱动架构(EDA)思想的在框架中如何体现 上一篇文章,我给大家分享了我的一个基于DDD以及EDA架构的框架enode,但是只是介绍了一个大概.接下来我准备用 ...
- Arduino 各种模块篇 震动模块 vibrator
vibrator is a good thing. it has multi-funtionality . :) Now the vibrator we choose is the one whic ...
- 黑马程序员:Java基础总结----java注解
黑马程序员:Java基础总结 java注解 ASP.Net+Android+IO开发 . .Net培训 .期待与您交流! java注解 lang包中的基本注解 @SuppressWarnings ...
- EL表达式学习
EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...
- .Net程序员学用Oracle系列(1):导航目录
本人从事基于 Oracle 的 .Net 企业级开发近三年,在此之前学习和使用的都是 (MS)SQL Server.未曾系统的了解过 Oracle,所以长时间感到各种不习惯.不方便.怪异和不解,常会遇 ...
- 基于Azure blob storage T级别HBase表恢复
为减少Hbase集群压力,提高性能,我们将HBase库中的数据移到另外的存储,下面记录当我需要对数据进行计算时,数据恢复的过程 目录: Azure storage explorer 工具 数据复制 元 ...
- Python高手之路【十二】面向对象设计模式
单例模式 单例,顾名思义单个实例. class Person: __instance = None def __init__(self): pass @staticmethod def getInst ...
- jquery中这句 .stop(false,true); 什么意思
.stop 是jQuery中用于控制页面动画效果的方法.运行之后立刻结束当前页面上的动画效果.stop在新版jQuery中添加了2个参数:第一个参数的意思是是否清空动画序列,也就是stop的是当前元素 ...
- VirtualBox 主机与虚拟机互通
文章转载:http://www.cnblogs.com/HD/p/4011323.html 网络要设置才能互通 注意:不启动Linux系统的时候,设置网络 使用VirtualBox的主机与虚拟机相互通 ...