search

lcgyh / myDocs

0 stars 0 forks source link

图片逐个自动显示 #35

Open lcgyh opened 6 years ago

lcgyh commented 5 years ago

图片逐个自动顺序显示 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
        .carousel{width: 780px;margin: 0 auto;}
        .carousel .item{width: 220px;float: left;margin:0 20px;background: pink;}
        .carousel .item img{width: 100%;opacity: 0;}
        .carousel .item img:hover{opacity: 1;}
        .carousel .on img{opacity: 1;}
    </style>
</head>
<body>
  <ul class="clearfix carousel" id="j_carousel">
    <li class="item"><img src="http://i1.hexunimg.cn/2014-08-15/167580248.jpg" alt=""></li>
    <li class="item"><img src="http://r06.uzaicdn.com/temaihuiimages/20161012/4509688d886f48e1be47b63c9ef505c4.jpg?imageView2/2/w/280/h/210" alt=""></li>
    <li class="item"><img src="http://r05.uzaicdn.com/temaihuiimages/p2923/48b153e54354461e8aa5c4b214600f9e.png?imageView2/2/w/280/h/210" alt=""></li>
  </ul>
</body>
<script>
    $(function(){
    function axGallery(){
       var items=$('#j_carousel .item');
       var iLen=items.length;
       var i=0; 
setInterval(function(){
    if(i>=iLen){
        i=0;
    }
    items.removeClass('on').eq(i).addClass('on');
    i++;
},2000);
}
 axGallery();
})

</script>
</html>
lcgyh commented 5 years ago

图片逐个自动随机显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
        .carousel{width: 780px;margin: 0 auto;}
        .carousel .item{width: 220px;float: left;margin:0 20px;background: pink;}
        .carousel .item img{width: 100%;opacity: 0;}
        .carousel .item img:hover{opacity: 1;}
        .carousel .on img{opacity: 1;}
    </style>
</head>
<body>
  <ul class="clearfix carousel" id="j_carousel">
    <li class="item"><img src="http://r06.uzaicdn.com/temaihuiimages/20161012/4509688d886f48e1be47b63c9ef505c4.jpg?imageView2/2/w/280/h/210" alt=""></li>
    <li class="item"><img src="http://r05.uzaicdn.com/temaihuiimages/p2923/48b153e54354461e8aa5c4b214600f9e.png?imageView2/2/w/280/h/210" alt=""></li>
    <li class="item"><img src="http://i1.hexunimg.cn/2014-08-15/167580248.jpg" alt=""></li>
  </ul>
</body>
<script>
    $(function(){
    function axGallery(){
       var items=$('#j_carousel .item');
       var iLen=items.length;
       var i=0; 
setInterval(function(){
    i=parseInt(Math.random()*iLen,10);
    items.removeClass('on').eq(i).addClass('on');
},1000);
}
 axGallery();
})

</script>
</html>