jquery优化轮播图2

时间：2022-01-16 16:41:34

继续优化

<!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;

    }

    .public_scroll {

        position: relative;

        min-width: 1100px;

        max-width: 100%;

        height: 793px; overflow: hidden;

    }

    .public_s_list{ overflow: hidden;}

    .public_s_list a {

        position: absolute;  display: block;

        width: 100%;

    }

    .public_s_list a img {

        width: 100%;

        display: block;

    }

    .public_s_dot{ overflow: hidden; text-align: center; position: absolute; bottom:25px; z-index: 2; width: 100%; }

    .public_s_dot i{ width: 10px; height: 10px; background-color: #fff; margin:0 8px; display: inline-block; cursor: pointer; border-radius: 50%;}

    .public_s_dot .active{ background-color: #808080 }

    </style>

</head>

<body>

    <div class="public_scroll" id="publicScroll">

        <div class="public_s_list">

            <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201810/1540853894181026841.jpg" alt="1"></a>

            <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201805/1525203825936416255.jpg" alt="2"></a>

            <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201712/1513641621162167882.jpg" alt="3"></a>

        </div>

        <div class="public_s_dot" id="publicDot"></div>

    </div>

    <script type="text/javascript">

    $(function() {

        var index = 0;

        var timer;

        //获取id为publicScroll 所有的img

        var imgList = $('#publicScroll .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(); //鼠标离开继续自动播放

            });

            // 填充分页

            var bPage=$('#publicDot');

            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;

                    }

                    showBg();

                }, 4000);

            }

            //自动播放图片

            showTime();

        }

    });

    </script>

</body>

</html>

jquery优化轮播图2的更多相关文章

  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改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  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. 我对XCode Objective-c Cocoa的简单理解

    我对XCode Objective-c Cocoa的简单理解 Xcode Xcode说的通俗一点就是开发OS X 和 iOS 应用程序的. 如果我们想要认真点说 ,Xcode 是运行在操作系统Mac ...

  2. 【阿里云产品公测】Opensearch使用体验和评测

    作者:阿里云用户outofmemory 昨天晚上收到了阿里云发的邮件,Open search可以申请公测了,于是迫不及待申请了测试,审核人员很高效,过了不到俩小时给批下来了.  很开心,于是趁今天是周 ...

  3. lintcode ：Segmemt Tree Build II

    题目 Segmemt Tree Build II The structure of Segment Tree is a binary tree which each node has two attr ...

  4. &lpar;9&sol;18&rpar;重学Standford&lowbar;iOS7开发&lowbar;动画、自动布局&lowbar;课程笔记

    最近开始实习,没多少时间更新了=_= 第九课: 1.上节课demo:Dropit完整实现 https://github.com/NSLogMeng/Stanford_iOS7_Study/commit ...

  5. Express 配置 https &sol; 443 安全链接

    按照教程已配置成功 前一部分内容参照     https://blog.csdn.net/chenyufeng1991/article/details/60340006 前半部分是生成证书文件,关键部 ...

  6. 浏览器解析JavaScript的原理

    JavaScript的特点一般都知道的就是解释执行,逐行执行,就是从上到下依次执行. JavaScript的执行之前,其实还是有一些操作的,只是没有表现出来 JavaScript的执行过程: 1.语法 ...

  7. &lbrack;置顶&rsqb; 获取网络数据中的数组显示成ListView的简单流程

    首先说一下  这是我自己的个人笔记,如果想看看,不用看细节,可以看流程. 定义一个线程池 ExecutorService pool = Executors.newFixedThreadPool(15) ...

  8. 文档 - STOMP Over WebSocket

    http://jmesnil.net/stomp-websocket/doc/ What is STOMP? STOMP is a simple text-orientated messaging p ...

  9. 解题：CEOI 2017 Mousetrap

    题外话: 这是制杖yd的交流题目 题面 首先把捕鼠夹所在的点提出来当根,然后这变成了一棵有根树,我们先来看耗子移动的影响 可以发现耗子往下走就回不来了,而且最后还会被困在一个叶子上,那么这个时候我们把 ...

  10. 如何在 ASP&period;NET 应用程序中实现模拟用户身份（在ASP&period;NET中以管理员身份运行网站）

    前言 在实际的项目开发中,我们可能会需要调用一些非托管程序,而有些非托管程序需要有更高的身份权限才能正确执行.本文介绍了如何让IIS承载的ASP.NET网站以特定的账户执行,比如Administrat ...

相关文章