jquery实现图片无缝轮播显示（个人随笔）

最新推荐文章于 2023-01-05 10:55:29 发布

bboyjoe

最新推荐文章于 2023-01-05 10:55:29 发布

阅读量3k

点赞数

分类专栏： jQuery 文章标签： javascript jquery

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片无缝轮播显示</title>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <style>
        .box,.box2{
            width:800px;
            height:260px;
            margin:160px auto;
            overflow:hidden;
            position:relative;}
        .box,.box2 p{
            text-align:center;}
        .picBox,.picBox2{
            margin:0px;
            padding:0px;
            list-style:none;
            width:1500px;}
        /*此处很关键，在实现无疑轮播时这个宽度一定要比显示图片数量+1的宽度宽*/
        .picBox:hover,.picBox2:hover{
            cursor:pointer;}
        .picBox li,.picBox2 li{
            float:left;}
        .picBox img,.picBox2 img{
            width:200px;
            height:240px;}
    </style>
</head>
<body>
<div class="box">
    <p>第一种图片轮播：非无缝轮播</p>
    <ul class="picBox">
        <li><img src="images/ab1.jpg"/></li>
        <li><img src="images/ab2.jpg"/></li>
        <li><img src="images/ab3.jpg"/></li>
        <li><img src="images/ab4.jpg"/></li>
        <li><img src="images/ab5.jpg"/></li>
    </ul>
</div>
<div class="box2">
    <p>第二种图片轮播：无缝轮播</p>
    <ul class="picBox2">
        <li><img src="images/ab1.jpg"/></li>
        <li><img src="images/ab2.jpg"/></li>
        <li><img src="images/ab3.jpg"/></li>
        <li><img src="images/ab4.jpg"/></li>
        <li><img src="images/ab5.jpg"/></li>
    </ul>
</div>
<script>
    $(function(){
        <!--第一种图片轮播：非无缝轮播-->
        function rollOne(){
            $(".picBox li:first").animate({left:"-=200px"},"linear",function(){
                $(this).remove().clone(true).appendTo(".picBox").fadeIn("slow");
            });
        }
        var startRollOne=setInterval(rollOne,2000);
        <!--鼠标移入停止移出继续-->
        $(".box").hover(function(){
            clearInterval(startRollOne);
        },function(){
            startRollOne=setInterval(rollOne,2000);
        });
        <!--第二种图片轮播：无缝轮播-->
        <!--这种无缝轮播可以通过设置animate动画播放速度值和setInterval中的函数调用时间间隔实现间隔无缝轮播-->
        function rollTwo(){
            $(".picBox2").animate({marginLeft:"-200px"},2000,"linear",function(){
                $(".picBox2").css({marginLeft:"0px"});
                $(".picBox2 li:first").remove().clone(true).appendTo(".picBox2");
            })
        }
        var startRollTwo=setInterval(rollTwo,2000);
        <!--鼠标移入停止移出继续-->
        $(".picBox2").hover(function(){
            clearInterval(startRollTwo);
        },function(){
            startRollTwo=setInterval(rollTwo,2000);
        });
    });
</script>
</body>
</html>

原文地址：

http://www.cnblogs.com/Farris/p/4463734.html?utm_source=tuicool&utm_medium=referral

bboyjoe

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片无缝轮播显示（个人随笔）

图片无缝轮播显示 .box,.box2{ width:800px; height:260px; margin:160px auto; overflow:hidden; position:relative;} .box,.box2
复制链接

扫一扫

专栏目录