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 ...
随机推荐
- WindowsFormsIntegration.dll
WindowsFormsIntegration.dll的位置如下 C:\Program Files\Reference Assemblies\Microsoft\Framework\.NETFrame ...
- ubifs物理存储
Ubifs通过ubi管理MTD设备,ubi的LEB随机映射PEB,其本身占用一部分PEB,具体文件存储情况分析如下. 1. Ubi中不管是是逻辑块号还是物理块号都是从0开始的.一般情况下,Nandfl ...
- 安装eclipse的hadoop开发环境
eclipse:安装路径/usr/local/eclipse hadoop-2.5.2 /usr/local/hadoop/hadoop-2.5.2 hadoop2x-eclipse-plugin-m ...
- Unicode、UTF-8、UTF-16和UTF-32的区别
Unicode是一个巨大的字符集,给世界上所有的字符定义了一个唯一编码.其仅仅规定了每个符号的二进制代码,没有制定细化的存储规则.UTF-8.UTF-16.UTF-32才是Unicode的存储格式定义 ...
- POJ - 1978 Hanafuda Shuffle
最初给牌编号时,编号的顺序是从下到上:洗牌时,认牌的顺序是从上到下.注意使用循环是尽量统一“i”的初始化值,都为“0”或者都为“1”,限界条件统一使用“<”或者“<=”. POJ - 19 ...
- Using Yum Variables
You can use and reference the following built-in variables in yum commands and in all Yum configurat ...
- Java中的4种代码块
一.普通代码块 直接在一个方法中出现的{}就称为普通代码块,例子程序如下: public class CodeDemo01{ public static void main(String[] args ...
- How to use usercontrol - pass paramters
在线PhotoShop http://uupoop.com/ In the previous chapter we created a UserControl, and now we will try ...
- asp.net关于页面不回发,不生成__doPostBack方法问题的完美解决方案
1.有可能是使用net4.0+iis6之后没有打补丁.解决办法在IE10中登录我公司的一个网站时,点击其它菜单,页面总会自动重新退出到登录页,后检查发现,IE10送出的HTTP头,和.AUTH Coo ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...