手机版网页js图片滑动

左右滑动切换图片，不规则图片也能显示完整，自适应手机屏幕大小。类似蘑菇街等网站里商品详细页里的图片滑动功能。... 左右滑动切换图片，不规则图片也能显示完整，自适应手机屏幕大小。类似蘑菇街等网站里商品详细页里的图片滑动功能。展开

 我来答

你的回答被采纳后将获得：
系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏30（财富值+成长值）

1个回答

#热议# 空调使用不当可能引发哪些疾病？

Star_流浪
2015-10-17 · 超过22用户采纳过TA的回答

知道答主

回答量：143

采纳率：0%

帮助的人：63.2万

我也去答题访问个人页

关注

展开全部

<style>    
*{ margin:0; padding:0; list-style:none;}    
#box{ width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ float:left; width:534px; height:300px;}    
#box ul li img{ height:300px;}    
#box a{ transition:.2s all ease;}    
#box .prev,#box .next{position:absolute;  top:50%; z-index:2; height:80px; line-height:80px; background:rgba(0,0,0,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:-none;}    
#box .prev{ left:0;}    
#box .next{ right:0;}    
#box a:hover{ background:rgba(255,0,0,0.4);}    
#box ol{ position:absolute; width:120px; left:50%; margin-left:-60px; bottom:10px;}    
#box ol li{ width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:50%;}    
#box ol li.active{ background:#fff;}    
</style>    
<script>    
window.onload=function(){    
    var oBox=document.getElementById('box');    
    var oPrev=document.getElementById('prev');    
    var oNext=document.getElementById('next');    
    var oUl=oBox.getElementsByTagName('ul')[0];    
    var aLi=oUl.children;    
    var oOl=oBox.getElementsByTagName('ol')[0];    
    var aBtn=oOl.children;    
    var timer = null;    
    var iNow=0;    
    var left=0;    
         
    //复制一份内容    
    oUl.innerHTML+=oUl.innerHTML;    
    oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
         
    var W=oUl.offsetWidth/2;    
         
    //选项卡    
    for(var i=0; i<aBtn.length; i++){    
        (function(index){    
            aBtn[i].onclick=function(){    
                if(iNow%aBtn.length==aBtn.length-1 && index==0){    
                    iNow++;
     
                }    
                if(iNow%aBtn.length==0 && index==aBtn.length-1){    
                    iNow--;
     
                }    
                iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;    
                tab();    
            }    
        })(i);    
    }    
             
    function tab(){    
        for(var i=0; i<aBtn.length; i++){    
            aBtn[i].className='';    
        }    
        if(iNow<0){    
            aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';    
        }else{    
            aBtn[iNow%aBtn.length].className='active'; 
     
        }    
        //oUl.style.left=-iNow*aLi[i].offsetWidth+'px';    
        move(oUl,-iNow*aLi[i].offsetWidth);
     
    }    
         
    //next    
    oNext.onclick=function(){    
        iNow++;    
        tab();    
        //document.title=iNow;    
    };    
    oPrev.onclick=function(){    
        iNow--;    
        tab();    
             
        //document.title=iNow;    
    };    
         
    oNext.onmouseleave = oPrev.onmouseleave = function(){    
        timer = setInterval(function(){    
            tab();    
            iNow++;    
        },2000);    
    };    
    oNext.onmouseenter = oPrev.onmouseenter = function(){    
        clearInterval(timer);    
    };    
         
    oNext.onclick();    
    clearInterval(timer);    
    timer = setInterval(oNext.onclick,2000);    
         
    function move(obj,iTarget){    
        var count=Math.round(500/30);    
        var start=left;    
        var dis=iTarget-start;    
        var n=0;    
        clearInterval(obj.timer);    
             
        obj.timer=setInterval(function(){    
            n++;    
                 
            var a=1-n/count;    
            left=start+dis*(1-Math.pow(a,3));    
                 
            if(left<0){    
                obj.style.left=left%W+'px';
     
            }else{    
                obj.style.left=(left%W-W)%W+'px';  
     
            }    
                 
            if(n==count){    
                clearInterval(obj.timer);  
     
            }    
        },30);    
    }    
};    
</script>    
</head>    
<body>    
<div id="box">    
    <a href="javascript:;" class="prev" id="prev">prev</a>    
   <a href="javascript:;" class="next" id="next">next</a>    
    <ul>    
     <li><img src="img/0.jpg"></li>    
     <li><img src="img/1.jpg"></li>    
     <li><img src="img/2.jpg"></li>    
     <li><img src="img/3.jpg"></li>    
     <li><img src="img/4.jpg"></li>    
   </ul>    
   <ol>    
     <li class="active">0</li>    
       <li>1</li>    
       <li>2</li>    
       <li>3</li>    
       <li>4</li>    
   </ol>    
</div>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

手机版网页js图片滑动

其他类似问题

为你推荐：