jQuery实现轮播图(自动+手动)(二)
此处将在上一步的基础上进行轮播图实现
下面现分别将所涉及到的html5、css3、jQuery的代码贴出,
可自行完成功能实现!!!
- 轮播图的实质是多张图片的水平平铺,及其左右移动。
- 因此首先要通过float:left设置所需照片的水平平铺效果
- 其次装载照片的盒子需要设置width:(=照片数量*单个照片的宽)
- 设置装载照片的盒子overflow:hidden,进行溢出隐藏。
- 必须在head中引用jQuery库
- https://jquery.com/
- https://www.bootcdn.cn/jquery/
HTML
<div class="box clearfix">
<!-- 背景图片开始 -->
<div class="bgphoto" style="left: 0px;">
<img src="./images/bgbox1.jpg" alt="1">
<img src="./images/bgbox2.jpg" alt="2">
<img src="./images/bgbox3.jpg" alt="3">
<img src="./images/bgbox4.jpg" alt="4">
<img src="./images/bgbox5.jpg" alt="5">
</div>
<!-- 左箭头开始 -->
<div class="leftarrow">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiantou2"></use>
</svg>
<!-- <img src="images/rightarrow.png" alt=""> -->
</div>
<!-- 右箭头开始 -->
<div class="rightarrow">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiantou3"></use>
</svg>
<!-- <img src="images/rightarrow.png" alt=""> -->
</div>
<!-- 下方点点 -->
<div class="circle">
<ul>
<li index='1' class="addiconcolor"></li>
<li index='2'></li>
<li index='3'></li>
<li index='4'></li>
<li index='5'></li>
</ul>
</div>
CSS
.box {
position: relative;
top: 0px;
left: -58px;
width: 1226px;
height: 460px;
margin: 0px auto;
overflow: hidden;
}
.box .circle .addiconcolor {
color: red;
}
/* 背景图片开始 */
.box .bgphoto {
float: left;
position: absolute;
width: 6130px;
height: 460px;
}
.box .bgphoto img {
float: left;
width: 1226px;
height: 460px;
}
/* <!-- 右箭头开始 --> */
.box .rightarrow,
.box .leftarrow {
position: absolute;
right: 0px;
bottom: 180px;
width: 50px;
height: 100px;
}
.box .leftarrow {
left: 234px;
}
.box .rightarrow>svg,
.box .leftarrow>svg {
width: 50px;
height: 50px;
color: #777;
margin-top: 25px;
}
.box .rightarrow:hover,
.box .leftarrow:hover {
background: rgba(0, 0, 0, .5);
}
/* 下方点点开始 */
.box .circle {
position: absolute;
right: 430px;
bottom: 20px;
width: 200px;
height: 20px;
cursor: pointer;
}
.box .circle ul li {
font-family: "icomoon";
display: inline-block;
font-size: 18px;
margin-left: 10px;
color: #fff;
cursor: pointer;
}
jQuery
var imgCounts = 5;
var index = 1;
var intervalId;
var buttonSpan = $(".box .circle ul")[0].children;
autoNextPage();
function autoNextPage() {
intervalId = setInterval(function () {
nextPage(true);
}, 1000);
}
//鼠标移入事件
$('.box').mouseover(function () {
console.log("hah");
clearInterval(intervalId);
});
//鼠标移出事件
$(".box").mouseout(function () {
autoNextPage();
});
//右键点击事件
$(".rightarrow").click(function () {
nextPage(true);
});
//左键点击事件
$(".leftarrow").click(function () {
nextPage(false);
});
clickButtons();
//clickButtons方法的具体功能定义
function clickButtons() {
var length = buttonSpan.length;
for (var i = 0; i < length; i++) {
buttonSpan[i].onclick = function () {
$(buttonSpan[index - 1]).removeClass("addiconcolor");
if ($(this).attr("index") == 1) {
index = 5;
} else {
index = $(this).attr("index") - 1;
}
nextPage(true);
};
}
}
//nextPage的方法功能定义
function nextPage(next) {
var targetLeft = 0;
$(buttonSpan[index - 1]).removeClass("addiconcolor");
if (next) {
if (index == 5) {
targetLeft = 0;
index = 1;
} else {
index++;
targetLeft = -1226 * (index - 1);
}
} else {
if (index == 1) {
index = 5;
targetLeft = -1226 * (imgCounts - 1);
} else {
index--;
targetLeft = -1226 * (index - 1);
}
}
//进行图片的轮播
$(".box .bgphoto").animate({
left: targetLeft + 'px'
});
//进行下方circle的切换事件
$(buttonSpan[index - 1]).addClass("addiconcolor");
}
<script src=" https://at.alicdn.com/t/font_1679855_lnstght38e.js"></script>
实现效果
本文仅是个人经验总结,如有需要可留言。