当不能用bootstrap外部框架时，自己写一个轮播图。
首先定义一个装所有组件的盒子，div class为content。里面包含了图片区域，底下的小圆圈区域和左右箭头区域。
该案例可以实现点击底下对应的小圆圈换图，点击左右箭头换图，以及自动轮播。
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style type="text/css">
*{ //清除默认样式
margin: 0;
padding: 0;
}
#content{
width: 1000px;
height: 409px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.bg li{
list-style: none;
float: left;
display: none;
}
.bg li.current{
display: block;
}
.indicator{
position: absolute;
bottom: 20px;
left: 400px;
}
.indicator li{
width: 12px;
height: 12px;
list-style: none;
float: left;
border-radius: 6px;
cursor: pointer;
background: #ccc;
margin-left:6px;
}
.indicator .current{
background-color: #00a3d2;
}
.right,.left{
position: absolute;
top: 180px;
cursor: pointer;
}
.left{
left: 30px;
}
.right{
right: 30px;
}
</style>
<script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var index = 0;
$(function(){
//找到所有的图片
var pics = $(".bg li");
var lis = $(".indicator li");
//提取一个公共的换图方法
function changpic(){
//控制li的class换图
pics.eq(index).addClass("current").siblings().removeClass("current");
lis.eq(index).addClass("current").siblings().removeClass("current");
}
//点击小圆点换图
lis.click(function(){
//去改变index的值
index = $(this).index();//this代表当前每一个li元素
console.log(index);
//调用换图的函数
changpic();
});
//点击左右箭头换图
$(".left").click(function(){
index--;
//当下标值小于0时，即等于-1，那么就从最后一个开始
if(index == -1){
index = 4;
}
changpic();
});
$(".right").click(function(){
index++;
//当下标值大于4，则让index从0开始
if(index == 5){
index = 0;
}
changpic();
});
//当需要自动轮播时需要用setInterval( )函数。仿照前面右箭头的轮播方式，先轮播，最后index++，使间隔时间为5秒。最后不要忘了调用函数
function play(){
setInterval(function(){
if(index == 5){
index = 0;
}
changpic();
index++;
},5000);
}
play();
});
</script>
</head>
<body>
<div id = "content">
<ul class = "bg">
<li class = "current"><a href = "#"><img src = "bg_1.jpg" /></li>
<li><a href = "#"><img src = "bg_2.jpg" /></li>
<li><a href = "#"><img src = "bg_3.jpg" /></li>
<li><a href = "#"><img src = "bg_4.jpg" /></li>
<li><a href = "#"><img src = "bg_5.jpg" /></li>
</ul>
<ul class = "indicator">
<li id = "bg_1" class = "current"></li>
<li id = "bg_2"></li>
<li id = "bg_3"></li>
<li id = "bg_4"></li>
<li id = "bg_5"></li>
</ul>
<img class = "left" src = "l.png">
<img class = "right" src = "r.png">
</div>
</body>
</html>
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
