案例三、自己写一个轮播图

来源：互联网发布：算法导论编辑：程序博客网时间：2024/06/05 08:47

当不能用bootstrap外部框架时，自己写一个轮播图。

首先定义一个装所有组件的盒子，div class为content。里面包含了图片区域，底下的小圆圈区域和左右箭头区域。

该案例可以实现点击底下对应的小圆圈换图，点击左右箭头换图，以及自动轮播。

<!DOCTYPE html>

<html>

<head>

*{ //清除默认样式

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>

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>

</ul>

</ul>

</div>

</body>

</html>

1 0

案例三 、自己写一个轮播图

案例三、自己写一个轮播图