zoukankan      html  css  js  c++  java
  • 比较好的一个轮播图 (带有两边箭头的)

    /* 案例banner左右切换效果*/
    var $box=$(".img_box1");
    // var timer;
    $(".next_right").click(function(){
    // clearInterval(timer);
    $box.animate({marginLeft:'-1499px'},500,function () {
    $(".img_box1>div").eq(0).appendTo($box);// 往左移一次下次就要看到第三个
    $box.css({marginLeft:"0px"})
    })
    }) ;
    $(".next_left").click(function () {
    clearInterval(timer);
    $box.css({marginLeft:"-1499px"});//往右移一次 之后下一次就要看到第三个
    $(".img_box1>div").eq(2).prependTo($box);
    $box.animate({marginLeft:'0px'},500)
    });


    var Timer=function(){
    timer=setTimeout(function(){
    $box.animate({marginLeft:'-1499px'},500,function () {
    $(".img_box1>div").eq(0).appendTo($box);// 往左移一次下次就要看到第三个
    $box.css({marginLeft:"0px"})
    })
    Timer();
    },3000)
    }
    Timer();
    $(".banner").hover(function(){
    clearTimeout(timer);
    },function(){
    Timer();
    })

    html部分
    <div class="banner">
    <div class="img_box1">
    <div>
    <img src="../images/case-banner.jpg" alt="" class="img1">
    </div>
    <div>
    <img src="../images/case-banner-2.jpg" alt="" class="img2">
    </div>

    <div>
    <img src="../images/case-banner-3.jpg" alt="" class="img3">
    </div>

    </div>
    <div class="next_left"></div>
    <div class="next_right"></div>
    </div>

    css部分
    .banner{
    100%;
    /* height: 586px;*/
    height: 620px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    }

    .clear{
    clear: both;
    }
    .img_box1{
    4497px;
    height: 100%;

    display: flex;
    }
    .img_box1>div{
    100%;
    height: 100%;
    flex-shrink: 1;
    }
    .img_box1 img{
    100%;
    float: left;

    }
    .next_right,.next_left{
    30px;
    height: 40px;
    opacity: 0.5!important;
    z-index: 111111;
    position: absolute;
    -webkit-transition: all 0.3s ease ;
    -moz-transition: all 0.3s ease ;
    -ms-transition: all 0.3s ease ;
    -o-transition: all 0.3s ease ;
    transition: all 0.3s ease ;
    background: url("../images/next-highlight.png") no-repeat;
    }
    .next_left{
    top: 49%;
    left: 10%;
    background-position: center left;
    }
    .next_right{
    top: 49%;
    right: 10%;
    background-position: center right ;
    }
    .next_left:hover,.next_right:hover{
    opacity: 1!important;

    }
  • 相关阅读:
    pandas基本操作
    MySQL数据库(五)使用pymysql对数据库进行增删改查
    MySQL数据库(四)多表查询
    MySQL数据库(三)索引总结
    MySQL数据库(二)-数据库的增删改查
    MySQL数据库(一)
    Linux 解压/压缩xxx.zip格式(unZip Zip的安装和使用)
    关系型数据库和非关系型数据库的对比
    进程、线程、协程的区别
    python迭代器与生成器详解
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6946641.html
Copyright © 2011-2022 走看看