淘宝轮播图带前后按钮

最新推荐文章于 2022-10-25 19:08:25 发布

weixin_33814685

最新推荐文章于 2022-10-25 19:08:25 发布

阅读量177

点赞数

文章标签： xhtml

原文链接：https://yq.aliyun.com/articles/486490

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0 ;padding:0;}
#div1{width:520px; height:280px; position:relative; overflow:hidden;  margin:50px auto;}
#ul1{position:absolute; left:0; top:0; }
#ul1 li{float:left; list-style:none; width:520px; height:280px;}
#span1{z-index:3;position:absolute; text-align:center;}
#span1 span{display:block; width:20px; height:20px;background:blue; color:white; margin:6px;}
</style>
</head>

<body>
<div id="div1">
  <ul id="ul1">
    <li><img src="1.jpg" /></li> 
    <li><img src="2.jpg" /></li> 
    <li><img src="3.jpg" /></li> 
    <li><img src="4.jpg" /></li> 
   </ul>
   <div id="span1">
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   </div>
</div>
<span  id="prev">上张</span>
<span  id="next">下账</span>
<script>
window.onload=function(){
    var oPrev=document.getElementById('prev');
    var oNext=document.getElementById('next');
    var oUl=document.getElementById('ul1');
    var oDiv=document.getElementById('div1');
    var oSpanBox=document.getElementById('span1');
    var oSpan=oSpanBox.getElementsByTagName('span');
    var oLi=oUl.getElementsByTagName('li');
    var oP=true;
    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
    function al(){oP=!oP}
    for(var i=0; i<oLi.length;i++){
        oSpan[i].index=i;
        oSpan[i].onclick=function(){
          startMove(oUl,{'left':oLi[0].offsetWidth*this.index*-1})
        }
    }
    oPrev.onclick=function(){
        if(oUl.offsetLeft<0 && oP){
            oP=!oP;     //开关，防止连续点击错误
            startMove(oUl,{'left':oUl.offsetLeft+oLi[0].offsetWidth},al);
        }else{
           return false;    
        }
        
    }
    oNext.onclick=function(){
        if(oUl.offsetLeft>-oLi[0].offsetWidth*(oLi.length)&&oP){
            oP=!oP;
            startMove(oUl,{'left':oUl.offsetLeft-oLi[0].offsetWidth},al)
        }else{
           return false;    
        }
        
    }
}
</script>
<script src="move.js"></script>
</body>
</html>

weixin_33814685

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝轮播图带前后按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫