js中的轮播图案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 300px;
position: relative;
overflow: hidden;/*隐藏子元素*/
margin: 100px auto;
}
.box .slider{
width: 100%;
height: 100%;
}
.box .slider ul{
width: 1000%;
list-style: none;
position: absolute;
top: 0;
left: 0;
}
.box .slider img{
vertical-align: top;
}
.box .slider ul li{
float: left;
}
.box .scroll_nav{
list-style: none;
position: absolute;
right: 20px;
bottom: 10px;
}
.box .scroll_nav li{
float: left;
width: 20px;
height: 20px;
background-color: #000;
color: #fff;
text-align: center;
font-size: 12px;
font-family: "微软雅黑";
line-height: 20px;
cursor: pointer;
border-radius: 50%;
margin-right: 5px;
}
.box .scroll_nav li.current{
background-color: #356acb;
}
.box .arr{
width: 40px;
height: 50px;
font-size: 35px;
font-family: "黑体";
line-height: 50px;
background-color: rgba(0,0,0,0.3); /*这种方式能让背景透明而文本不收影响*/
color: #fff;
text-align: center;
position: absolute;
top: 125px;
font-weight: bold;
display: none;
cursor: pointer;
/* opacity: 0.1; opacity属性会让盒子半透明，与此同时它也会让黑子内部的文本半透明*/
}
.box .arr_prev{
left: 5px;
}
.box .arr_next{
right: 5px;
}
</style>
<script type="text/javascript">
//
function $(id){
return document.getElementById(id);
}
window.onload=function(){
//1.鼠标进入轮播图区域显示左右箭头
$('scroll').onmouseover=function(){
var arrs = this.getElementsByTagName('span');
for (var i = 0; i < arrs.length; i++) {
arrs[i].style.display = 'block';
}
}
$('scroll').onmouseout=function(){
var arrs = this.getElementsByTagName('span');
for (var i = 0; i < arrs.length; i++) {
arrs[i].style.display = 'none';
}
}
//2.动态生成轮播图导航栏里的Li
var imgCount = $('sl_ul').getElementsByTagName('img').length;//获取图的个数
for (var i = 0; i < imgCount; i++) {
var li=document.createElement('li');//动态创建一个Li标签
li.innerHTML=i+1;
if(i==0){
li.className='current';
}
//给每个创建出来的li动态添加索引值,为下面的序号定值，再点击序号按钮时以便找到下标换图
li.setAttribute("index", i);
//2.2注册li的点击事件：轮播图滚动
li.onclick=function(){
//排他思想，搞定li的样式
var lis=$('sc_nav').getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].className="";
}
this.className="current";
//设置动画的target让轮播图滚动起来
target=this.getAttribute('index')* -800;
}
//
$('sc_nav').appendChild(li);

}
//3.启动缓动动画定时器在window.onload理
var leader =0;
var target =0;
setInterval(function(){
leader=leader+(target-leader)/20;
$('sl_ul').style.left=leader+"px";
},10);

//4.右箭头点击事件:next
$('next').onclick=function(){
if(target>-800*4){
target-=800;
}else{
target=0;//如果已经是最后一张图，就直接滚动回第一张图
}
setNavCurrent();
}
//.左箭头点击事件:prev
$('prev').onclick=function(){
if(target<0){
target+=800;
}
setNavCurrent();
}
//让nav中的li跟随箭头的点击改变选中状态
function setNavCurrent(){
var index = Math.abs(target/800);//拿到索引
var lis=$('sc_nav').getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].className="";
}
lis[index].className='current';
}

}
</script>
</head>
<body>
<div class="box" id="scroll">
<div class="slider" id="sl">
<ul id="sl_ul">
<li><img src="imgs/1.jpg" alt=""></li>
<li><img src="imgs/2.jpg" alt=""></li>
<li><img src="imgs/3.jpg" alt=""></li>
<li><img src="imgs/4.jpg" alt=""></li>
<li><img src="imgs/5.jpg" alt=""></li>
</ul>
</div>
<ul class="scroll_nav" id="sc_nav">
<!-- <li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> -->
</ul>
<span class="arr arr_prev" id="prev"><</span>
<span class="arr arr_next" id="next">></span>
</div>
</body>
</html>

bootstrap中的轮播图不需要写js脚本，我们可以使用bootstrap中的定义好的属性进行编写

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
<script language="JavaScript">

</script>
<style type="text/css">
#turn img{
width:800px;
height: 400px;
}
</style>
</head>
<body>
<!--
焦点轮播图：data-ride="carousel"页面加载完毕后立马开始轮播
-->
<div class="container">
<div class="row">
<div class="col-md-9">
<div data-ride="carousel" id="carousel_container" class="carousel slide">
<!--图片容器-->
<!--carousel-inner:让图片水平排列-->
<div class="carousel-inner">
<div class="item" id="turn">
<img src="img/pic01.jpg" class="text-center" />

<h4 class="carousel-caption">hello</h4>
</div>
<div class="item active"><img src="img/pic02.jpg" /></div>
<div class="item"><img src="img/pic03.jpg" /></div>
</div>
<!--小圆圈容器-->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel_container"></li>
<li data-slide-to="1" data-target="#carousel_container"></li>
<li data-slide-to="2" data-target="#carousel_container"></li>
</ol>
<!--左右按钮-->
<a href="#carousel_container" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel_container" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>
<div class="col-md-3"></div>
</div>

</div>
</body>
</html>

js轮播图和bootstrap中的轮播图的更多相关文章

  1. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  2. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  3. bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除

    //该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...

  4. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  5. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  6. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  7. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  8. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  9. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

随机推荐

  1. HTML5 本地数据库（SQLite） 示例

    http://supercharles888.blog.51cto.com/609344/856071 http://www.sqlite.org/download.html

  2. 富文本编辑器粘贴word

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  3. 《视觉SLAM十四讲》学习日志(二)——初识SLAM

    小萝卜机器人的例子: 就像这种机器人,它的下面有一组轮子,脑袋上有相机(眼睛),为了让它能够探索一个房间,它需要知道: 1.我在哪——定位 2.周围环境怎么样——建图 定位和建图可以理解成感知的 &q ...

  4. windows游戏编程X86实模式和保护模式

    本系列文章由jadeshu编写,转载请注明出处.http://blog.csdn.net/jadeshu/article/details/22309359 作者:jadeshu   邮箱: jades ...

  5. scrapy框架之Pipeline管道类

    Item Pipeline简介 Item管道的主要责任是负责处理有蜘蛛从网页中抽取的Item,他的主要任务是清洗.验证和存储数据.当页面被蜘蛛解析后,将被发送到Item管道,并经过几个特定的次序处理数 ...

  6. UVALive 3716 DNA Regions ——（扫描法）

    乍一看这个问题似乎是很复杂,但其实很好解决. 先处理出每个点到原点的距离和到x正半轴的角度(从x正半轴逆时针旋转的角度).然后以后者进行排序. 枚举每一个点到圆心的距离,作为半径,并找出其他到圆心距离 ...

  7. jQuery 的on()方法

    jQuery 的on()方法 一.总结 一句话总结: 1.普通添加事件:$("a").on("click", function () {执行的代码}) 2.未创 ...

  8. 一个很好的开源视频播放器GiraffePlayer2（支持rtmp,rtsp,http,https）

    一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https) https://github.com/tcking/GiraffePlayer2 GiraffeP ...

  9. linux之i2c子系统维护者源码仓库地址

    仓库地址: git://git.kernel.org/pub/scm/linux/kernel/git/wsa/linux.git

  10. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...