jquery自己写的带左右箭头自动播放幻灯插件,简化
2024-08-29 03:28:01
<!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}
.leftRight{ position: absolute; width: 100%; top: 230px; z-index: 100}
.leftBtn{ float: left; color: #f00;}
.rightBtn{ float: right;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),
leftBtn=_this.find(options.leftBtn),
rightBtn=_this.find(options.rightBtn); timer=setInterval(slideImgFun,options.times);
_this.hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(slideImgFun,options.times);
}); var slideImgFun=function(){
if(i==-2){i=options.slideLength-2}//重点注意
i+=1
if (i>=options.slideLength) {
i=0;
} else if (i<0) {
i=options.slideLength;
} 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;
}) leftBtn.on(options.elemType,function(){
i-=2;
slideImgFun();
return false;
})
rightBtn.on(options.elemType,function(){
i+=0;
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,
leftBtn:".leftBtn",
rightBtn:".rightBtn"
})
}) </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 class="leftRight"><a href="" class="leftBtn">左箭头</a><a href="" class="rightBtn">右箭头</a></div>
</div> </body>
</html>
最新文章
- iOS-多线程介绍
- 【bzoj2435】[NOI2011]道路修建
- 一分钟认识GitHub
- Reprojection Matrix Q
- 在swift中使用oc 的代码
- VPN client on linux debian
- leetcode面试准备: Word Pattern
- (转载)Linux中cp直接覆盖不提示的方法
- Doxgen+Graphiz+htmlhelp配置
- Window Service 计划任务
- Express之get,pos请求参数的获取
- C++构造函数初始化列表与赋值
- mysql(三) 数据表的基本操作操作
- java语言规范,main方法必须声明为public
- 官网下载MySQL最新版本的安装包
- java.lang.NoClassDefFoundError: org/hibernate/cfg/Configuration
- pandas.DataFrame.to_excel
- Python 基础常用
- cglib动态代理是通过继承父类的方式进行代理的 不是通过接口方式进行动态代理的 因此可以对普通的类进行代理
- centos6.5环境DNS-本地DNS服务器bind的搭建
热门文章
- 浅谈JavaScript的面向对象和它的封装、继承、多态
- Facebook POP 进阶指南
- day39-Spring 12-Spring的JDBC模板:快速入门
- oracle终止数据库Abort
- pl/sql基础知识—包
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第六章:在Direct3D中绘制
- UDP传输对象--JavaSE考试题
- vue事件获取事件对象,vue获取事件源,vue event.currentTarget
- 你真的知道你看到的UTF-8字符是什么吗?
- js中字符串拼接html