*此处JavaScript代码引入了Vue.js(该文件可到官网自行下载)和animate.js(该文件是自己封装的一个动画函数【代码在下方】)
一、HTML图片和左右箭头
<!-- 此处为产品特色【*图片地址和类名记得自行更改】 -->
<div id="app">
<div class="cpts">
<!-- 轮播图 -->
<ul class="cpts-lbt" @mouseover="stopMove(obj[0])" @mouseleave="autoMove('.cpts-right', 3000, obj[0])">
<li><img src="./images/zcgljzh.png" /></li>
<li><img src="./images/cgzsdyh.png" /></li>
<li><img src="./images/jcjktyh.png" /></li>
<li><img src="./images/jkyth.png" /></li>
</ul>
<!-- 左右箭头 -->
<a class="cpts-left" href="javascript:;" @click="leftMove('.cpts-lbt', 1080, 1, obj[0])" @mouseover="stopMove(obj[0])" @mouseleave="autoMove('.cpts-right', 3000, obj[0])"></a>
<a class="cpts-right" href="javascript:;" @click="rightMove('.cpts-lbt', 1080, 1, obj[0])" @mouseover="stopMove(obj[0])" @mouseleave="autoMove('.cpts-right', 3000, obj[0])"></a>
</div>
</div>
二、CSS轮播图样式
<style>
.cpts{
position: relative; /* 必填:父节点相对定位 */
overflow: hidden; /* 必填:测试时可注释该行 */
/* width、height为图片宽、高度,此处为1080*500;*/
width: 1080px;
height: 500px; /* 若不设定高度,overflow:hidden后,可能会出现图片不显示问题 */
}
.cpts ul{
position: absolute; /* 必填:ul绝对定位,用于改变x轴 */
width: 5400px; /* 必填:图片宽度【此处为1080px】*图片数量【此处4张+1张克隆(第一张)图】 */
}
.cpts ul li{
float: left; /* 必填:li左浮动,使图片位于一行 */
}
/* 轮播图箭头 */
.cpts-left, .cpts-right{
position: absolute; /* 必填:箭头图定位在轮播图中 */
z-index: 999; /* 自行设定:箭头图的数值大于轮播图的数值 */
/* width、height自行设定【箭头图的宽高】 */
display: inline-block;
width: 32px;
height: 32px;
}
/* 左右箭头【rem数值跟随自己的箭头图更改】 */
.cpts-left{
background: url(../images/slider-arrow.png) no-repeat -174px 0;
}
.cpts-right{
background: url(../images/slider-arrow.png) no-repeat -58px 0;
}
/* 箭头经过改变样式【若为移动端则无鼠标经过,此处注释掉了,web端可打开以下注释】 */
/* .cpts-left:hover, .fa-first-left:hover, .itsb-left:hover{
background-position: -116px 0;
}
.cpts-right:hover, .fa-first-right:hover, .itsb-right:hover{
background-position: 0 0;
} */
/* 产品特色-箭头定位【自行设定】 */
.cpts-left,.cpts-right{
top: 50%;
transform: translateY(-50%);
}
.cpts-left{
left: 10px;
}
.cpts-right{
right: 10px;
}
/* 此处进行了格式化,注意li标签需要取消小圆点 */
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
</style>
三、引入animate.js和Vue.js文件,编写JavaScript代码【此处考虑后期轮播图总数和图片移动个数不同,进行了封装】
animate.js代码如下:
/**
* 动画函数
* @param {*} obj
* @param {*} target
* @param {*} callback
*/
// 动画函数封装(obj:目标对象,target:目标位置, callback:回调函数)
function animate(obj, target, callback){
// 运行之前先清除以前的定时器,只保留当前的(防止连续点击)
clearInterval(obj.timer);
// 添加定时器
obj.timer = setInterval( function(){
// 步长值: (目标值 - 当前位置)/ 10 --改为整数,不要出现小数
var step = (target - obj.offsetLeft) / 10;
// 步长值大于0向上取整,小于0向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 停止动画
if(obj.offsetLeft == target ){
clearInterval(obj.timer);
// 回调函数在定时器结束之后
// if(callback){
// callback();
// }
// 利用短路运算符【如果callback==true,执行callback()】
callback && callback();
}
// 开始运动
obj.style.left = obj.offsetLeft + step +'px';
}, 15)
}
引入 animate.js 和 vue.js 文件后开始编写:
<!-- 此处在html文件中引入了 animate.js 和 vue.js 文件 -->
<script type="text/javascript" src="../js/animate.js"></script>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 轮播图的索引数和定时器 --2个对象代表一页有2个轮播图(互不影响)
obj:[
{id: 'obj1', num: 0, timer: null}, //第一个轮播图
// {id: 'obj2', num: 0, timer: null}, //第二个轮播图【若一个页面用两个不同的轮播图,此为第二个】
],
// 节流阀(处理连续点击左右箭头图片过快问题)【此处未生效,暂未查出原因】
flag: true,
},
methods: {
// 克隆显示的图片数量-封装
// ulName:类名或id名【此处用的类名】
// photoCount:需要克隆的图片数量
clonePhoto(ulName, photoCount){
var ul = document.querySelector(ulName);
for(var i=0; i<photoCount; i++){
var photo = ul.children[i].cloneNode(true);
ul.appendChild(photo);
}
},
// 轮播图左箭头-封装
// ulName:类名或id名【此处用的类名】
// photoWidth:图片宽度【注意是 px 还是 rem】
// photoCount:克隆的图片数量
// obj:定时器对象
leftMove(ulName, photoWidth, photoCount, obj){
var ul = document.querySelector(ulName);
// 若使用的rem布局模式,需要将 rem 转为 px【若 photoWidth 用的 px 无需转换】
// photoWidth = Math.floor( photoWidth * parseFloat( document.querySelector('html').style.fontSize ) );
// 节流阀(处理连续点击左右箭头图片过快问题)
if(this.flag == true){
// 关闭节流阀
this.flag = false;
if(obj.num == 0){
obj.num = ul.children.length - photoCount;
ul.style.left = -photoWidth * obj.num + 'px';
}
obj.num--;
animate(ul, -photoWidth * obj.num, function(){
this.flag = true;
}.apply(vm));
}
},
// 轮播图右箭头封装【参数与左箭头相同】
rightMove(ulName, photoWidth, photoCount, obj){
var ul = document.querySelector(ulName);
// 若使用的rem布局模式,需要将 rem 转为 px【若 photoWidth 用的 px 无需转换】
// photoWidth = Math.floor( photoWidth * parseFloat( document.querySelector('html').style.fontSize ) );
// 节流阀(处理连续点击左右箭头图片过快问题)
if(this.flag){
// 关闭节流阀
this.flag = false;
if(obj.num == ul.children.length-photoCount){
ul.style.left = 0;
obj.num = 0;
}
obj.num++;
animate(ul, -photoWidth * obj.num, function(){
// 打开节流阀
this.flag = true;
}.apply(vm));
}
},
// 自动播放-封装
// rightName:右箭头类名或id名
// time:多长时间换图【1000为1秒,此处为3秒】
// obj:定时器对象
autoMove(rightName, time, obj){
var right = document.querySelector(rightName);
// 自动播放
obj.timer = setInterval(function() {
// 手动调用点击事件
right.click();
}, time)
},
// 停止自动播放轮播图
stopMove(obj){
clearInterval(obj.timer);
obj.timer = null; //清除定时器变量
},
},
// 页面加载完成后
mounted: function(){
// 克隆“产品特色”第一张图
this.clonePhoto('.cpts-lbt', 1);
// 自动播放轮播图
this.autoMove('.cpts-right', 3000, this.obj[0]);
// 设备监控【若一个页面用了两个不同的轮播图,以下为第二个】
// this.clonePhoto('.itsb-lbt', 2);
// if(this.flag){
// this.autoMove('.itsb-right', 3000, this.obj[1]);
// }
}
})
</script>