• 【jQuery】--图片轮播


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link type="text/css" rel="stylesheet"  href="style.css">
        <script src="jquery-2.1.4.min.js"></script>
        <script>
            //手动轮播效果
            $(function () {
                var size=$(".img li").size();

           //根据图片数量,动态添加,<li>标签个数,无需再下文手动添加
    for (var i=1;i<=size;i++){ var li="<li>"+i+"</li>" $(".num").append(li); } $(".num li").eq(0).show(); //eq根据索引选择 $(".num li").mouseover(function () { $(this).addClass("active").siblings().removeClass("active"); //当前标签加上active效果,其他兄弟标签取消active效果 var index=$(this).index(); i = index; $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t= setInterval(move,1500) function move() { i++; if(i==size){ i=0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }; function moveL() { i--; if (i==-1){ i = size-1; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".out").hover(function () { clearInterval(t); }),function () { t=setInterval(move,1500); }; $(".out .right").click(function () { move() }); $(".out .left").click(function () { moveL() }); }); </script> </head> <body> <div class="out"> <ul class="img"> <li><a href="#"><img src="images/001.jpg" alt=""></a></li> <li><a href="#"><img src="images/002.jpg" alt=""></a></li> <li><a href="#"><img src="images/003.jpg" alt=""></a></li> <li><a href="#"><img src="images/004.jpg" alt=""></a></li> <li><a href="#"><img src="images/005.jpg" alt=""></a></li> </ul> <ul class="num"> <!--<li class="active">1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--<li>4</li>--> <!--<li>5</li>--> </ul> <div class="left btn"><</div> <div class="right btn">></div> </div> </body> </html>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    
    .out{
        width: 730px;
        height: 454px;
        /*border: 8px solid mediumvioletred;*/
        margin: 50px auto;
        position: relative;
    }
    
    .out .img li{
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .out .num{
        position: absolute;
        left:0;
        bottom: 20px;
        text-align: center;
        font-size: 0;
        width: 50%;
    }
    
    
    .out .btn{
        position: absolute;
        top:50%;
        margin-top: -30px;
        width: 30px;
        height: 60px;
        background-color: aliceblue;
        color: black;
        text-align: center;
        line-height: 60px;
        font-size: 40px;
        display: none;
    
    
    
    
    
    }
    
    .out .num li{
        width: 20px;
        height: 20px;
        background-color: grey;
        color: #fff;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        display: inline;
        font-size: 18px;
        margin: 0 10px;
        cursor: pointer;
    }
    .out .num li.active{
        background-color: red;
    }
    
    
    .out .left{
        left: 0;
    }
    .out .right{
        right: 0;
    }
    
    .out:hover .btn{
        display: block;
    }
    style
    人生短短数十载,经不起几次重头再来
  • 相关阅读:
    JDBC
    MySQL 事务
    MySQL 处理海量数据时一些优化查询速度方法
    MySQL 分支和循环结构
    MySQL 分页查询和存储过程
    Oracle PL/SQL异常、存储过程和触发器
    Oracle PL/SQL游标
    mysql主键问题
    spring-springmvc code-based
    AOP实现原理
  • 原文地址:https://www.cnblogs.com/bk770466199/p/6076936.html
Copyright © 2020-2023  润新知