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 ...
随机推荐
- iOS一些系统事件的生命周期
1.- (void)applicationWillResignActive:(UIApplication *)application 说明:当应用程序将要入非活动状态执行,在此期间,应用程序不接收消息 ...
- jq选中问题
var objs = $("div[id^='offer_details_']"); //遍历点击事件监听问题 onclick="details("+offer ...
- 安装eclipse的hadoop开发环境
eclipse:安装路径/usr/local/eclipse hadoop-2.5.2 /usr/local/hadoop/hadoop-2.5.2 hadoop2x-eclipse-plugin-m ...
- Tomcat6.0+Jdk1.5+Axis1.3搭建java webservice环境，并使用c#调用该服务。
java jdk:jdk1.5.0_17 下载网址:http://pan.baidu.com/s/1gdmAkgV tomcat 6.0 下载地址:http://tomcat.apache.org/d ...
- window.event对象详尽解析
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...
- JS数组定义【收藏】
最近在学习JS,刚好学到数组,发现章节还蛮多了而且发现了数组的以前好多不知道的东西,顺便整理下: 数组一共有有四种定义的方式 使用构造函数: var a = new Array(); var b = ...
- Excel 统计在某个区间内数值的个数
=COUNTIF(A1:A50,"<=1.0E-5")-COUNTIF(A1:A50,"<60")
- GAT2.0使用文档（组合接口测试）
3.2接口用例场景组件 在此之前,大家应该都已经开发完成了一个最简单的接口测试用例,但是之前的接口用例的期望结果是固定值,不能动态的去做对比,有很大局限性.下面开始介绍怎样通过场景组件来动态对测试结果 ...
- [课程设计]Scrum 2.8 多鱼点餐系统开发进度(下单一览页面-菜式一览功能的最终实现)
Scrum 2.8 多鱼点餐系统开发进度 (下单一览页面-菜式一览功能的最终实现) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队 ...
- 20160330001 调用及触发Office Outlook 约会
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...