纯JS实现轮播图特效——详解
程序员文章站
2022-07-02 21:21:24
CSS部分 布局效果图： JS部分 ......
<div id="slider">
<div id="sliderimgs">
<img src="img/mi04.jpg" width="1000px"/>
<img src="img/mi01.jpg" width="1000px" title="oneimg"/>
<img src="img/mi02.jpg" width="1000px" title="twoimg"/>
<img src="img/mi03.jpg" width="1000px" title="threeimg"/>
<img src="img/mi04.jpg" width="1000px" title="fourimg"/>
<img src="img/mi01.jpg" width="1000px"/>
<!--因为要做无缝滚动，所以要克隆第一张和最后一张，放到最后一张后面和最前面-->
</div>
<div id="buttons">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div>
<span id="prev"><</span>
<span id="next">></span>
</div>
</div>
css部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*禁止html元素别被鼠标选中,必须要写不然会有bug,--start*/
*{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
/*禁止html元素别被鼠标选中--end*/
#slider{
width: 1000px; /*设置为图片宽度*/
height: 376px; /*设置为图片高度*/
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
position: relative;
/*border: 2px solid palegreen;*/
}
#sliderimgs{
width: 600%; /*几张图片就是 6*100% */
position: absolute; /*必须设置绝对定位，才能使用left属性*/
left: -1000px; /*把第一张假图偏移出去*/
/*border: 1px solid blue;*/
}
#sliderimgs img{
float: left;
}
#buttons{
width: 70px;
position: absolute;
z-index: 1; /*设置图片堆叠属性，仅限于定位的元素使用。默认值为0，值越大，优先级越高*/
bottom: 10px;
left: 45%;
background-color: rgba(255,255,255,0.4);
padding-top: 4px;
padding-bottom: 4px;
border-radius: 9px; /*高度一半 = 8px + 10px (li的height) */
/*border: 2px solid red;*/
}
#buttons ul{
list-style-type: none;
}
#buttons ul li{
float: left;
margin-left: 6px;
width: 10px;
height: 10px;
line-height: 10px;
border-radius: 100%;
background-color: #ffffff;
}
#buttons ul li:hover{
cursor: pointer; /*手型光标*/
background-color:#ff5000;
}
#buttons .active{
background-color: #ff5000;
}
#next , #prev{
position: absolute;
z-index: 1;
top: 43%;
color: rgba(255,255,255,.9);
font-family: "微软雅黑";
font-size: 25px;
text-align: center;
display: block;
width: 40px ;
height: 40px;
line-height: 40px;
border-radius: 100%;
background-color: rgba(0,0,0,.4);
transition: width 0.3s ,height 0.3s ,line-height 0.3s ,border-radius 0.3s, text-align 0.3s ,ease 0.3s ;
}
#prev{
left: 5%;
}
#next{
right: 5%;
}
#next:hover{
cursor: pointer; /*手型光标*/
width: 44px;
height: 44px;
line-height: 44px;
border-radius:100%;
text-align: center;
}
#prev:hover{
cursor: pointer; /*手型光标*/
width: 44px;
height: 44px;
line-height: 44px;
border-radius:100% ;
text-align: center;
}
</style>
布局效果图：
js部分
<script type="text/javascript">
var doc = document;
var sliderid = doc.getelementbyid('slider');
var sliderimgsid = doc.getelementbyid('sliderimgs');
var imgs = sliderimgsid.getelementsbytagname('img');
var btnli = doc.getelementbyid('buttons').getelementsbytagname('li');
var btnprev = doc.getelementbyid('prev');
var btnnext = doc.getelementbyid('next');
var imgslength = imgs.length-2; //减去2个假图
var btnlilength = btnli.length;
var imgwidth = sliderid.clientwidth; //获取图片宽度
var imganimatetimer = null; //图片animate定时器
var aotuplaytimer = null; //自动播放定时器
var index = 0; //当前图片默认为第一张
var speed = 0; //动画速度,这个数必须是能被图片宽度500整除的。正负表示偏移方向
/*非常重要*/
var isanimate = false; //图片是否在动画状态。若在动画状态，此时动画没结束， 则不执行下一个动画。
sliderimgsid.style.left = -imgwidth+"px"; //初始化为第一张真图
btnprev.onclick = function(){
if(isanimate == false){ //图片不在动画状态才执行
imganimate(imgwidth);
index--;
if(index<0){
index = imgslength-1;
}
selectbtn();
}
}
btnnext.onclick = function(){
if(isanimate == false){
imganimate(-imgwidth);
index++;
if(index>imgslength-1){
index = 0;
}
selectbtn();
}
}
for(var i = 0 ; i<btnlilength;i++){
btnli[i].index = i;
btnli[i].onclick = function(){
var totargetimgoffset = (index - this.index)*imgwidth; //负数sliderimgsid向左偏转，反之，向右
if(totargetimgoffset == 0){return;}
if(isanimate == false){
imganimate(totargetimgoffset); //方法的参数是局部参数
index = this.index;
selectbtn();
}
}
}
function selectbtn(){
for(var i = 0; i < btnlilength; i++){
if(btnli[i].classname == "active"){
btnli[i].classname = "";
break;
}
}
btnli[index].classname = 'active';
}
/*动画函数*/
function imganimate(offset){
var newleft = parseint(sliderimgsid.style.left) + offset; //sliderimgsid.style.left永远获取都是当前图片偏移量
var alltime = 400; //完成offset偏移量，总共所用时间。offset路程一定，时间越短，速度越快。此时间必须小于autoplay间隔时间，否则，图片运动还没结束，imganimate()再次被调用
var interval = 20; //定时器的间隔时间，值越小越好，因为越大，动画越卡
var speed = offset/(alltime/interval); //speed正负由offset决定
isanimate = true; //图片动画开始
clearinterval(imganimatetimer);
imganimatetimer = setinterval(function(){
sliderimgsid.style.left = parseint(sliderimgsid.style.left)+speed +"px";
/* 第一种情况：当speed<0时,(即图片向左运动时)
* 如果当前图片left值 , left只会越来越小 , 当小于等于newleft , 则停止图片运动
* 第二种情况：当speed>0时,(即图片向右运动时)
* 如果当前图片的left , left只会越来越大 , 大于等于newleft , 则停止图片运动
* */
if( speed<0 && parseint(sliderimgsid.style.left)<= newleft || speed>0 && parseint(sliderimgsid.style.left) >= newleft){
clearinterval(imganimatetimer); //到达指定newleft位置停止动画
isanimate = false; //动画执行结束
/*重新定位-- 让图片无限循环 --start*/
if(newleft > -imgwidth){
sliderimgsid.style.left = -imgslength*imgwidth +"px" ;
return;
}
if(newleft < -imgslength*imgwidth){
sliderimgsid.style.left = -imgwidth +"px" ;
return;
}
sliderimgsid.style.left = newleft+"px";
/*重新定位-- 让图片无限循环 --end*/
/*图片运动结束后。清除上一次定时器时间*/
window.onload();
}
},interval);
}
window.onload = function(){
if(isanimate==false){
clearinterval(aotuplaytimer);
aotuplaytimer = setinterval(function(){
btnnext.onclick();
},5000); //图片每格5s移动一次
}
}
/*鼠标移入sliderid事件*/
sliderimgsid.onmouseover = function(){
clearinterval(aotuplaytimer);
}
/*鼠标移出sliderid事件*/
sliderimgsid.onmouseout =function(){
window.onload();
}
</script>