js in Carousel Figure Case:
<!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) ; / * this manner allows transparent background and the text does not affect the yield * /
Color: #fff;
text-align = left: Center;
position: Absolute;
Top: 125px;
weight-font: Bold;
the display: none;
Cursor: pointer;
/ * Opacity: 0.1; Opacity attribute box will translucent, semi-transparent at the same time it makes the inside of sunspots text * /
}
.box .arr_prev {
left : 5px;
}
.box .arr_next {
right: 5px;
}
</ style>
<Script type = "text / JavaScript">
//
function $ (ID) {
return document.getElementById (ID);
}
the window.onload = function () {
// a mouse to rotate left and right arrows show the region of FIG.
$ ( 'Scroll') the onmouseover = function () {.
var this.getElementsByTagName ARRS = ( 'span');
for (var I = 0; I <arrs.length; I ++) {
ARRS [I] = .style.display 'Block';
}
}
. $ ( 'Scroll') onmouseout = function () {
var = this.getElementsByTagName ARRS ( 'span');
for (var I = 0; I <arrs.length; I ++) {
ARRS [I] .style.display = 'none';
}
}
. // 2 dynamically generates the navigation bar in the rotation of FIG. li
var imgCount = $ ( 'sl_ul') the getElementsByTagName ( 'IMG') length;.. FIG // Get the number
for (var I = 0; I <imgCount; I ++) {
var Li = document.createElement ( 'Li '); // Create a dynamically label Li
li.innerHTML = I +. 1;
IF (I == 0) {
li.className = "Current";
}
// Create out for each index value li dynamically adding, to the following sequence number value, when the click number to find the button to change the subscript FIG
li.setAttribute ( "index", i) ;
//2.2 registered li click event: carousel scrolling map
= function li.onclick () {
// thought exclusively, to get li style
var LIS = $ ( 'sc_nav') the getElementsByTagName ( 'li');.
for (var I = 0; I <lis.length; I ++) {
LIS [I] .className = "";
}
this.className = "Current";
// set so that target rotation animation FIG rolling up
target this.getAttribute = ( 'index') -800 *;
}
//
$ ( 'sc_nav') appendChild (li) .;
}
// 3 starts a timer window.onload easing animation processing
var Leader = 0;
var target = 0;
the setInterval (function () {
Leader = Leader + (Leader-target) / 20 is;
$ ( 'sl_ul'). Leader + = style.left "PX";
}, 10);
// click event 4 Right Arrow: Next
. $ ( 'Next') the onclick = function () {
IF (target> -800 * 4) {
target- = 800;
} the else {
target = 0; // If it is already Finally a picture, then rolled directly back to the first figure
}
setNavCurrent ();
}
// left arrow click event: prev.
$ ( 'prev') onclick = function () {.
IF (target <0) {
target = + 800;
}
setNavCurrent ();
}
// make the nav li click the arrow changes to follow the selected
function setNavCurrent () {
var index = the Math.abs (target / 800); // get the index
var lis = $ ( ' sc_nav '.) the 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>
Carousel Figure bootstrap is no need to write js script, we can use the attributes defined in the bootstrap be written
E.g:
<!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><div class = "Container">->focus FIG rotation: data-ride = "carousel" page load is complete immediately after the start rotation<-!<body>
</ head>
<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>