轮播图样片
如今，在许多网页的头部，常常存在使用js代码实现的图片轮播的功能，尤其是在电商类的网站上，用户需要在有限的时间里，体验尽可能多的商品，这就需要轮播图技术。顾名思义，轮播图就是实现图片的轮换播放的效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。实现该技术的前端手段有很多，例如，我前几天才学的Vue，几乎被遗忘的jQuery，还有屹立不倒的react和bootstrap等。我什么手段也不用，就用原生态的JavaScript代码进行编辑。哦呜。。。我今天脑子是瓦特了，废话不多说，直接上代码。
首先是前端的html代码：
<!--设置一个div，作为外部大的容器-->
<div id="carouselWrap">
<!--ul用来储存图片-->
<ul id="imgList">
<li><img src="img/企鹅.JPG" /></li>
<li><img src="img/八仙花.jpg" /></li>
<li><img src="img/水母.JPG" /></li>
<li><img src="img/沙漠.jpg" /></li>
<li><img src="img/灯塔.JPG" /></li>
<li><img src="img/考拉.JPG" /></li>
<li><img src="img/菊花.JPG" /></li>
<li><img src="img/郁金香.JPG" /></li>
</ul>
<!--该div用来设计右下角导航按钮-->
<div id="naDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<!--设置左右按键-->
<a class="arrow arrow-left" href="javascript:;"><</a>
<a class="arrow arrow-right" href="javascript:;">></a>
</div>容器CSS样式的代码：
总体页面的设计，一般每个网页都有类似的设置
*{
margin: 0;
padding: 0;
}
轮播图总体的容器
#carouselWrap{
width: 1044px;
height: 450px;
margin: 50px auto;
background-color: darkgray;
padding: 10px 0;
position: relative;
overflow: hidden;
}
存放图片的容器
#imgList{
list-style: none;
position: absolute;
}
#imgList li{
float: left;
margin: 0 10px;
}
右下角导航按钮
#naDiv{
position: absolute;
bottom: 20px;
right: 20px;
}
#naDiv a{
float: left;
width: 15px;
height: 15px;
background-color: aquamarine;
opacity: 0.5;
margin: 0 5px;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
#naDiv a:hover{
background-color: darkgray;
}
左滑和右滑按钮
.arrow{
z-index: 10;
position: absolute;
width: 30px;
height: 50px;
text-align: center;
line-height: 50px;
top: 50%;
margin-top: -25px;
text-decoration: none;
color: #333;
font-family: '宋体';
font-size: 30px;
background: rgba(0,0,0,.2);
font-weight: 600;
}
.arrow:hover{
background-color: darkgray;
}
.arrow-left{
left: 10px;
}
.arrow-right{
right: 10px;
}
脚本文件JavaScript代码：
开头格式
//如果需要详细解释为什么要这样开头，我回去总结一下，下次再发出来
window.onload = function(){
}
动态设置imgList的宽度
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = 1440*imgArr.length + "px";
设置默认页面的个链接的背景颜色
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.backgroundColor = "darkgray";
const boxWidth = 1044;
timer = null;
左滑动，设置点击事件
allA[8].onclick = function(e){
e = e||event;
e.preventDefault();
var currentValue = document.getElementById("imgList").style.left;
currentValueInt = parseInt(currentValue);
index = currentValueInt/-boxWidth - 1;
if (imgList.style.left === '') {
imgList.style.left = 0;
} else{
if (currentValueInt === 0) {
index = 0;
imgList.style.left = 0;
setA();
} else{
setA();
imgList.style.left = currentValueInt + boxWidth + "px";
}
}
};
右箭头，设置点击事件
allA[9].onclick = function(e){
e = e||event;
e.preventDefault();
var currentValue = document.getElementById("imgList").style.left;
currentValueInt = parseInt(currentValue);
index = currentValueInt/-boxWidth + 1;
if (imgList.style.left === '') {
imgList.style.left = -boxWidth + "px";
index = 1;
setA();
} else{
if (currentValueInt === -boxWidth*7) {
index = 7;
imgList.style.right = 0;
setA();
} else{
setA();
imgList.style.left = currentValueInt - boxWidth + "px";
}
}
};
为右下方所有按钮绑定单机响应函数
for (var i=0; i
//为右下角按钮添加一个属性值,方便下面作为索引
allA[i].num = i;
allA[i].onclick = function(){
index = this.num;
setA();
imgList.style.left = -boxWidth*index + "px";
};
}
自动轮播
interval();
鼠标移入，暂停轮播
carouselWrap.onmouseover = function(){
clearInterval(timer);
};
鼠标移除，开始轮播
carouselWrap.onmouseout = function(){
interval();
};
设计指示器样式函数
function setA(){
//遍历所有的a，将其的背景颜色设置为aquamarine
for (var i=0; i
allA[i].style.backgroundColor = "";
}
//将选中的a设置为darkgray
allA[index].style.backgroundColor = "darkgray";
};
设计自动轮播函数
function interval(){
timer = setInterval(function(){
var currentValue = document.getElementById("imgList").style.left;
currentValueInt = parseInt(currentValue);
index = currentValueInt/-boxWidth + 1;
if (imgList.style.left === '') {
imgList.style.left = -boxWidth + "px";
index = 1;
setA();
} else if(imgList.style.left === -boxWidth*7 + "px"){
imgList.style.left = 0;
index = 0;
setA();
}else{
if (currentValueInt === -boxWidth*7) {
index = 7;
imgList.style.right = 0;
setA();
} else{
setA();
imgList.style.left = currentValueInt - boxWidth + "px";
}
}
},1500)
};
到这里，基本上算是结束了，图片我就不传了，自己放入喜欢的图片不是更好。如果不想复制代码可以直接上我的GitHub(https://github.com/ET-WY/lime.station)去下载，下次我会更新用前端框架写的轮播图。再见！
724vmy
