2018-10-25
轮播的实现
看了网上很多轮播实现的例子，自己简单理了理。
整体思路是，写一个盒子设置成一张轮播图的高度和宽度，设置overflow属性值为hidden，即溢出部分直接屏蔽掉
把图片设置成一定的高度和宽度，利用float属性将图片并排在一排，通过移动该大盒子，完成图片的切换。
如图所示，
html主体部分：
<div class="box">/*这是最外面的边框*/
<div id="pai">/*移动的实际上是这个*/
<ul>
<li><img src="img/1367482836394.jpg" alt=""/></li>
<li><img src="img/1370512282166.jpg" alt=""/></li>
<li><img src="img/1373337078811.jpg" alt=""/></li>
<li><img src="img/20131227141118_VPjfy.jpeg" alt=""/></li>
<li><img src="img/1367482836394.jpg" alt=""/></li>
</ul>
<div class="square">/*右下角的数字小圆点*/
<span class="current">1</span>/*current来设置样式*/
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="zuoyou">/*这两个是控制图片左右切换的两个手动点击按钮*/
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
CSS部分：
*{
margin:0;
padding:0;
}/*全选择器，把margin，padding置为零*/
img{
width:490px ;
height: 327px;
}/*把图片宽高设置与pai（即装图片的盒子）一致，以免溢出的部分被遮住*/
.box{
width: 490px;
height: 327px;
padding: 5px;
border: 1px solid #cccccc;
margin: 200px auto;
}/*设置最外层边框的样式*/
#pai {
width: 490px;
height: 327px;
position: relative;
overflow: hidden;/*溢出处理，直接隐藏*/
}
ul{
list-style: none;/*把前面的小点点去掉*/
width: 500%;
position: absolute;
left:0px;
}
li{
float: left;/*将图片并排*/
}
.square {
position: absolute;
bottom: 10px;
right: 10px;
}
span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fff;
text-align: center;
margin: 3px;
border: 1px solid #ccc;
line-height: 16px;
border-radius: 8px;
cursor: pointer;
}
.current {
background-color: darkorange;
color: #fff;
}/*切换时的样式*/
.box #pai img{
width: 490px;
}
.zuoyou{
width: 490px;
height: 80px;
position: absolute;
top: 150px;
left:0;
color: #1bb52b;
display: none;/*未移入是隐藏*/
}
.zuoyou #left{
width: 40px;
height: 30px;
text-align: center;
float:left;
font: 30px/30px "simsun";/*字号 行高 字体*/
border-radius: 10px;
background-color: rgba(0,0,0,0.8);
}
.zuoyou #right{
width: 40px;
height: 30px;
text-align: center;
float:right;
font: 30px/30px "simsun";
border-radius: 10px;
background-color: rgba(0,0,0,0.8);
}
JS部分：
window.onload=function () {
var pai =document.getElementById("pai");
var ul=pai.children[0];/*获取无序表*/
var spanArr=pai.children[1].children;/*获取右下角的数标，这是一个类数组*/
var imgWidth=pai.offsetWidth;/*获取图的可见宽度*/
var zuoyou=pai.children[2];/*获取控制左右的大标签*/
var Left =zuoyou.children[0];/*左*/
var Right =zuoyou.children[1];/*右*/
var spanIndex= 0;
var imgIndex=0;
var timer1=setInterval(autoPlay,3000);
function autoPlay() {
spanIndex++;
if(spanIndex>spanArr.length-1){
spanIndex=0;
}/*当自动播放时，到最后一个时，又重新开始*/
for(var i=0;i<spanArr.length;i++){
spanArr[i].className="";
}
spanArr[spanIndex].className="current";/*该点的样式为current*/
imgIndex++;
if(imgIndex>spanArr.length){
ul.style.left= 0;
imgIndex = 1;
}
animate(ul,-imgWidth*imgIndex);
}
pai.onmouseover =function () { /*鼠标放在pai上清除大的定时器*/
clearInterval(timer1);
zuoyou.style.display="block";
}
pai.onmouseout =function () { /*鼠标移开pai 加上定时器*/
timer1=setInterval(autoPlay,1000);
zuoyou.style.display="none";
}
for(var i=0;i<spanArr.length;i++){
spanArr[i].index=i;
spanArr[i].onmouseover=function () {
clearInterval(timer1);
for(var j=0;j<spanArr.length;j++){
spanArr[j].className="";
}
this.className="current";
spanIndex = imgIndex= this.index;
animate(ul,-imgWidth*this.index);
}
}
Left.onclick =function () {
spanIndex--;
for(var i=0;i<spanArr.length;i++){
spanArr[i].className="";
}
if(spanIndex<0){
spanIndex=spanArr.length-1;
}
spanArr[spanIndex].className="current";
imgIndex--;
if(imgIndex<0){
/*先移动到最后一张，然后imgindex的值取之前一张的索引值，然后在向前移动*/
ul.style.left = -imgWidth*(spanArr.length)+"px";
imgIndex = spanArr.length-1;
}
animate(ul,-imgIndex*imgWidth);
}
Right.onclick =function () {
autoPlay();
}
/*动画*/
function animate(ele,target) {
clearInterval(ele.timer);/*清除定时器*/
var step=target>ele.offsetLeft?10:-10;
ele.timer=setInterval(function () {
ele.style.left=ele.offsetLeft+step+"px";
var delta=target-ele.offsetLeft;
if(Math.abs(delta)<=Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer);
}
},10)
}
}
