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

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

先建立文件，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. [ERROR] /D:/IDEA文件/travel/src/main/java/cn/itcast/travel/util/MailUtils.java:[1,1] 非法字符: '\ufeff'

    报错: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (defau ...

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

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

  3. Practice

    一.简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的 ...

  4. shiro与spring集成

    简介 Apache Shiro 是 Java 的一个安全(权限)框架.主要提供了认证.授权.加密和会话管理等功能. Authentication:身份认证/登录,验证用户是不是拥有相应的身份:Auth ...

  5. Tomcat Lifecycle

    org.apache.catalina.Lifecycle 接口统一管理生命周期,所有生命周期组件都要实现Lifecycle接口. 该接口定义了13个String类型的常量,用于LifecycleEv ...

  6. javascript序列化表单追加参数

    js序列化表单后追加参数方式: 追加参数:token,status var data = $.param({"token":token, "status":st ...

  7. js 遍历树的层级关系的实现

    1.遍历树的层级关系 1)先整理数据 2)找到id和数据的映射关系 3)然后找到父节点的数据,进行存储 test() { const list = [ { id: ", parentId: ...

  8. wstngfw中配置freeradius

    wstngfw中配置freeradius Radius为各种网络设备和服务提供了一个认证来源. Radius认证常用于***.入网门户.交换机.路由器和防火墙.Radius认证比在网络上的不同设备跟踪 ...

  9. 深入分析CAS

    CAS,Compare And Swap,即比较并交换.Doug lea大神在同步组件中大量使用CAS技术鬼斧神工地实现了Java多线程的并发操作.整个AQS同步组件.Atomic原子类操作等等都是以 ...

  10. ElementUI+命名视图实现复杂顶部和左侧导航栏

    在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...