jquery自己写的幻灯片插件,好用不解释
2024-10-08 05:18:09
<!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>
最新文章
- 如何在Windows Server 2008 R2没有磁盘清理工具的情况下使用系统提供的磁盘清理工具
- BizTalk动手实验(十七)ODBC适配器使用
- Winform DataGridView控件添加行号
- PostgreSQL的9.4已经发布(译)
- LR中的C语言问题
- [GC]一个简单的Garbage Collector的实现
- OpenSCAD 建模:相框
- jedisCluster 报错: redis.clients.jedis.exceptions.JedisClusterException: No way to dispatch this command to Redis Cluster because keys have different slots.
- Android 多线程编程
- Web设计中打开新页面或页面跳转的方法
- Asp.net core 学习笔记 ( identity server 4 JWT Part )
- CentOS 7部署Java+Mysql步骤
- 彻底弄懂css中单位px和em,rem的区别
- 8.2,常用模块介绍:sys,os,time,random
- bzoj 3285 离散对数解指数方程
- 如何在onCreate方法中获取视图的宽度和高度
- The remote end hung up unexpectedly
- 安装Oracle需要调整的linux内核参数
- C# base64 和图片互转
- spring源码学习(一):eclipse导入spring源码