转载注明出处！！！
转载注明出处！！！
转载注明出处！！！
图片轮播demo，弄清楚过程其实是一个很简单的东西，看网上都没有什么实质性的代码，就自己把过程捋了一遍实现了。
这次因为随手写的，所以没有做什么通用性的修改，纯粹想到哪写到哪，大神们别说我就好了。
思路就是显示一张图片，其他图片隐藏掉，很简单吧。。。
由于用到了我博客里面的IcoMoon字体图标，还用到了bootscript的栅格系统用来居中（纯属多余）可以自己看下
废话不多说，直接上代码，还是一样的，注释很清楚了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="font/style.css">
<title>Document</title>
<style>
img{
width: 700px;
height:450px;
position: absolute;
}
.my_center{
text-align:center;
}
.none{
display: none;
}
ul{
padding: 0px;
}
li
{
list-style-type: none; }
.box{
position: relative;
width: 700px;
height:450px;
margin: 0 auto;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.pic_button{
position: absolute;
top: 0px;
bottom: 0px;
margin: auto 0;
width: 40px;
height: 60px;
display: none;
opacity: 0.3;
background-color: #888888;
border: 0px;
outline-style:none;
z-index: 100;
}
.lineList{
display: none;
position: absolute;
left: 0px;
right: 0px;
bottom: 10px;
margin: 0 auto;
z-index:100;
}
span{
color :#CCCCCC;
}
.lineList li{
display: inline;
margin: 5px;
</style>
<script type="text/javascript" src = "./js/jquery.js"></script>
</head>
<body class= "scrollbar">
<div class = "row">
<div class = "col-md-12 my_center">
<div id = "box" class = "box">
<button id = "Previous" class = "left pic_button">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<ul>
<li>
<img class = "none" src="./img/1.jpg">
</li>
<li>
<img class = "none" src="./img/2.jpg">
</li>
<li>
<img class = "none" src="./img/3.jpg">
</li>
<li>
<img class = "none" src="./img/4.jpg">
</li>
<li>
<img class = "none" src="./img/5.jpg">
</li>
<li>
<img class = "none" src="./img/6.jpg">
</li>
<li>
<img class = "none" src="./img/7.jpg">
</li>
<li>
<img class = "none" src="./img/8.jpg">
</li>
</ul>
<button id = "next" class = "right pic_button">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
//初始化
var img_index = 0;
var img = $("#box img");
var img_len = img.length;
img.eq(0).show();
var id;
//开启定时器，设置轮播时间
id = setInterval(show_abs,1000);
//轮播函数
function show_abs(isPrevious){
//设置默认值是为了在不点击按钮的时候自动轮播
//这里为什么这么写？你试试用普通的写法就知道了。
var isNext = arguments[0] ? true : arguments[0];
//为什么判断是isPrevious而不是isNext，你试试就知道了。
var next = isPrevious?-1:1;
img.eq(img_index).fadeOut(1000);
img_index += next;
//判断范围
if(img_index == img_len)
img_index = 0;
if(img_index == -1)
img_index = img_len-1;
img.eq(img_index).fadeIn(1000);
$(".lineList li").eq(img_index).find("span").prop('class','icon-radio-checked');
$(".lineList li").eq(img_index).siblings().find("span").prop('class','icon-radio-unchecked');
}
//鼠标悬停的时候暂停轮播，并显示相关组件
$("#box").hover(function(){
$(".lineList").fadeIn(500);
$(".pic_button").fadeIn(500);
clearInterval(id);
},function(){
$(".lineList").fadeOut(500);
$(".pic_button").fadeOut(500);
id = setInterval(show_abs,1000);
});
$("#Previous").on('click',function(){
show_abs(true);
});
$("#next").on('click',function(){
show_abs(false);
});
//插入一行索引
var lineList = '<ul class = "lineList">';
for(var i = 0; i < img_len; i++)
{
lineList += "<li><span class = 'icon-radio-unchecked'></span></li>";
}
lineList += '</ul>';
$("#box").append(lineList);
//初始化索引显示
$(".lineList li").eq(0).find("span").prop('class','icon-radio-checked');
$(".lineList li").each(function(i){
$(this).click(function(){
//点击以后的效果
$(this).find("span").prop('class','icon-radio-checked');
$(this).siblings().find("span").prop('class','icon-radio-unchecked');
//点击以后图片的切换
if(i != img_index)
{
img.eq(img_index).fadeOut(1000);
img.eq(i).fadeIn(1000);
img_index=i;
}
});
});
});
</script>