zoukankan      html  css  js  c++  java
  • jquery轮播事件效果

    今天闲着有时间把轮播事件重新写了一下,发现以前用的很多插件大多支持度不算太友好,很多小问题

    自己写了一个,不好地方请指教

    先建立文件,css,js,图片,引入jquery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/demo.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>

    </head>
    <body>
    <div id="dlunbo">
    <ul id="pics">
    <li><a href=""><img src="image/a1.jpg" alt=""></a></li>
    <li><a href=""><img src="image/a2.jpg" alt=""></a></li>
    <li><a href=""><img src="image/a3.jpg" alt=""></a></li>
    <li><a href=""><img src="image/a4.jpg" alt=""></a></li>
    <li><a href=""><img src="image/a5.jpg" alt=""></a></li>
    <li><a href=""><img src="image/a6.jpg" alt=""></a></li>
    </ul>
    <!-- 底部数字 -->
    <div id="tags">
    <ul></ul>
    </div>
    <!-- 左右按钮点击 -->
    <div class="btn btn1"><</div>
    <div class="btn btn2">></div>
    </div>
    <script src="js/demo.js"></script>
    </body>
    </html>

    /*********************************/

    以下是css

    * {
    padding: 0px;
    margin: 0px;
    }

    #dlunbo{
    position: relative;
    height: 700px;
    }

    #pics{
    position: relative;
    height: 700px;
    }
    #pics li{
    position: absolute;
    }
    #pics li img{
    100%;
    height: 700px;
    }
    #tags {
    position: absolute;
    bottom: 0;
    100%;
    text-align: center;
    }
    .tag {
    display: inline-block;
    30px;
    height: 30px;
    background-color: #37d7d2;
    color: #fff;
    line-height: 30px;
    margin: 0px 5px;
    border-radius: 100%;
    cursor: pointer;
    }
    .btn {
    34px;
    height: 66px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 50%;
    margin-top: -33px;
    color: #fff;
    font-size: 40px;
    text-align: center;
    line-height: 66px;
    cursor: pointer;
    }
    .btn1 {
    left: 0px;
    }
    .btn2 {
    right: 0px;
    }
    .bg {
    background-color:#f00;
    }

    /*********************************/

    以下是js部分

    var i = 0;
    var timer = null;
    var numaa=$('#pics li').length;
    $(function () {
    $("#pics li").eq(0).show().siblings().hide();
    A();
    c();

    //底部数字切换
    $(".tag").hover(function () {
    i = $(".tag").index($(this));
    Show();
    clearInterval(timer);
    }, function () {
    A();
    Show();
    });

    //左点击切换
    $(".btn1").click(function () {
    clearInterval(timer);
    i--;
    if (i == -1) {
    i = numaa-1;
    }
    Show();
    A();
    });
    //右点击切换
    $(".btn2").click(function () {
    clearInterval(timer);
    i++;
    if (i == numaa) {
    i = 0;
    }
    Show();
    A();
    });
    });

    function Show() {
    $("#pics li").eq(i).stop(true,true).fadeIn(300).siblings().fadeOut(300);
    $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
    }

    //循环轮播的数字并追加
    function c(){
    for (var i = 1; i <= numaa; i++) {
    if(i===1){
    var div = $("<li class='tag bg'>" + i + "</li>");
    }else{
    var div = $("<li class='tag'>" + i + "</li>");
    }
    $("#tags ul").append(div);
    }
    }

    function A() {
    timer = setInterval(function () {
    i++;
    if (i == numaa) {
    i = 0;
    }
    Show();
    }, 4000);
    }

    效果图

  • 相关阅读:
    JavaScript中的this相关
    Git进阶操作_1
    Git基本操作_5
    Git基本操作_4
    Git基本操作_3
    Git基本操作_2
    利用Python发送SMTP邮件
    Python JWT使用
    Python中的Asyncio 异步编程
    Python中的抽象类和接口类
  • 原文地址:https://www.cnblogs.com/li-sir/p/7344152.html
Copyright © 2011-2022 走看看