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

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

先建立文件，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. LeetCode 515. 在每个树行中找最大值(Find Largest Value in Each Tree Row)

    515. 在每个树行中找最大值 515. Find Largest Value in Each Tree Row 题目描述 You need to find the largest value in ...

  2. LeetCode 671. 二叉树中第二小的节点(Second Minimum Node In a Binary Tree) 9

    671. 二叉树中第二小的节点 671. Second Minimum Node In a Binary Tree 题目描述 给定一个非空特殊的二叉树,每个节点都是正数,并且每个节点的子节点数量只能为 ...

  3. Git--远程仓库版本回退方法

    Git--远程仓库版本回退方法 1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回退版本? 如果提交了一个错误的 ...

  4. Linux基础-15-samba服务

    1. samba的功能: samba是一个网络服务器,用于Linux和Windows之间共享文件. 2. samba服务的启动.停止.重启 service smb start|stop|restart ...

  5. cf 869c The Intriguing Obsession

    题意:有三种三色的岛,用a,b,c来标识这三种岛.然后规定,同种颜色的岛不能相连,而且同种颜色的岛不能和同一个其他颜色的岛相连.问有多少种建桥的方法. 题解:em....dp.我们先看两个岛之间怎么个 ...

  6. js入门之内置对象Date

    一. Date对象 Math和Date对象的区别 Math对象和Date对象的区别 Math不是一个构造函数,里面提供的是静态成员 Date是一个构造函数 首先要通过new Date() 来创建日期实 ...

  7. 小数据玩转Pyspark(2)

    一.客户画像 客户画像应用:精准营销(精准预测.个性化推荐.联合营销):风险管控(高风险用户识别.异常用户识别.高可疑交易识别):运营优化(快速决策.产品组合优化.舆情分析.服务升级):业务创新(批量 ...

  8. 解决 React Native：The development server returned response error code: 404

    解决方法: 打开android/app/build.gradle compile 'com.facebook.react:react-native:+' 修改为: compile ("com ...

  9. Yum三方仓库——EPEL

    参考:什么是EPEL 及 Centos上安装EPEL 参考:How to Enable EPEL Repository for RHEL/CentOS 7.x/6.x/5.x 前言 RHEL以及他的衍 ...

  10. csdr Makefile for openwrt（纯粹笔记，暂未成功）

    1.自已学着写的Makefile给csdr在openwrt平台上使用 参照:https://blog.csdn.net/lvshaorong/article/details/54668220 incl ...