jquery轮播事件效果
今天闲着有时间把轮播事件重新写了一下，发现以前用的很多插件大多支持度不算太友好，很多小问题
自己写了一个，不好地方请指教
先建立文件，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轮播事件效果的更多相关文章
- 最简单jquery轮播图效果
样式部分 <style type="text/css"> *{;;} ul,ol{list-style:none;} #box{width:420px;height:6 ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 分享一款简洁的jQuery轮播源码
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</titl ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- 小程序实践（二）：swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- 微信自研生产级paxos类库PhxPaxos实现原理介绍
转载自: http://mp.weixin.qq.com/s?__biz=MzI4NDMyNTU2Mw==&mid=2247483695&idx=1&sn=91ea4229 ...
- Zuul【文件上传】
1.搭建一个eureka-server注册中心工程 该工程比较简洁,没有太多配置,不在描述,单节点,服务端口:8888 2.创建zuul-gateway网关工程 2.1.工程pom依赖 <dep ...
- linux主机内存告警shell脚本
#!/bin/sh ramusage=$(free | awk '/Mem/{printf("RAM Usage: %.2f\n"), $3/$2*100}'| awk '{pri ...
- FaceBook CVPR2014: DeepFace解读
DeepFace是Facebook在2014年的CVPR上提出来的,后续出现的DeepID和FaceNet也都体现DeepFace的身影,可以说DeepFace是CNN在人脸识别的奠基之作,目前深 ...
- 关于MQ的几件小事（三）如何保证消息不重复消费
1.幂等性 幂等(idempotent.idempotence)是一个数学与计算机学概念,常见于抽象代数中. 在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同.幂等函数,或 ...
- 什么是Familywise Error Rate
1.什么是Familywise Error Rate(FWE or FWER) 定义:在一系列假设检验中,至少得出一次错误结论的概率. 换句话说,是造成至少一次Type I Error的概率.术语FW ...
- jqTransform：呈现更美的表单
jqTransform,是DFC Engineering写的一个jQuery的样式插件,用于美化表单元素,使用方便简单,能美化所有表单元素包括input,radio,textarea,select,c ...
- Java 之 序列化流
一.序列化概述 Java 提供了一种对象 序列化 的机制.用一个字节序列可以表示一个对象,该字节序列包含该 对象的数据 . 对象的类型 和 对象中存储的属性 等信息.字节序列写出到文件之后,相当于文件 ...
- 【转载】2018年最值得期待的5大BPM厂商
部署BPM软件可以帮助企业获得竞争优势,通过分析.设计.执行.控制和调节业务流程协助企业领导者提高组织绩效. 业务流程管理(BPM)是指随着公司和组织的发展匹配业务目标和流程的行为.部署BPM软件可以 ...
- 如何使用async和await这对组合设计统一的取Access Token的函数
最近我在使用SAP云平台的机器学习API做和SAP系统的集成,因为SAP Cloud Platform Leonardo上的机器学期API,每次消费时需要传一个Access Token,故在每次实际调 ...