今天闲着有时间把轮播事件重新写了一下，发现以前用的很多插件大多支持度不算太友好，很多小问题

自己写了一个，不好地方请指教

先建立文件，css,js，图片，引入jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>

</head>
<body>
<div id="dlunbo">
<ul id="pics">
<li><a href=""><img src="data:image/a1.jpg" alt=""></a></li>
<li><a href=""><img src="data:image/a2.jpg" alt=""></a></li>
<li><a href=""><img src="data:image/a3.jpg" alt=""></a></li>
<li><a href=""><img src="data:image/a4.jpg" alt=""></a></li>
<li><a href=""><img src="data:image/a5.jpg" alt=""></a></li>
<li><a href=""><img src="data:image/a6.jpg" alt=""></a></li>
</ul>
<!-- 底部数字 -->
<div id="tags">
<ul></ul>
</div>
<!-- 左右按钮点击 -->
<div class="btn btn1"><</div>
<div class="btn btn2">></div>
</div>
<script src="js/demo.js"></script>
</body>
</html>

/*********************************/

以下是css

* {
padding: 0px;
margin: 0px;
}

#dlunbo{
position: relative;
height: 700px;
}

#pics{
position: relative;
height: 700px;
}
#pics li{
position: absolute;
}
#pics li img{
width: 100%;
height: 700px;
}
#tags {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.tag {
display: inline-block;
width: 30px;
height: 30px;
background-color: #37d7d2;
color: #fff;
line-height: 30px;
margin: 0px 5px;
border-radius: 100%;
cursor: pointer;
}
.btn {
width: 34px;
height: 66px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 50%;
margin-top: -33px;
color: #fff;
font-size: 40px;
text-align: center;
line-height: 66px;
cursor: pointer;
}
.btn1 {
left: 0px;
}
.btn2 {
right: 0px;
}
.bg {
background-color:#f00;
}

/*********************************/

以下是js部分

var i = 0;
var timer = null;
var numaa=$('#pics li').length;
$(function () {
$("#pics li").eq(0).show().siblings().hide();
A();
c();

//底部数字切换
$(".tag").hover(function () {
i = $(".tag").index($(this));
Show();
clearInterval(timer);
}, function () {
A();
Show();
});

//左点击切换
$(".btn1").click(function () {
clearInterval(timer);
i--;
if (i == -1) {
i = numaa-1;
}
Show();
A();
});
//右点击切换
$(".btn2").click(function () {
clearInterval(timer);
i++;
if (i == numaa) {
i = 0;
}
Show();
A();
});
});

function Show() {
$("#pics li").eq(i).stop(true,true).fadeIn(300).siblings().fadeOut(300);
$(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
}

//循环轮播的数字并追加
function c(){
for (var i = 1; i <= numaa; i++) {
if(i===1){
var div = $("<li class='tag bg'>" + i + "</li>");
}else{
var div = $("<li class='tag'>" + i + "</li>");
}
$("#tags ul").append(div);
}
}

function A() {
timer = setInterval(function () {
i++;
if (i == numaa) {
i = 0;
}
Show();
}, 4000);
}

效果图

jquery轮播事件效果的更多相关文章

  1. 最简单jquery轮播图效果

    样式部分 <style type="text/css"> *{;;} ul,ol{list-style:none;} #box{width:420px;height:6 ...

  2. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  3. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  4. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  5. 分享一款简洁的jQuery轮播源码

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</titl ...

  6. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  7. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  8. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  9. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 第1章：LeetCode--基础部分

    LeetCode刷题指导(不能只实现功能就行需要尽量写最优解): 不可能刷遍所有题,只能通过刷题来恢复写代码的功力,熟悉常用算法(暴力算法.冒泡排序/快速排序.strStr KMP算法.二叉树遍历DF ...

  2. python学习-60 面向对象设计

    面向对象设计 1.三大编程范式 --面向过程编程 --函数式编程 --面向对象编程 2.编程进化论 --编程最开始就是无组织无结构,从简单控制流中按步写指令 --从上述的指令中提取重复的代码快或逻辑, ...

  3. sendmail邮箱部署设置

    前言:在使用一些shell脚本进行监控时需要通过发送报警邮件来提醒,下面通过部署简单的sendmail来实现简单的邮件发送. 1.安装 mailx 和 sendmail: yum install ma ...

  4. ASP.NET Core依赖注入多个服务实现类

    依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来. 服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了 ...

  5. dotnetcore 与 hbase 之三——c# for hbase 客户端的使用

    说明 在上一篇文章dotnetcore 与 hbase 之二--thrift 客户端的制作中已经可以找到 c# hbase 客户端的使用方法了,为什么这里单独列出一篇文章来讲述呢?最简单的理由就是,本 ...

  6. SVN_05用戶管控

    安全性设置 [1]在左侧的User上点击右键 输入上面的信息,点击OK,我们就创建一个用户了. 说明:注意到了下面图中的Groups,是的,也可以先创建组,把用户添加到各个组中,然后对组进行授权,操作 ...

  7. Python之数据处理-2

    一.数据处理其实是一个很麻烦的事情. 在一个样本中存在特征数据(比如:人(身高.体重.出生年月.年龄.职业.收入...))当数据的特征太多或者特征权重小或者特征部分满足的时候. 这个时候就要进行数据的 ...

  8. 我们为什么要用redis

    Redis的5要点: 1.为什么要选择Redis:介绍Redis的使用场景与使用Redis的原因: 2.Redis常用命令总结:包括时间复杂度总结与具体数据类型在Redis内部使用的数据结构: 3.R ...

  9. Django配置websocket请求接口

    1.settings.py INSTALLED_APPS = [ '...', 'channels', '...', ] ASGI_APPLICATION = 'server.routing.appl ...

  10. 【转载】 Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...