g改造轮播图1：https://www.cnblogs.com/huanghuali/p/8677338.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="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- <script type="text/javascript" src="js/lunbo.js"></script> -->

    <style type="text/css">

    *{

        margin: 0;

        padding: 0;

    }

    body {

        font-size: 14px;

        line-height: 1.5;

        font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun';

        color: #666;

        background-color: #fff

    }

    img {

        border: 0;

    }

    a {

        text-decoration: none;

        color: #666;

    }

    .wrapper_lb {

        position: relative;

        width: 640px;

        height: 480px;

    }

    .lb_pic_list a {

        position: absolute;  display: block;

    }

    .lb_pic_list a img {

        width: 640px;

        height: 480px;

        display: block;

    }

    .arrow_left {

        position: absolute;

        top: 50%;

        margin-top: -18px;

        left: 10px;

        background: red;

        width: 80px; height: 30px;

        color: #fff;

    }

    .arrow_right {

        position: absolute;

        top: 50%;

        margin-top: -18px;

        right: 10px;

        background: red;

         width: 80px; height: 30px;

        color: #fff;

    }

    .scoll_dot{ overflow: hidden; text-align: center; position: absolute; bottom:0; z-index: 9; }

    .scoll_dot i{ width: 16px; height: 6px; background: blue; margin:0 3px; display: inline-block; cursor: pointer;}

    .scoll_dot .active{ background-color: red }

    </style>

</head>

<body>

    <div class="wrapper_lb">

        <div class="lb_pic_list" id="scrollWrap">

            <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a30eb359a.jpg" alt="1"></a>

            <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a2bd253bd.jpg" alt="2"></a>

            <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a321a708b.jpg" alt="3"></a>

        </div>

        <div class="scoll_dot J_bannerPage"></div>

        <div class="arrow_left J_arrow">向左</div>

        <div class="arrow_right J_arrow">向右</div>

    </div>

    <script type="text/javascript">

    $(function() {

        var index = 0;

        var timer;

        //获取id为scrollWrap 所有的img

        var imgList = $('#scrollWrap .J_pic');

        //img的个数

        var imgNum = imgList.length;

        if(imgNum>1){

        //第一张图显示

        $('.J_pic').eq(0).show().siblings().hide();

        $('.J_pic').mouseover(function(){

            clearInterval(timer);  //鼠标经过停止自动播放

        });

        $('.J_pic').mouseout(function(){

            showTime(); //鼠标离开继续自动播放

        });

        //点击向左按钮

        $('.arrow_left').click(function() {

            clearInterval(timer);

            if (index == 0) {

                index = imgNum;

            }

            index--;

            showBg();

            showTime();

        });

        //点击向右按钮

        $('.arrow_right').click(function() {

            clearInterval(timer);

            if (index == imgNum - 1) {

                index = -1;

            }

            index++;

            showBg();

            showTime();

        });

        // 填充分页

        var bPage=$(".wrapper_lb").find('.J_bannerPage');

        var html='';

        for(var i=0,max=imgNum;i<max;i++){

            html+=(i==0)?'<i class="active"></i>':'<i></i>';

        }

        bPage.append(html);

        // //鼠标点击分页

        bPage.children('i').on('click',function(){

            index=$(this).index();

            showBg();

        })

        function showBg() {

            $('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);

            bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');

        }

        function showTime() {

            timer = setInterval(function() {

                index++;

                // if (index == imgNum) {

                //     index = 0;

                // }

                index=(index==imgNum)?0:index;

                showBg();

            }, 2000);

        }

        //自动播放图片

        showTime();

    }

    });

    </script>

</body>

</html>

jquery改造轮播图1的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  3. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  4. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  5. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  6. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  8. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  9. 自己随意写了个简单的依赖jquery的轮播图

    //轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...

随机推荐

  1. Redis 主从分离

    首先配置redis.conf文件如下6个位置 cp 多个redis.conf文件 开启daemonize yes PID文件名字 端口 log文件名字 dump.rdb名字 配置: 主机不动,配置从机 ...

  2. x264改变输出分辨率的算法<转>

    x264改变输出分辨率的算法 在某些应用场景下,x264的输入视频分辨率与接收端输出的视频分辨率不同.例如编码端摄像头采集到的YUV数据为1280x720,而接收端视频显示窗口为640x480.对于这 ...

  3. js动态加载数据到文本框指定的位置

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. python中os.system()的返回值

    [python中os.system()的返回值] 如果第三方程序返回的是布尔型返回值,os.system会将true转为1,false转为0进行返回. 问题: /bin/xxx.py是一个返回码为1的 ...

  5. 015年传智播客JavaEE 第168期就业班视频教程15-模块规范化

    注册功能最起码得有个用户名和密码吧. bigint相当于Java里面的Long.Long型最大的那个数字是19位,我们这里是20位,绝对够用. userName长度预留20%,让它后期可扩展.6-12 ...

  6. for 续8

    ---------siwuxie095                 一个问题分析: 在 CMD 窗口输入: dir dir /b dir /b /ah dir C:\Windows dir C:\ ...

  7. errorlevel 续1

    -------siwuxie095             常用 errorlevel 返回值:     backup 0 备份成功 1 未找到备份文件 2 文件共享冲突阻止备份完成 3 用户用 ct ...

  8. 网页截图API接口，一键自动生成网页截图

    背景 最近在开发一个小程序,其中有一个帮助模块,内容为帮助文章列表,文章内容为网站后台编辑的富文本格式.鉴于小程序的特殊性,其对html格式的富文本支持并不友好. 刚开始有人开发了wxparse插件, ...

  9. Multiply Strings大整数乘法

    ［抄题］: 以字符串的形式给定两个非负整数 num1 和 num2,返回 num1 和 num2 的乘积. [暴力解法]: 时间分析: 空间分析: ［思维问题］: 还要找到结果中第一位不等于0的数再添 ...

  10. c++中冒号（:）和双冒号（::）的用法

    1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; X ...