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

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

先建立文件，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. [SQL SERVER] - 还原数据库备份（SQL脚本），抛出 "System.OutOfMemoryException" 异常之解决

    背景 在 Microsoft SQL Server 2016 的查询窗体中,直接还原备份数据库的 SQL 脚本(99MB),抛出 Cannot execute script 异常: 原因 相关资料说: ...

  2. IdentityServer4 学习三

    ClientCredentials客户端类型实现 客户端应用向IdentityServer请求AccessToken,IdentityServer验证通过把AccessToken返回给客户端应用,客户 ...

  3. jpa简单demo调试druid

    Druid连接池配置见https://www.cnblogs.com/blindjava/p/11504524.html pom <dependency> <groupId>m ...

  4. 十分钟快速入门 Python，看完即会，不用收藏！

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  5. Python26之字典2（内置函数）

    一.工厂函数的概念 和序列类型的工厂函数一样,dict()也是一个工厂函数,本质上是一个类,Python程序无处不对象的概念可见一斑 二.字典类型内置函数的用法 1.fromkeys(iterable ...

  6. Gogs + Drone 实现CI/CD（CD）

    前文已经实现CI部分,本文继续以Asp.Net Core实现CD部分. 创建gogs仓库 首先在gogs创建一个空项目drone-ci-demo,本地新建一个asp.net core项目,并且在与.c ...

  7. .net mvc 迁移到 .netcore

    迁移的时候发现,ef6 不能添加 到  .NET Standard2  的类库,因为不兼容, 6 以上的版本只能用于  .net 4.5 以上 只能用别的

  8. JS权威指南读书笔记（三）

    第七章 数组 1 数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快的多. 2 数组直接量的语法允许有可选的结尾的逗号,故[ ; ; ]只有两个元素而非三个. 3 调用构 ...

  9. jQuery遍历(3)

    上期我们讲了遍历的祖先.后代和同胞的问题,现在我们讲讲遍历遍历过滤 三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素.其他过 ...

  10. pycharm git 用法总结

    一.配置git 二.登录GitHub账号 三.创建git respository 四.提交文件 五.共享给GitHub 六.修改文件push到版本库 七.从版本库checkout 项目