1、无动画效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
/* 去掉图片底部缝隙 */
img{
vertical-align: bottom;
}
.w{
width: 1200px;
margin:0 auto;
}
.banner{
height: 400px;
position: relative;
overflow:hidden;
margin-top: 50px;
}
.banner .arrow_left{
width: 36px;
height: 44px;
position: absolute;
left: 0;
top: 50%;
margin-top: -22px;
z-index:1;
cursor: pointer;
}
.banner .arrow_right{
width: 36px;
height: 44px;
position: absolute;
right: 0;
top: 50%;
margin-top: -22px;
z-index:1;
cursor: pointer;
}
/* 为什么要给ul设置600%的宽度,因为我们需要把所有的li浮动成一行,ul必须有足够的宽度才可以放得下 */
.banner ul {
width: 7200px;
/* 如果想要让ul可以移动,需要给ul设置绝对定位 */
position: absolute;
left: 0;
top: 0;
}
.banner ul li{
float: left;
width: 1200px;
}
.banner .circle{
position: absolute;
bottom: 20px;
/* left: 50%; */
width: 120px;
/* margin-left: -60px; */
}
.banner .circle li{
width: 10px;
height: 10px;
background:rgba(255,255,255,0.8);
border-radius: 50%;
float: left;
margin-right: 10px;
/* 鼠标模拟手势 */
cursor: pointer;
}
/* 为了后面可以点击li高亮 */
/* .banner .circle li:first-child{
width: 20px;
border-radius: 10px;
} */
/* 我们单独定义一个类名 .current */
.banner .circle .current{
width: 20px;
border-radius: 10px;
background-color: red;
}
.banner .circle li:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div class="banner w">
<!-- 左右按钮 -->
<img src="images/prev.png" class="arrow_left"/>
<img src="images/next.png" class="arrow_right"/>
<!-- 图片 -->
<ul>
<li><a href="#"><img src="images/banner01.jpg"></a></li>
<li><a href="#"><img src="images/banner02.jpg"></a></li>
<li><a href="#"><img src="images/banner03.jpg"></a></li>
<li><a href="#"><img src="images/banner04.jpg"></a></li>
<li><a href="#"><img src="images/banner05.jpg"></a></li>
<li><a href="#"><img src="images/banner06.jpg"></a></li>
</ul>
<!-- 导航点 -->
<ol class="circle">
</ol>
</div>
<script>
// 轮播图:
// 1.0 点击左右按钮切换图片
// 2.0 点击导航点切换图片
// 3.0 图片自动切换
// 4.0 导航点跟随图片切换
// 5.0 切换的无缝衔接
// 要求:
//轮播图做出点击左右按钮切换
// 思考:
// 控制哪些元素
// 如何切换图片
// 编码:
// 1.0 获取相关的元素
var arrow_left = document.querySelector(".arrow_left");
var arrow_right = document.querySelector(".arrow_right");
var picItems = document.querySelectorAll(".banner ul li");
var picElement = document.querySelector(".banner ul");
// console.log(picItems);
// 2.0 定义变量 记录索引值(下标)
var index = 0;// 主心骨
var width = 1200;// 宽度
// 3.0 利用css的position的absolute,结合left属性完成图片切换
// margin-left:px;
// transform:translate(px)
//右边按钮
arrow_right.onclick = function(){
// 自增
index ++;
// 判断是否超出最大索引值
if(index > picItems.length - 1){
// 重置索引值
index = 0;
}
// console.log("index:",index);
// 切换图片
changeImage( index , width);
}
//左边按钮
arrow_left.onclick = function(){
// 自减
index --;
// 判断是否小于最小索引值
if(index < 0){
// 重置索引值
index = picItems.length - 1;
}
// console.log("index:",index);
// 切换图片
changeImage(index , width);
}
// 编写导航点的逻辑
var pointStr = "";
for(var i = 0 ; i < picItems.length ; i ++){
if(i == 0 ){
pointStr += "<li class='current' data-index='"+i+"'></li>"
}else {
pointStr += "<li data-index='"+i+"'></li>"
}
}
// 获取导航点容器标签
document.querySelector(".circle").innerHTML = pointStr;
// 获取导航点标签
var points = document.querySelectorAll(".circle li");
// console.log(points);
// 循环导航点
for(var j = 0 ; j < points.length ; j ++){
// 给每个导航点添加自定义属性
points[j].onclick = function(){
// 获取当前点击的导航点自定义属性值
index = this.dataset.index;
// 切换图片和导航点
changeImage( index , width );
}
}
// 编写函数 ,切换图片的逻辑
function changeImage( key , width ){
// 改变ul标签的水平位置
picElement.style['left'] = -(key * width) +"px";
// 排他思想
for(var i = 0 ; i < points.length ; i ++ ){
// 移除类名
points[i].className = "";
}
// 切换导航点
points[key].className = "current";
}
</script>
</body>
</html>
2、有动画效果
HTML、JavaScript
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript 阶段</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="swiper-wrapper">
<!-- 轮播图容器 -->
<div class="wrapper-container">
<!-- 图片-->
<div class="banner">
<ul>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<!-- 追加一张图片 -->
<li>
<a href="#">1</a>
</li>
</ul>
</div>
<!-- 导航点 -->
<div class="point">
<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 按钮 -->
<div class="btn-left"><span class="icon"></span></div>
<div class="btn-right"><span class="icon"></span></div>
</div>
</div>
<script src="./js/animateV3.0.0.js"></script>
<script>
// 要求:
// 功能: 无缝衔接轮播图
// 1.0 实现图片的自动轮播图
// 2.0 鼠标移入轮播图区域,停止轮播,鼠标离开轮播图区域,继续轮播
// 3.0 导航点跟随轮播图进行切换
// 4.0 点击导航点切换图片
// 5.0 点击左右按钮,实现图片的切换和导航点跟随切换
// 思考:
// 需要控制哪些标签
// 控制其什么属性
// 编码:
// 1.0 获取页面相关的元素 wrapper-containe
var container = document.querySelector(".wrapper-container");
var banner = document.querySelector(".banner");
var ulElement = document.querySelector(".banner ul");
var points = document.querySelectorAll(".point ol li");
var btnLeft = document.querySelector(".btn-left");
var btnRight = document.querySelector(".btn-right");
// console.log(btnLeft);
// 2.0 声明变量
// 记录索引值
var index = 0;// 图片的索引值
var square = 0;// 导航点的索引值
// 记录宽度
var width = banner.offsetWidth;
// 定时器变量
var dingshiqi = null;
// 3.0 编写函数
// 切换导航点
var setPoint = function(key){
// 排他思想
for(var i = 0 ; i < points.length ; i ++){
points[i].className = "";
}
// 索引值对应的导航点高亮
points[key].className = "active";
}
// 测试
// setPoint(0);
// 改变索引值 (图片和导航点的索引值)
// changeIndex === > autoPlay
var autoPlay = function(){
// 设置index自增
index ++;
// 判断index是否大于
if(index > 3){
index = 1;
// 设置ul标签瞬间位移到0位置
ulElement.style["marginLeft"] = "0px";
}
// 动画执行形式切换图片 animate(dom,prop,value)
animate(ulElement, "marginLeft", -(index * width));
// 处理导航点的索引值
square ++;
// 三元运算
square = square > 2 ? 0 : square;
// 调用setPoint函数
setPoint(square);
}
// 测试
// autoPlay();
// 4.0 实现轮播图自动播放
dingshiqi = setInterval(function(){ autoPlay(); },2000)
// 5.0 鼠标移入轮播图 暂停轮播图
container.addEventListener("mouseenter",function(){
// 暂停播放
clearInterval(dingshiqi);
// 立即停止动画
// clearInterval(ulElement.timer);
})
// 5.0 鼠标离开轮播图 暂停轮播图继续执行轮播
container.addEventListener("mouseleave",function(){
// 暂停播放
clearInterval(dingshiqi);
// 继续执行轮播
dingshiqi = setInterval(function(){ autoPlay(); },2000)
})
// 6.0 点击导航点实现图片切换
for(var j = 0 ; j < points.length ; j ++){
// 绑定属性
points[j].aaa = j;
// 绑定事件
points[j].onclick = function(){
// 记录当前点击的导航点的索引值
index = this.aaa ;
square = this.aaa ;
// 动画执行形式切换图片 animate(dom,prop,value)
animate(ulElement, "marginLeft", -(index * width));
// 设置导航点
setPoint(square);
}
}
// 7.0 点击左右按钮
// 左边按钮
btnLeft.onclick = function(){
// 防止用户频繁点击按钮
if(dingshiqi) {
clearInterval(dingshiqi);
}
// 设置索引值自减
index --;
// 判断索引值是否小于0
if(index < 0){
// 索引值赋值为 2
index = 2;
// 设置ul标签瞬间位移到最后一张图的位置
ulElement.style["marginLeft"] = "-1350px";
}
// 其余图片以动画形式轮播
animate(ulElement,"marginLeft",-(index * width));
// 设置导航点的索引值
square -- ;
// 三元运算
square = square < 0 ? 2 : square;
// 切换导航点背景
setPoint(square);
}
// 右边按钮
btnRight.onclick = function(){
// 防止用户频繁点击按钮
if(dingshiqi){
clearInterval(dingshiqi);
}
// 索引值自增一
index ++;
// 判断索引值是否大于 3
if(index > 3){
// 给index赋值为1,目的就是为了让第二张图片以动画形式切入
index = 1;
// 把容器标签ul瞬间设置为0的为
ulElement.style["marginLeft"] = "0px";
}
// 以动画形式切换图片
animate(ulElement,"marginLeft",-(index * width));
// 导航点的索引值
square ++;
// 判断
square = square > 2 ? 0 : square;
// 设置导航点切换
setPoint(square);
}
</script>
</body>
</html>
CSS
body {
margin: 0;
}
ul , ol {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.swiper-wrapper {
font-size: 20px;ac
}
.wrapper-container {
width: 450px;
height: 200px;
background-color: #ccc;
border: 10px solid #000;
/* margin: 100px auto 0; */
position: relative;
}
.banner {
width: 450px;
height: 200px;
overflow: hidden;
}
.banner ul {
width: 1800px;
height: 200px;
margin-left: 0px;
}
.banner ul li {
width: 450px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 40px;
font-weight: bold;
float: left;
}
.banner ul li a {
width: 450px;
height: 200px;
display: block;
}
.banner ul li a img {
width: 450px;
height: 200px;
vertical-align: middle;
}
/* 用背景色代替图片 */
.banner ul li:nth-child(1) {
background-color: darkred;
}
.banner ul li:nth-child(2) {
background-color: lightgreen;
}
.banner ul li:nth-child(3) {
background-color: deepskyblue;
}
.banner ul li:nth-child(4) {
background-color: darkred;
}
/* 导航点 */
.point {
width: 100%;
height: 20px;
/* background-color: pink; */
position: absolute;
bottom: 0;
left: 0;
}
.point ol {
width: 100%;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.point ol li {
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.point ol li.active {
background-color: red;
}
/* 左右按钮 */
.btn-left , .btn-right {
width: 30px;
height: 50px;
background-color: rgba(255,255,255,.1);
position: absolute;
top: 50%;
margin-top: -25px;
text-align: center;
line-height: 50px;
}
.btn-left:hover , .btn-right:hover {
background-color: rgba(255,255,255,.5);
}
.btn-left {
left: 10px;
}
.btn-right {
right: 10px;
}
.btn-left .icon ,.btn-right .icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background-size: 20px 20px;
}
.btn-left .icon {
background-image: url(../icon/left.png);
}
.btn-right .icon {
background-image: url(../icon/right.png);
}
animate动画函数(单独放一个js文件):
function animate(dom,prop,value,callback){
// 清除定时器 (防抖思想)
clearInterval(dom.timer);
// 执行定时器
dom.timer = setInterval(function(){
// 记录目标属性值
var target = parseInt(value);
// 获取当前的属性值
var cur = parseInt(getComputedStyle(dom)[prop]);
// 记录步长
// var speed = 10;
var speed = (target - cur) / 10;
// 步长在运算过程中,产生小数点 当步长为0.3时 需要取值为1 (向上取整); 当步长为-0.4 ,需要为-1(向下取整)
// 让步长接近等于 1 或者 等于-1
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 判断当前属性值是否达到目标位置
if(cur == target){
// console.log("当前属性值: "+cur);
clearInterval(dom.timer);
// 是否符合条件
if(typeof callback == "function"){
// 调用回调函数
callback();
}
return ;
}
// 设置dom的样式
dom.style[prop] = cur + speed +"px";
},30)
}
PS:动画版的轮播图没有使用图片 ,自行把颜色去掉,加个img标签引入图片即可。不懂就看无动画效果的那个结构。