js small exercise -- sliding carousel

Show results:

html code:

<!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">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
</body>
<!-- 当页面加载完成，载入JavaScript文件，为Html元素添加动作 -->
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>

css code

*{
    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 code

// 获取所有元素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);
};

js small exercise -- sliding carousel

Guess you like