• 通过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);
        }
    
    
    
    
    
    
    });
  • 相关阅读:
    cassandra安装
    002 spring boot框架,引入mybatis-generator插件,自动生成Mapper和Entity
    033 SSM综合练习09--数据后台管理系统--基于AOP的日志处理
    032 SSM综合练习08--数据后台管理系统--jsp页面显示当前用户名
    031 SSM综合练习07--数据后台管理系统--用户详情查询
    030 SSM综合练习06--数据后台管理系统--SSM权限操作及Spring Security入门
    029 SSM综合练习05--数据后台管理系统--订单分页查询
    027 SSM综合练习03--数据后台管理系统--product-list.jsp和main.jsp页面制作
    Idea 目录结构下有红色波浪线
    virtualbox上,android x86 的分辨率的设置
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/7526200.html
Copyright © 2020-2023  润新知