zoukankan      html  css  js  c++  java
  • jQuery无缝滚动轮播图

    //html部分
    <div class="lunbo right">
    <div class="show">
    <a href="#"><img src="images/cbda425ea72ec5013b8388ae982e9a52.jpg" alt=""/></a>
    <a href="#"><img src="images/5fe7763e7458e23e6ebeaa682e25a472.jpg" alt=""/></a>
    <a href="#"><img src="images/9e5d942d12063976efcfff0c6c0d1f52.jpg" alt=""/></a>
    <a href="#"><img src="images/45a94c6843a097d5984cabbf2489e41f.jpg" alt=""/></a>
    <a href="#"><img src="images/748072bc51445e5c2c1f0a2184e95142.jpg" alt=""/></a>
    <a href="#"><img src="images/230289326a4063dee5e4b7d0cb5c4c81.jpg" alt=""/></a>
    <a href="#"><img src="images/f2c22e6ec669000ba5765971005b53aa.jpg" alt=""/></a>
    <a href="#"><img src="images/d139797b6e1ecd8185f0f7ca771cf9be.jpg" alt=""/></a>
    </div>
    <div class="point">
    <span>1</span><span>2</span><span>3</span><span>4</span>
    <span>5</span><span>6</span><span>7</span><span>8</span>
    </div>
    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>
    </div>

    //css部分
    .banner{ 100%;height: 480px;}
    .banner1{ 1200px;height: 100%;margin: 0 auto;}
    .lunbo{ 1000px;height: 100%;position: relative;overflow: hidden;}
    .show{ 10000px;height: 100%;position: absolute;top: 0;left: 0;}
    .show a{float: left;}
    .point{position: absolute;left: 400px;bottom: 10px;}
    .point span{float: left; 25px;height: 25px;margin:0 5px;cursor: pointer; border-radius: 100%;color: #fff;text-align: center;line-height: 25px; background: #555;opacity: 0.8;filter: alpha(opacity=80);}
    .point .on{ padding: 0px; line-height: 1.5; color: rgb(0, 0, 128);">#ff6a00;}
    .btn { 40px;height: 70px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 128);">#808080;opacity: 0.7; filter:alpha(opacity=70); position:absolute;top:50%;margin-top:-35px;cursor:pointer;text-align:center;line-height:70px;font-size:60px;color:#fff;font-family:simsun;display:none;
    }
    .btn_l { left:0;}
    .btn_r { right:260px;}
    .lunbo:hover .btn {display:block;}

    //js部分
    function lunbo(oshow,olunbo,opoint,obtl,obtr,oleft) {
    var i = 0;
    var clone = $("a",oshow).first() .clone();//克隆第一张图片
    $(oshow).append(clone);//复制到列表最后
    var size = $("a",oshow).size();
    $("span",opoint).first().addClass("on");
    /*自动轮播*/
    var t = setInterval(function () { i++; move();},3000);
    /*鼠标悬停事件*/
    $(olunbo).hover(function () {
    clearInterval(t);//鼠标悬停时清除定时器
    }, function () {
    t = setInterval(function () { i++; move(); }, 3000); //鼠标移出时清除定时器
    });
    /*鼠标滑入圆点事件*/
    $("span",opoint).hover(function () {
    var index = $(this).index();//获取当前索引值
    i = index;
    $(oshow).stop().animate({ left: -index * oleft }, 500);
    $(this).addClass("on").siblings().removeClass("on");
    });
    /*左右按钮*/
    $(obtl).click(function () {i++;move();});
    $(obtr).click(function () {i--;move();});
    /*滚动事件*/
    function move() {
    if (i == size) {
    $(oshow).css({ left: 0 });
    i = 1;
    }
    if (i == -1) {
    $(oshow).css({ left: -(size - 1) * oleft });
    i = size - 2;
    }
    $(oshow).stop().animate({ left: -i * oleft }, 500);
    if (i == size - 1) {
    $("span",opoint).eq(0).addClass("on").siblings().removeClass("on");
    } else {
    $("span",opoint).eq(i).addClass("on").siblings().removeClass("on");
    }
    }
    }
    lunbo(".show",".lunbo",".point",".btn_l",".btn_r",1000);
     
    
    
     
  • 相关阅读:
    【题解】[湖南集训]谈笑风生
    【题解】[POI2011]ROT-Tree Rotations
    【题解】[ZJOI2019]语言
    【题解】[HEOI2012]采花
    【题解】[JSOI2009]计数问题
    【题解】[USACO17JAN]Promotion Counting P
    heketi简单安装配置使用
    kubernetes api
    skywalking简单安装配置使用
    《技术的正宗与野路子》
  • 原文地址:https://www.cnblogs.com/lele123/p/5979860.html
Copyright © 2011-2022 走看看