效果展示:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/cute.css" />
<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
<!-- 引入图片 -->
<div id="carousel">
<ul id="carousel_image_container">
<li>
<a href="">
<img src="img/bigg/1.jpg" alt="cat1">
</a>
</li>
<li>
<a href="">
<img src="img/bigg/2.jpg" alt="cat2">
</a>
</li>
<li>
<a href="">
<img src="img/bigg/3.jpg" alt="cat3">
</a>
</li>
<li>
<a href="">
<img src="img/bigg/4.jpg" alt="cat4">
</a>
</li>
<li>
<a href="">
<img src="img/bigg/5.jpg" alt="cat5">
</a>
</li>
</ul>
<!-- 导航按钮 -->
<ul id="carousel_li_container">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右按键控制 -->
<div id="carousel_controller">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>
<!-- 当页面加载完成,载入JavaScript文件,为Html元素添加动作 -->
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>
css代码
*{
margin: 0;
padding: 0;
}
#carousel{
width: 960px;
height: 560px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#carousel_image_container{
width: 5760px;
height: 540px;
list-style: none;
position: relative;
}
#carousel_image_container>li {
/*设置大小*/
width: 960px;
height: 540px;
float: left;
}
#carousel_image_container>li>a{
/*设置大小*/
width: 100%;
height: 100%;
display: block;
}
#carousel_image_container>li>a>img {
/*设置轮播容器大小*/
width: 100%;
height: 100%;
display: block;
}
#carousel_li_container{
margin: 0px;
padding: 0px 10px;
background-color: #E0E0E0;
height: 25px;
position: absolute;
border-radius: 20px;
bottom: 35px;
margin-left: -88.625px;
z-index: 2000;
opacity: .8;
left: 50%;
list-style: none;
}
#carousel_li_container>li{
margin: 3.75px 7px;
padding: 0px;
width: 17.5px;
height: 17.5px;
/*盒模式*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid #fff;
float: left;
cursor: pointer;
/*设置动画效果*/
transition: all .5s;
}
#carousel_li_container>li.active {
border: 1px solid orangered;
background: orangered;
}
#carousel_controller {
display: block;
}
#carousel_controller span{
display: block;
width: 45px;
height: 60px;
position: absolute;
top: 50%;
cursor: pointer;
background-color: #E0E0E0;
opacity: .8;
text-align: center;
font-size: 26px;
line-height: 60px;
margin-top: -30px;
}
#carousel_controller span:hover {
background: rgba(0, 0, 0, 0.5);
}
#left{
left: 0;
}
#right{
right: 0;
}
js代码
// 获取所有元素ID
var carousel = document.getElementById("carousel");
var carousel_image_container = document.getElementById("carousel_image_container");
var carousel_li_container = document.getElementById("carousel_li_container");
var carousel_controller = document.getElementById("carousel_controller");
var carousel_controller_left = document.getElementById("left");
var carousel_controller_right = document.getElementById("right");
// 设置全局变量
var picIndex = 0;
var picWidth = carousel.offsetWidth;
// 封装动画函数
function animate(element, target) {
// 先清理定时器
clearInterval(element.timeId);
// 一会要清理定时器(只产生一个定时器)
element.timeId = setInterval(function() {
// 获取对象当前的位置
var current = element.offsetLeft;
// 每次移动多少像素
var step = 10;
// 判断是往正方向走还是往相反方向走
step = current < target ? step : -step;
// 每次移动后的距离
current += step;
// 判断当前移动后的位置是否到达目标位置
if(Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
// 清理定时器
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 0.48);
}
// 拷贝第一张图片到最后
carousel_image_container.appendChild(carousel_image_container.children[0].cloneNode(true));
// 循环遍历控制器li标签并注册单击事件和自定义属性值
for(var i = 0; i < carousel_li_container.children.length; i++) {
// 创建自定义属性值 index
carousel_li_container.children[i].setAttribute("index", i);
// 注册鼠标放上去事件
carousel_li_container.children[i].onmouseover = function() {
// 先清除所有li标签的class
for(var j = 0; j < carousel_li_container.children.length; j++) {
carousel_li_container.children[j].removeAttribute("class");
}
// 设置当前li效果
this.className = "active";
// 获取鼠标进入的li的当前索引值
picIndex = this.getAttribute("index");
// 移动ul
animate(carousel_image_container, -picIndex * picWidth);
};
}
// 设置第一个图片的li为选中状态
carousel_li_container.children[0].className = "active";
function Event() {
// 判断当前图片是否为最后一张
if(picIndex == carousel_image_container.children.length - 1) {
picIndex = 0;
carousel_image_container.style.left = 0 + "px";
}
// 将索引切换到下一张图片
picIndex++;
animate(carousel_image_container, -picIndex * picWidth);
// 添加控制器按钮样式
if(picIndex == carousel_image_container.children.length - 1) {
carousel_li_container.children[carousel_li_container.children.length - 1].removeAttribute("class");
carousel_li_container.children[0].className = "active";
} else {
// 清除所有的小按钮的背景颜色
for(var i = 0; i < carousel_li_container.children.length; i++) {
carousel_li_container.children[i].removeAttribute("class");
}
carousel_li_container.children[picIndex].className = "active";
}
}
// 右边按钮单机事件
right.onclick = Event;
// 左边按钮单击事件
left.onclick = function() {
// 判断当前是否是第一张
if(picIndex == 0) {
picIndex = carousel_image_container.children.length - 1;
carousel_image_container.style.left = (-picIndex * picWidth) + "px";
}
// 将索引切换到前一张图片
picIndex--;
animate(carousel_image_container, -picIndex * picWidth);
// 清除所有的小按钮的背景颜色
for(var i = 0; i < carousel_li_container.children.length; i++) {
carousel_li_container.children[i].removeAttribute("class");
}
carousel_li_container.children[picIndex].className = "active";
};
// 设置自动播放
var timeId = setInterval(function() {
Event();
}, 2000);
// 鼠标放上停止播放
carousel.onmouseover = function() {
clearInterval(timeId);
};
// 鼠标离开开始播放
carousel.onmouseout = function() {
timeId = setInterval(Event, 2000);
};