zoukankan      html  css  js  c++  java
  • 通过jq实现的轮播图

    html代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/lunbo.js"></script>
    </head>
    
    <body>
        <div class="wrapper_lb">
            <div class="lb_pic_list" id="J_lb_pic">
                <div class="lb_pic_box">
                    <a href="javascript:;"><img src="images/01.jpg"></a>
                </div>
                <div class="lb_pic_box">
                    <a href="javascript:;"><img src="images/02.jpg"></a>
                </div>
                <div class="lb_pic_box">
                    <a href="javascript:;"><img src="images/03.jpg"></a>
                </div>
                <div class="lb_pic_box">
                    <a href="javascript:;"><img src="images/04.jpg"></a>
                </div>
                <div class="lb_pic_box">
                    <a href="javascript:;"><img src="images/05.jpg"></a>
                </div>
                
            </div>
           
                <div class="arrow_left J_arrow">
                    <img src="images/arrowl.png" style=" 20px;height: 35px;cursor: pointer;">
                </div>
                <div class="arrow_right J_arrow">
                    <img src="images/arrowr.png" style=" 20px;height: 35px; cursor: pointer;">
                </div>
           
            <ul class="tabs">
                <li class="tab bg">1</li>
                <li class="tab">2</li>
                <li class="tab">3</li>
                <li class="tab">4</li>
                <li class="tab">5</li>
                
            </ul>
        </div>
    </body>
    
    </html>

    css样式

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, 
    strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
    tfoot, thead, tr, th, td ,textarea { margin:0; padding:0;  }
    body {font-size: 14px; line-height: 1.5; font-family:'Microsoft Yahei','arial','tahoma','simsun';  color: #666; background-color: #fff }
    table { border-collapse:collapse; border-spacing:0; }
    em, i { font-style: normal }
    h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; }
    textarea,button,img,input{border:0;}
    a { text-decoration: none; color: #666; }
    ul, ol { list-style: none;}
    :focus{ outline:none;}
    
    .wrapper_lb{position: relative; 640px;height: 480px;}
    .lb_pic_list .lb_pic_box{position: absolute;}
    .lb_pic_list .lb_pic_box a{display: block;}
    .lb_pic_list .lb_pic_box a img{ 640px;height: 480px;display: block;}
    .arrow_left{position: absolute; top:50%;margin-top: -18px; left: 10px;}
    .arrow_right{position: absolute; top:50%;margin-top: -18px;right: 10px;}
    .tabs{overflow: hidden;position: absolute;left: 50%;bottom: 10px;}
    .tabs .tab{ 20px;height: 20px;line-height: 20px;color: #fff; border-radius: 50%;background-color: #5388e3;
        float:left;text-align: center;margin: 0 5px;font-size: 12px;cursor: pointer;}
    .tabs .bg{background-color: #f00;}
    .lb_arrow{display:none;}

    js

    $(function() {
        var i = 0;
        var timer;
        //获取id为J_lb_pic 所有的img的数组
        var imgList = $('#J_lb_pic .lb_pic_box a img');
        //获取id为J_lb_pic 所有的img的个数
        var imgNum = imgList.length;
        $('.lb_pic_box').eq(0).show().siblings().hide();
        //自动播放图片
        showTime();
    
        $('.tab').hover(function() {
            //鼠标放在小圆点处触发
            i = $(this).index();
            showBg();
            clearInterval(timer);//清除轮播
        }, function(){
            //鼠标离开小圆点处触发
            showTime();
        })
    
        //点击向左按钮
        $('.arrow_left').click(function(){
            clearInterval(timer);
            if (i == 0) {
                i = imgNum;
            }
    
            i--;
            showBg();
            showTime();
        });
    
    
        //点击向右按钮
        $('.arrow_right').click(function(){
            clearInterval(timer);
            if (i == imgNum-1) {
                i = -1;
            }
    
            i++;
            showBg();
            showTime();
        });
    
        $('.wrapper_lb').hover(function(){
            $('.J_arrow').show();
        },function(){
            $('.J_arrow').hide();
        });
        //获取ul(.tab)的宽度
        var ulWidth = $('.tabs').width();
        //动态设置ul(.tab)的css样式
           $('.tabs').css({ulWidth,marginLeft:-(ulWidth/2)});
    
        function showBg() {
            $('.lb_pic_box').eq(i).fadeIn(300).siblings().fadeOut(300);
            $('.tab').eq(i).addClass('bg').siblings().removeClass('bg');
        }
    
    
        function showTime() {
            timer = setInterval(function() {
                i++;
                if (i == imgNum) {
                    i = 0;
                }
                showBg();
            }, 2000);
        }
    
    
    
    
    
    
    });
  • 相关阅读:
    nginx利用image_filter动态生成缩略图
    uva 624 CD 01背包打印路径
    【剑指Offer学习】【全部面试题汇总】
    POJ2096-Collecting Bugs(概率DP)
    配置struts tags 输出HTML
    合并基因表达水平(merge gene expression levels, FPKM)
    设置MySQL自动增长从某个指定的数开始
    列联表(Crosstabs)
    mysql 实现行号的方法——如何获取当前记录所在行号
    shell 标出输入、标准输出、错误输出
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/7526200.html
Copyright © 2011-2022 走看看