看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强

原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用<li>包着并且设置了左浮动。

那么当我们向左移动ul的时候并且移动的距离为<li>的宽度,第二个<li>不就被移动到了<div>的窗口,这样一来图片不就被一张一张显示出来了吗?

接下来我们在设置<div>的属性overflow:hidden,那么<div>窗口以外的图片不显示,只显示移动到当前窗口的图片,是不是又完美了一些,感觉快做好了是吧!

说了一些原理,好了,直接上代码,记得引入jquery。

这是div做的布局,做的时候记得加上边框,做后在删掉,这样便于测试

 <div class="slideShow">
<div class="nav-t">
<ul>
<li><a href="#" target="_blank"><img src="data:images/1.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="data:images/2.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="data:images/3.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="data:images/4.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="data:images/5.png" alt=""></a></li>
</ul>
<div class="nav-b">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="lunbo.js"></script>

接下来设置一下样式

 <style>
.slideShow{
border:0px solid blue;
width:600px;
height:450px;
margin:50px auto;
position:relative;
}
.nav-t{
border:0px solid red;
width:580px;
height:430px;
margin:8px auto;
position:relative;
overflow:hidden;
}
.nav-t ul{
border:0px solid green;
list-style:none;
width:3000px;
height:430px;
margin:;
padding:;
position:relative;
}
.nav-t li{
height:427px;
width:580px;
float:left;
}
.nav-b{
position:absolute;
top:390px;
left:220px;
cursor:default;
}
.nav-b span{
margin-right:5px;
border:1px solid red;
padding:0 6px;
border-radius:12px;
color:#fff;
background:rgba(132,125,119,0.5);
cursor:pointer;
}
.nav-b span.active{
background:rgba(0,0,0,0.8);
}
</style>

用js实现点击轮播图片、自动轮播图片,鼠标移动上去停止轮播

 $(function(){

     $(function(){
var slide=$(".slideShow"),
navt=slide.find(".nav-t"),
ul=navt.find("ul"),
navbs=slide.find(".nav-b span"),
onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度
timer=null,
inow=0;
navt.hover(function(){
clearInterval(timer); //鼠标移上去,清除掉自动轮播功能,即定时轮播
},autoPlay);
navbs.on("click",function(){ //点击轮播事件
var me=$(this);
inow=me.index(); //此处变量用的与自动轮播函数里的相同,为的是能在随便点击后,自动轮播时按照我们点击了的继续向后轮播,这叫动态实时
ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口
navbs.removeClass("active"); //清除掉上一个点击按钮的样式
me.addClass("active"); //为当前被点击的按钮添加第一个按钮样式
});
autoPlay();
function autoPlay(){ //自动轮播函数
timer=setInterval(function(){ //开定时器
inow++;
if(inow==navbs.length){ //判断是否到了最后一张,若是到了,返回到第一张
inow=0
}
navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件,trigger为jQuery的自动调用函数
},3000);
} }); });

看一下效果图?好的

怎么样,要不你也做一个?

jQyery实现轮播器的更多相关文章

  1. 图片轮播器bcastr4.swf“&”符号的问题

    bcastr4.swf是一个很不错的网页图片轮播器,我一直使用它作为网站首页图片轮播的控件. http://xiaogui.org/bcastr-open-source-flash-image-sil ...

  2. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

  3. IOS第六天(3:scrollView 图片轮播器)

    IOS第六天(3:scrollView 图片轮播器) #import "HMViewController.h" #define kImageCount 5 @interface H ...

  4. ios之无限 自动 图片轮播器的实现

    比较之前发布的手动无限图片轮播器进行了改进.实现了自动无限轮播的功能.比较适合团购标题分类下面的轮播器功能. 实现思路: * 开启一个定时器,把操作放入消息循环池.每隔一定时间,操作执行一次. * 注 ...

  5. ios 学习 广告图片轮播器

    // // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...

  6. swift:创建滚动视图的图片轮播器

    用swift创建图片轮播器和用OC创建的方式是一样的,都主要用到UIScrollView和UIImageview这两个控件,有几张图片,就将滚动视图的内容区域大小设置为每一张图片的大小乘以张数即可.然 ...

  7. JavaScript图片轮播器

    先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...

  8. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  9. iOS开发那些事儿(一)轮播器

    前言 市面上绝大部分的APP被打开之后映入眼帘的都是一个美轮美奂的轮播器,所以能做出一个符合需求.高效的轮播器成为了一个程序员的必备技能.所以今天的这篇博客就来谈谈轮播器这个看似简单的控件其中蕴含的道 ...

随机推荐

  1. Nuget自己打包引用的时候出现错误:Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package 1.0.1 supports: net (.NETFramework,Version=v0.0)

    Nuget自己打包引用的时候出现错误:Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package ...

  2. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  3. AFNetworking 与 UIKit+AFNetworking 详解

    资料来源 : http://github.ibireme.com/github/list/ios GitHub : 链接地址 简介 : A delightful iOS and OS X networ ...

  4. Openvpn 公网访问内网

    对于需要从公网访问内网的情况, 需要做如下配置 从公网到内网 除了设置net.ipv4.ip_forward = 1 以外, 还需要设置iptables, 增加两行forward # Generate ...

  5. win7的优化-1:隐藏我的电脑导航栏里的收藏等项目

    1. Type regedit in RUN or Start Menu search box and press Enter. It'll open Registry Editor. 2. Now ...

  6. DEDECMS之九 文章采集

    到很多网友都为织梦(DEDECMS)的采集教程头疼,的确,官方出的教程太笼统了,什么都没说,换个网站你什么都做不了,这个教程是最详尽的教程,让你一看即会! 一.列表采集 第一步.我们打开织梦后台点击采 ...

  7. 数据库 Linux下的MySQL数据库管理

    数据库就是数据的集合. 关系数据库是一种特殊的数据库,他将数据组织城标,并表示为表之间的关系. 数据库系统往往是大型项目的核心数据内容,如银行的用户账户信息,腾讯QQ的用户账户信息.股市的各种交易信息 ...

  8. getSelection、range 对象属性,方法理解,解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  9. php数组函数,字符串,linux命令

    1>> Linux常用命令一. 文件目录操作命令1. ls命令    命令格式:ls [选项] [目录名]    命令功能:列出目标目录中所有的子目录和文件.2. 命令格式:cd [目录名 ...

  10. python数字图像处理(18):高级形态学处理

    形态学处理,除了最基本的膨胀.腐蚀.开/闭运算.黑/白帽处理外,还有一些更高级的运用,如凸包,连通区域标记,删除小块区域等. 1.凸包 凸包是指一个凸多边形,这个凸多边形将图片中所有的白色像素点都包含 ...