js中的輪播圖案例： <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 800px; heigh ...
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>
