<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝轮播</title>
<style>
*{ padding:0; margin:0; list-style:none;}
.banner{ margin:100px auto; border:5px solid #000; width:550px; height:300px; overflow:hidden; position:relative;}
.banner .img{ width:5000px; position:absolute; left:0px; top:0;}
.banner .img li{ float:left;}

.banner .num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size:0px;}
.banner .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;}
.banner .num li.on{ background:#F60;}

.banner .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋体"; display:none;}
.banner:hover .btn{ display:block;}

.banner .btn_l{ left:0;}
.banner .btn_r{ right:0;}

</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
;(function($){
$.fn.slideshow=function(opt){
var defaults={
'autoclick':'click', //小圆点事件
'slideclick':'click',//左右按钮事件
'autotime':2000 //轮播速度
};
$.extend(defaults,opt);
return this.each(function(){
var $this=$(this);
var i=0;
var clone=$this.find(".img li").first().clone();
$this.find(".img").append(clone);
var size=$this.find(".img li").size();
for(var j=0;j<size-1;j++){
$this.find(".num").append("<li></li>");
}
$this.find(".num li").first().addClass("on");
/*鼠标划入圆点*/
$this.find(".num li").on(defaults.autoclick,function(){
var index=$(this).index();
i=index;
$this.find(".img").stop().animate({left:-index*550},500)
$(this).addClass("on").siblings().removeClass("on")
})
/*自动轮播*/
var t=setInterval(function(){
i++;
move()
},defaults.autotime)
/*对banner定时器的操作*/
$this.hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move()
},defaults.autotime)
})
/*向左的按钮*/
$this.find(".btn_l").on(defaults.slideclick,function(){
i++
move();
})
/*向右的按钮*/
$this.find(".btn_r").on(defaults.slideclick,function(){
i--
move()
})
function move(){

if(i==size){
$this.find(".img").css({left:0})
i=1;
}
if(i==-1){
$this.find(".img").css({left:-(size-1)*550})
i=size-2;
}
$this.find(".img").stop().animate({left:-i*550},500)
if(i==size-1){
$this.find(".num li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$this.find(".num li").eq(i).addClass("on").siblings().removeClass("on")
}
}
})
}
})(jQuery);

//调用

$(function(){
$('.banner1').slideshow({
'autoclick':'mouseenter',
'autotime':1000
});
$('.banner2').slideshow({
'autoclick':'click',
'slideclick':'mouseenter'
});
})
</script>
</head>
<body>
<div class="banner banner1">
<ul class="img">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
</ul>

<ul class="num">
</ul>

<div class="btn btn_l">&lt;</div>
<div class="btn btn_r">&gt;</div>

</div>
<div class="banner banner2">
<ul class="img">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
</ul>
<ul class="num">
</ul>

<div class="btn btn_l">&lt;</div>
<div class="btn btn_r">&gt;</div>
</div>
</body>
</html>

jq封装淘宝图片轮播插件的更多相关文章

  1. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  2. 基于Jquery的banner轮播插件,简单粗暴

    新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...

  3. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  4. AdPlayBanner：功能丰富、一键式使用的图片轮播插件

    AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...

  5. H5滚动轮播插件

      概述 JRedu 随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件. 1效果图如下: 2主要功能   支持超 ...

  6. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  7. vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

    vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...

  8. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. slider轮播插件的多种写法

    slider轮播插件相信大家经常会用到,写法也是各种各样,大部分都是用的第三方提供的组件使用,如果想基于自己的业务特点封装个组件供自己使用的话就要自己封装组件了,网上看了大部分写法都是通过js控制do ...

随机推荐

  1. ChatSecure

    ChatSecure是一个免费和开源消息传递应用程序的特性 OTR加密在 XMPP. 你可以连接到现有的谷歌帐户或创建新帐户 公共XMPP服务器(包括通过 Tor),甚至 连接到您自己的服务器额外的安 ...

  2. 04实现累加和计算功能并且实现textbox不允许输入数字以外的字符但不包括退格键同时不允许第一个数值为0

    private void button1_Click(object sender, EventArgs e) { double number1, number2; if (double.TryPars ...

  3. 【C#】给无窗口的进程发送消息

    注:本文适用.net2.0+的winform程序 一个winform程序,我希望它不能多开(但是如何防多开不是本文要讲的),那么在用户启动第二个实例的时候,作为第二个实例来说,大概可以有这么几种做法: ...

  4. 【无私分享：ASP.NET CORE 项目实战（第十三章）】Asp.net Core 使用MyCat分布式数据库，实现读写分离

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 MyCat2.0版本很快就发布了,关于MyCat的动态和一些问题,大家可以加一下MyCat的官方QQ群:106088787.我 ...

  5. SpringMVC传值、转发、重定向例子

    练习接收页面参数值 使用request 使用@RequestParam注解 使用实体对象 练习向页面传出数据 使用HttpServletRequest和session 使用ModelAndView对象 ...

  6. 【夯实PHP基础】PHP的反射机制

    本文地址 分享提纲: 1. 介绍 2. 具体例子 2.1 创建Persion类 2.2 反射过程 2.3 反射后使用 1. 介绍 -- PHP5添加了一项新的功能:Reflection.这个功能使得p ...

  7. 物联网框架ServerSuperIO（SSIO）更新、以及增加宿主程序和配置工具，详细介绍

    一.更新内容 1.修改*Server类,以及承继关系.2.增加IRunDevice的IServerProvider接口继承.3.修复增加COM设备驱动可能造成的异常.4.修复网络发送数据可能引发的异常 ...

  8. 使用PowerShell修改操作系统“环境变量”

      有时候我们需要命令行工具,但在使用前往往需要先导航至命令工具所在的目录,比如:stsadm 我们首先需要导航至(以SharePoint2013为例):C:\Program Files\Common ...

  9. JokeClient-Swift 仿写学习

    required init?(coder aDecoder: NSCoder) 可失败构造器 在init关键字后面添加问号(init?). 可失败构造器会创建一个类型为自身类型的可选类型的对象.你通过 ...

  10. 基于Python+Django的Kubernetes集群管理平台

    ➠更多技术干货请戳:听云博客 时至今日,接触kubernetes也有一段时间了,而我们的大部分业务也已经稳定地运行在不同规模的kubernetes集群上,不得不说,无论是从应用部署.迭代,还是从资源调 ...