jQuery轮播
一,简单实现轮播
//轮播容器
.carousel //轮播容器--可设宽度 (carousel="轮播")
//轮播指标
.carousel-indicators //轮播指标--小圆点 (indicators="指标")<div>
data-target="#轮播容器id" <li>
data-slide-to="第几张图片" //从0开始 <li>
.active //激活图片(只可以一个) <li>
//轮播项目
.carousel-inner //轮播内部 (inner="内部")
.item //逐条列出 (item="项目,逐条列出")
.carousel-caption //轮播标题 (caption="标题") //可省略
//轮播左右键
<a href="#轮播容器id">
.carousel-control (control="控制")
left or right
data-slide="prev or next" //数据滑动"上一个 &lasquo"或者"下一个 &rsaquo"
//用js实现轮播效果
//播放时间间隔
$("轮播容器id").carousel({interval:2000})
//开始循环
$("#按钮id").click(function(e){
$("轮播容器id").carousel("cycle");
}
//暂停循环(当鼠标指向图片上时，轮播停止，鼠标挪开时，轮播继续)
$("#按钮id").click(function(e){
$("轮播容器id").carousel("pause");
}
//上一张
$("#按钮id").click(function(e){
$("轮播容器id").carousel("prev");
}
//下一张
$("#按钮id").click(function(e){
$("轮播容器id").carousel("next");
}
//第一张
$("#按钮id").click(function(e){
$("轮播容器id").carousel(0);
}
//第二张
$("#按钮id").click(function(e){
$("轮播容器id").carousel(2);
}
//轮播被切换时，触发事件
//先触发事件，然后内容变化
$("轮播容器id").on('slide.bs.carousel',function(e){
alert("轮播被切换");
})
//先内容变化，然后触发事件
$("轮播容器id").on('slid.bs.carousel',function(e){
alert("轮播被切换");
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(e){
//设置播放时间间隔
$("#myCaroucel").carousel({interval:500})
//开始循环
$("#startBtn").click(function(e){
$("#myCaroucel").carousel("cycle");
});
//暂停循环
$("#pauseBtn").click(function(e){
$("#myCaroucel").carousel("pause");
});
//上一张
$("#prevBtn").click(function(e){
$("#myCaroucel").carousel("prev");
});
//下一张
$("#nextBtn").click(function(e){
$("#myCaroucel").carousel("next");
});
//第一张
$("#oneBtn").click(function(e){
$("#myCaroucel").carousel(0);
});
//第二张
$("#twoBtn").click(function(e){
$("#myCaroucel").carousel(1);
});
//第三张
$("#thereBtn").click(function(e){
$("#myCaroucel").carousel(2);
});
//触发事件的回调
$("#myCaroucel").on('slide.bs.carousel',function(e){
alert("轮播被切换");
})
});
</script> </head>
<body>
<div class="container">
<!---轮播容器--->
<div id="myCaroucel" class="carousel" style="width: 600px;">
<!---轮播指标--->
<div class="carousel-indicators">
<li data-target="#myCaroucel" data-slide-to="0" class="active"></li>
<li data-target="#myCaroucel" data-slide-to="1"></li>
<li data-target="#myCaroucel" data-slide-to="2"></li>
</div>
<!---轮播项目--->
<div class="carousel-inner">
<div class="item active">
<img src="img/psb (2).jpg" />
<div class="carousel-caption"><h3>猪头</h3></div>
</div>
<div class="item">
<img src="img/psb (3).jpg">
<div class="carousel-caption"><h3>哈哈哈</h3></div>
</div>
<div class="item">
<img src="img/psb (4).jpg" />
<div class="carousel-caption"><h3>我是最厉害的机器人</h3></div>
</div>
</div>
<!---轮播左右键--->
<a href="#myCaroucel" class="carousel-control left" data-slide="prev">‹</a>
<a href="#myCaroucel" class="carousel-control right" data-slide="next">›</a>
<div class="text-center">
<button type="button" class="btn" id="startBtn">自动播放</button>
<button type="button" class="btn" id="pauseBtn">暂停播放</button>
<button type="button" class="btn" id="prevBtn">上一张</button>
<button type="button" class="btn" id="nextBtn">下一张</button>
<button type="button" class="btn" id="oneBtn">第一张</button>
<button type="button" class="btn" id="twoBtn">第二张</button>
<button type="button" class="btn" id="thereBtn">第三张</button>
</div>
</div>
</div>
</body>
</html>
jQuery轮播的更多相关文章
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 分享一款简洁的jQuery轮播源码
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</titl ...
- 自己写的一个jQuery轮播插件
大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...
- jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- jQuery轮播图
yii2 轮播 样式: <style type="text/css"> *{margin:0;padding:0} body{margin:50px} li{list- ...
- 12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jquery轮播图片（无插件简单版）
轮播图(第三版)[2016-2-26] 工作中用的,改写了半透明蒙版,可以兼容ie7 <script type="text/javascript" src="htt ...
随机推荐
- 12月14日《奥威Power-BI销售计划填报》腾讯课堂开课啦
2016年的最后一个月也过半了,新的一年就要到来,你是否做好了启程的准备?新的一年,有计划,有目标,有方向,才不至于迷茫.规划你的2017,新的一年,遇见更好的自己! 所以 ...
- Windows Server 2008 R2 创建辅助DNS服务器并接管主要DNS服务器
公司需求: Zhuyu公司局域网有一台主要DNS服务器,经领导讨论需要规划安装一台辅助DNS服务器备用. 功能需求: 当主要DNS服务器宕机或系统崩溃,辅助DNS服务器能接管主要DNS服务器工作,并且 ...
- sql sp_xml_preparedocument 函数运用实例
表结构: CREATE FUNCTION f_splitSTR( ), --待分拆的字符串 ) --数据分隔符 ))) AS BEGIN --创建分拆处理的辅助表(用户定义函数中只能操作表变量) DE ...
- Boost源码剖析之：泛型指针类any
C++是强类型语言,所有强类型语言对型别的要求都是苛刻的,型别一有不合编译器就会抱怨说不能将某某型别转换为某某型别,当然如果在型别之间提供了转换操作符或是标准所允许的一定程度的隐式转换(如经过非exp ...
- oracle数据库安装
1.oracle10g下载完成后,选择“setup.exe”启动安装. 2.oracle主目录位置就是oracle准备安装的位置,称为"Oracle_Home".Oracle安装的 ...
- MVC5关联表读取相关表数据
SchoolName = db.Sys_Company.Find(gr.SchoolCode).FullName 只需Model中指定好SchoolCode是Sys_Company的主键就行了!
- Excel应该这么玩——0、初衷：用IT方法玩Excel
在企业中处理业务数据,最好的方案是使用业务系统.业务系统可以基于复杂的业务逻辑处理大量数据,并支持多人协作处理流程性的工作,对支撑企业运营非常重要.但是由于业务系统的复杂性很高,一点小小的改变也需要较 ...
- UBIFS 文件系统分析1 - 磁盘结构【转】
转自:http://blog.csdn.net/kickxxx/article/details/7109662 版权声明:本文为博主原创文章,未经博主允许不得转载. ubifs磁盘结构 UBIFS文件 ...
- python发送邮件方法
1.普通文本邮件 #!/usr/bin/env python # -*- coding:utf-8 -*- import smtplib from email.mime.text import MIM ...
- 原生JS--Ajax
原生Ajax: Ajax基础:--ajax:无刷新数据读取,读取服务器上的信息--HTTP请求方法: --GET:用于获取数据,如浏览帖子 --POST:用于上传数据,如用户注册 --GE ...