老徐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>&lt;</span><span>&gt;</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前端开发教程】，回复：轮播图，即有完整代码和素材分享。

老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)相关推荐

使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
JS实现轮播图(自动+手动)
网页轮播图效果: 核心原理: tips:代码在文章末尾这个ul就是我们这四张图片的父盒子,我们通过对这个父盒子添加动画函数来实现移动,然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下: f ...
JavaScript简单点击切换效果——轮播图
如何实现一个简单轮播图效果,通过点击切换图片?在JavaScript内容的实现是使用点击触发事件,改变src图片路径. 直接展示JS代码哈! // 创建一个数组来保存图片的路径var imgArr = ...
实现广告图片切换效果轮播图效果
轮播图代码: <!DOCTYPE html> <html lang="en">s <head><meta charset="UT ...
html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
轮播图自动滚动无缝连接 js
轮播图自动滚动无缝连接 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)

老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)相关推荐

最新文章

热门文章