老徐WEB:JS简单实现图片滚动效果轮播图,自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯、电商和个人博客等,首页基本都会有轮播图。
老徐在上一篇文章的基础上【最简单详细的轮播图原理和制作过程】,又扩展了功能,使之成为网站中常用的样子,包括右下角提示钮和左右滚动按钮。如果还不清楚轮播图原理,请先看上一篇文章,先理解了原理,再看这篇文章,效果会更好。
这是一个完整的常用的轮播图,可以说拿去直接用就好,最终效果图如下。
老徐先大致介绍一下增加的功能,包括右下角提示钮,鼠标放到哪个圆钮上就滚动到相应的图片上,同时圆钮的颜色也会变化,向前向后都是可以的,还有左右按钮,这个都能理解了,再有把鼠标放到图片上,图片会停止滚动,挪动鼠标后,图片继续滚动,最后是页面自适应,在手机上也是可以的。
下面介绍下增加的代码。
HTML部分增加了圆钮和左右按钮,代码如下:
<div class="box" id="box">
<ul style="left:0px;">
<li><a href="#"><img src="./images/a.png" /></a></li>
<li><a href="#"><img src="./images/b.png" /></a></li>
<li><a href="#"><img src="./images/c.png" /></a></li>
<li><a href="#"><img src="./images/d.png" /></a></li>
<li><a href="#"><img src="./images/e.png" /></a></li>
</ul>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="buttons">
<span><</span>
<span>></span>
</div>
</div>
CSS部分增加了自适应,代码如下:
body, div, ul, li, img {
margin:0;
padding:0;
list-style:none;
}
.box {
position:relative;
width:500px;
height:330px;
margin:50px auto;
overflow:hidden; /*只显示当前图片,隐藏其余图片。没有此属性,图片会列成一排*/
}
.box ul:first-of-type {
position:absolute;
top:0;
left:0;
width:3000px;
}
.box ul:first-of-type li {
float:left;
}
.box ul:last-of-type {
position:absolute;
right:10px;
bottom:10px;
}
.box ul:last-of-type li {
float:left;
width:20px;
height:20px;
line-height:20px;
text-align:center;
vertical-align:middle;
border-radius:50%;
margin-left:10px;
background-color:#999;
cursor:pointer;
}
.box ul:last-of-type li.active {
background-color:#55d5d5;
}
.buttons span {
position:absolute;
width:40px;
height:40px;
line-height:38px;
top:50%;
margin-top:-20px;
text-align:center;
font-weight:bold;
font-size:30px;
border:1px solid #fff;
opacity:0.3;
color:#fff;
cursor:pointer;
background-color:black;
}
.buttons span:first-of-type {
left:0px;
}
.buttons span:last-of-type {
left:100%;
margin-left:-40px;
}
@media screen and (max-width:680px){
.box {
width:300px;
height:198px;
}
.box ul:first-of-type li img {
width:300px;
height:198px;
}
.box ul:first-of-type {
width:1800px;
}
.buttons span {
width:20px;
height:20px;
line-height:18px;
margin-top:-10px;
font-size:20px;
}
.buttons span:last-of-type {
margin-left:-20px;
}
}
JS交互部分的代码增加比较多一些。
把图片快速移动过程的代码在一个函数里。
function roll(distance){ // 图片移动的过程
clearInterval(ulImg.timer);
console.log(pointFlag + ' ' + distance + ' ' + ulImg.offsetLeft);
// 移动方向,负数往右,正数往左。
var move = ulImg.offsetLeft < distance ? movePx : -movePx;
/* 滚动定时器 10毫秒移动一次*/
ulImg.timer = setInterval(function(){
ulImg.style.left = ulImg.offsetLeft + move + "px";
var leave = distance - ulImg.offsetLeft; // 到终点前剩下的距离
if(Math.abs(leave) < Math.abs(move)){
clearInterval(ulImg.timer);
ulImg.style.left = distance + "px"; // 不足一次滚动的距离时,直接到达
}
}, setTime);
}
触及小圆点时的操作,详情请看注释。
for(var i = 0; i < len; i++){
listFlag[i].index = i; // 给每个小圆点添加index属性,并赋值
listFlag[i].onmouseover = function(){ // 为每个小圆点添加onmouseover事件
for(var j = 0; j < len; j++){
listFlag[j].removeAttribute("class"); // 移动class属性
}
this.className = "active"; // 为触发的小圆点添加class属性
var temp = picFlag;
pointFlag = picFlag = this.index; // 记录触发的那个小圆点
console.log(picFlag);
var times = Math.abs(picFlag - temp); // 触发的小圆点距上个小点圆点的间距
movePx = movePx * times; // 把滚动的距离翻倍,这样可以快速滚动,不用太多时间
roll(-picFlag * imgWidth);
movePx = 15 // 恢复原值
}
}
触及轮播图区域时,图片暂停滚动,离开时继续滚动。
box.onmouseover = function(){
clearInterval(timer);
}
box.onmouseout = function(){
timer = setInterval(autoRun, periodTime);
}
给按钮添加onclick事件。
buttons.children[0].onclick = function(){ // 上一个
// 主要处理下picFlag小于0的情况,此时重置数据即可
pointFlag--;
picFlag--;
if(picFlag < 0){ // 此时显示最后克隆的那张图片
ulImg.style.left = -len*imgWidth + "px";
picFlag = pointFlag = len - 1;
}
roll(-picFlag * imgWidth);
for(var i = 0; i < len; i++){
listFlag[i].removeAttribute("class");
}
listFlag[picFlag].className = "active";
}
buttons.children[1].onclick = function(){ // 下一个
autoRun();
}
关注【老徐WEB前端开发教程】 ,回复:轮播图 ,即有完整代码和素材分享。
还没有评论,来说两句吧...