jquery无缝轮播图

最新推荐文章于 2022-04-10 11:17:55 发布

xyphf_和派孔明

最新推荐文章于 2022-04-10 11:17:55 发布

阅读量801

点赞数

分类专栏：常用特效文章标签： jquery 无缝轮播图

常用特效专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery轮播图</title>
<script src="./jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//兼容各种浏览器
$(function(){
    var ul = $("#mark");
    var li = $("#mark .card");
    var scroll = $(".scroll");
    var prev = $(".prev");
    var next = $(".next");
    //启动无缝轮播
    wufenglunbo(ul,li,scroll,prev,next);
    //封装无缝轮播
    function wufenglunbo(ul,li,scroll,prev,next){
        var w=li.width()-0+10;
        var l=0;
        var timer=null;
        var len=li.length*2;
        ul.append(ul.html()).css({'width':len*w,'left':-len/2*w});
        timer=setInterval(init,1000);   
        function init(){
            next.trigger('click'); 
        }
        scroll.hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(init,1000);
        });
        prev.click(function(){
            l=parseInt(ul.css("left"))+w;  //这里要转成整数，因为后面带了px单位
            showCurrent(l); 
        });
        next.click(function(){
            l=parseInt(ul.css("left"))-w;  //这里要转成整数，因为后面带了px单位
            showCurrent(l);
        });
        function showCurrent(l){
            if(ul.is(':animated')){
                return;
            }
            ul.animate({"left":l},300,function(){
                if(l==0){
                    ul.css('left',(-len/2)*w);
                }else if(l==(1+(len/2))*-w){
                    ul.css('left',-w);
                }
            });       
        }
    }
    //js over
}); 

</script>

<style type="text/css">
.scroll{margin:0 auto; width:630px; height:210px;  position:relative; overflow:hidden;}
.scroll #mark{list-style-type:none; padding:0; margin:0; position:absolute; top:0;left:0; width:99999px; height:210px; }
.scroll .card{float:left; width:200px; height:210px; background: pink; margin-left:10px;}
.prev{position:absolute; left:-2px; top:84px; }
.next{position:absolute; right:-2px; top:84px;}
</style>

</head>

<body>
<div style="width:1000px;margin:50px auto;">
<div class="scroll">
  <ul id="mark">
    <li class="card">1</li>
    <li class="card">2</li>
    <li class="card">3</li>
    <li class="card">4</li>
  </ul>
  <a href="javascript:;" class="prev"><img src="./arrow-prev.png" border="0"></a> 
  <a href="javascript:;" class="next"><img src="./arrow-next.png" border="0"></a>
</div></div>
</body></html>

xyphf_和派孔明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery无缝轮播图

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery轮播图</title><script src="./jquery-1.8.0.min.js" type="text/javascript"></script><script typ
复制链接

扫一扫