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 ...
随机推荐
- ionic获取焦点
功能需求:点击按钮后获取input输入框的焦点 获取焦点用jq focus()不成功,因为angular也不推荐,所以网上找了一个在focus封装成指令的方法 指令写法: .directive('my ...
- cocos2dx 3.x(移动修改精灵坐标MoveTo与MoveBy)
// // MainScene.cpp // helloworld // // Created by apple on 16/11/8. // // #include "MainScene. ...
- [Android Tips] 6. Parallax ViewPager
文章 http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-scr ...
- EBS R12.2应用层关闭脚本的执行过程
$ pwd /app/oracle/apps/VIS/fs1/inst/apps/VIS_erptest/admin/scripts $ ./adstpall.sh apps/apps You are ...
- SecureCRT工具配色方案
一.配色后的效果图 二.设置背景颜色 1.选项(Options)==>会话选项(Sessions options)==>终端(Terminal)==>仿真(Emulation) 2. ...
- 20145320《Java程序设计》第9周学习总结
20145320<Java程序设计>第9周学习总结 教材学习内容总结 16.整合数据库 JDBC(java DateBase Connectivity)是用于执行SQL的解决方案,开发人员 ...
- java读取记事本文件的部分数据添加到mysql
package com.tideway.readtxt; import java.io.BufferedReader; import java.io.FileInputStream; import j ...
- C++函数模板template
一. 问题: 强类型语言要求我们为所有希望比较的类型都实现一个实例 int min(int a, int b) { return a < b ? a : b; } double min(dou ...
- Ubuntu 12.04安装vim和配置
问题: ubuntu默认没有安装vim,出现: jyg@ubuntu:~$ vim test.cThe program 'vim' can be found in the following pack ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...