JQuery中的轮播图demo_jquery 轮播组件demo-程序员宅基地

技术标签: demo  

JQuery库中的插件来写轮播图,虽然其库用起来甚是方便,简介 ,提高了工作 效率。下边我就为大家提供一种JQuery的轮播图:

index.html 文件结构如下:

//一定要先引入js文件、css文件
 <div class="con_wrap">
        <div class="tit_wrap">
            <h1>JS原生轮播图</h1>
           <div class="box">
                <ul id="ul">
                    <li><img src="images/1.jpg" alt=""></li>
                    <li><img src="images/2.jpg" alt=""></li>
                    <li><img src="images/3.jpg" alt=""></li>
                    <li><img src="images/4.jpg" alt=""></li>
                </ul>
                <div class="box-arrow">
                    <span id="arr-left">&lt;</span>
                    <span id="arr-right">&gt;</span>
                </div>
                <ul class="box-circle"></ul>
            </div>
        </div>

style.css 文件如下:


body {
/*初始化样式*/
    margin: 0;
    padding: 0;
}

.box {
    /*给盒子定义样式*/
    width: 1100px;
    height: 400px;
    overflow: hidden;
    position: relative;//相对定位
}

.box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}

.box li {
    float: left;
    width: 1100px;
    height: 400px;
}

.box ul img {
    width: 100%;
    height: 100%;
    display: block;
}

.box-arrow {
    position: absolute;//绝对定位
    left: 0;
    top: 50%;
    margin-top: -35px;
    width: 100%;
    display: none;
}

.box-arrow span {
    color: white;
    font-size: 40px;
    cursor: pointer;
    display: block;
    background-color: black;
    width: 30px;
    text-align: center;
    /*禁用用户选中文本*/
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

#arr-left {
    float: left;
}

#arr-right {
    float: right;
}

.box-circle {
    position: absolute;
    bottom: 20px;
    left: 50%;
}
.box-circle li {
    width: 20px;
    height: 20px;
    text-align: center;
    position: relative;
    left: -50%;
    background-color: black;
    cursor: pointer;
    color: white;
    font-size: 12px;
    line-height: 15px;
    font-family: 'Microsoft YaHei';
    margin-right: 10px;
    border-radius: 11px;
}
.box-circle li.hover {
    background-color: orangered;
}

index.js

$(function(){
    
    //切换显示箭头
    $('.box').on('mouseover',function(){
    //鼠标覆盖时,显示箭头,关闭自动轮播
        clearInterval(timer);
        $('.box-arrow').show();
    }).on('mouseleave',function(){
    //鼠标离开时,隐藏箭头,开启自动轮播
        $('.box-arrow').hide();
        autoPlay();
    });
    //目标索引值
    var targetIndex = 0;
    //定时器句柄
    var timer=null;
    //是否执行轮播的标识
    var flag = true;
    //轮播时,操作位置的元素
    var ul = $('#ul');
    //每个图片的宽度
    var width = 0 - $('.box li:eq(0)').width();
    //复制第一个li元素,append到最后
    $('#ul').append($('#ul li:eq(0)').clone()).width(Math.abs(width)*$('#ul>li').length);
    var count = $('#ul>li').length;
    //轮播图片的方法
    function play(){
    
        if(flag){
   //标识为true时,执行轮播
            flag=false;//执行轮播前,将标识符设为false
            //计算小圆点索引
            var circleIndex = targetIndex;
            if(targetIndex>(count-2)){
                circleIndex = 0;
            }
            if(targetIndex<0){
                circleIndex = count-2;
            }
            //根据索引,修改小圆点样式
            $('.box-circle li:eq('+circleIndex+')').addClass('hover')
                .siblings().removeClass('hover');
            //使用animate方法轮播图片
            $(ul).animate({
   'left':targetIndex*width+'px'},500,function(){
    
                flag=true;//执行轮播完毕后,将标识符设为true
            });
        }
    }
    //点击向右移动
    $('#arr-right').on('click',function(){
    
        if(!flag){
   //当标识符为false时,禁止更改目标索引值和执行轮播动画
            return;
        }
        if(targetIndex+1 > count-1){
            targetIndex = 1;
            $(ul).css('left','0px');
        }else{
            targetIndex++;
        }
        play();
    });
    //点击向左移动
    $('#arr-left').on('click',function(){
    
        if(!flag){
   //当标识符为false时,禁止更改目标索引值和执行轮播动画
            return;
        }
        if(targetIndex-1 < 0){
            targetIndex = count-2;
            $(ul).css('left',(targetIndex+1)*width+'px');
        }else{
            targetIndex--;
        }
        play();
    });
    //自动轮播的方法
    function autoPlay(){
    
        timer = setInterval(function(){
    
            $('#arr-right').trigger('click');
        },2000);
    }
    //执行自动轮播
    autoPlay();
   //循环创建小圆点
    for(var i=0; i<count-1; i++){
   //因为count包含克隆的元素,所以需要count-1
        var hoverClass = '';
        if(i==0){
            hoverClass = 'hover';
        }
        $('.box-circle').append('<li class="'+hoverClass+'">'+(i+1)+'</li>');//向页面添加小圆点
    }
   //小圆点的鼠标覆盖事件
    $('.box-circle li').on('mouseover',function(){
    
        $(this).addClass('hover').siblings().removeClass('hover');//切换样式
        //索引检测,当索引在最后一张克隆图片上、覆盖到第一个小圆点的时候,直接切换回第一张
        if($(this).index()==0&&targetIndex==(count-1)){
            ul.css('left','0px');
        }
        targetIndex = $(this).index();//修改目标索引为当前鼠标覆盖小圆点的索引值
        //轮播图片
        play();
    });
});

本篇文章的内容只是我个人经验总结;分享出来,希望可以帮都大家。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/bellah521/article/details/52063435

智能推荐

linux软路由的实现_软路由实现csdn-程序员宅基地

文章浏览阅读1.1w次。一、前言一套通信协议的实现除了硬件编/解码与信号传输之外,其余的部分均可以有所选择的由软件或者硬件实现。好比最普通的RS232协议,如果你的硬件系统集成了相关模块,CPU直接从缓冲区读写数据即可,否则就要自己模拟时序,深入到协议细节里去。TCP/IP协议也一样,一般的通信芯片都会集成两层和三层的转发控制,MAC表和路由表都存在通信芯片的寄存器里,用户只要将关键信息写入寄存器即可实现转发。至于如何平衡_软路由实现csdn

Materials studio查看原子之间的距离和角度_materials studio测量距离-程序员宅基地

文章浏览阅读1.7w次,点赞2次,收藏15次。步骤:- view > toolbars > sketch :从而调出如下的工具栏:点击图中下三角打开下拉框后 选择distance点选任意2个原子 会显示二者距离(单位为埃)同样的,测量角度则选择下拉框中Angle, 之后点击任意3个原子 会显示相应的角度:..._materials studio测量距离

redhat的oracle数据库安装,Redhat安装Oracle 11G 数据库-程序员宅基地

文章浏览阅读141次。环境:Redhat 6.5 + Oracle 11G1、关闭Linux防火墙、禁用Selinux2、安装需要的RPM包yum install -y binutils compat-libcap compat-libstdc gcc gcc-c++ glibc glibc-devel libgcc libstdc libstdc++-devel libaio libaio-devel make sy..._redhat9安装oracle11g

模电摸索日记之《晶体管放大电路》_晶体管放大电路例题-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏26次。晶体管放大电路一、放大电路的组成及工作原理二、放大电路的主要性能指标1. 放大倍数2. 输入电阻3. 输出电阻4. 通频带三、晶体管放大电路分析1. 静态分析2. 动态分析3. 放大电路交流性能指标的计算4. 非线性失真分析四、工作点稳定的共发射极放大电路五、共集电极放大电路1. 共集电极放大电路的组成及其工作原理2. 静态分析3. 动态分析六、共基极放大电路1. 静态分析2. 动态分析七、三种基本放大电路性能比较一、放大电路的组成及工作原理基本共射极放大电路原理图如图所示。图中,输入信号uS,接在基_晶体管放大电路例题

vtk实战(十二)——读取.obj文件_用vtk打开obj文件-程序员宅基地

文章浏览阅读6.5k次。OBJ文件是Alias|Wavefront公司为它的一套基于工作站的3D建模和动画软件”Advanced Visualizer”开发的一种标准3D模型文件格式。 具体内容可参照: http://www.cppblog.com/lovedday/archive/2008/06/13/53153.html 本例主要用vtkOBJReader()类读取Wavefront .obj格式的文件。#inc_用vtk打开obj文件

python 将html文件转化为txt文件_python html文件转txt-程序员宅基地

文章浏览阅读5.4k次,点赞9次,收藏33次。python 将html文件转化为txt文件①需求:一千多篇乌云知识库的文章,收集下来后是html文件,需要将它们都转化为txt文件。由于本人又菜又懒,找了很久代码想要ctrl+c和ctrl+v大佬的,然后收工,然而没有找到好使的代码。下了一个转化工具,但是转化效果不太好,只好苦逼的研究一下代码了(害无非就是循环读取html文件,再进行编码转化,再保存到txt文件罢了),文件的编码格式真是博大精..._python html文件转txt

随便推点

RK3568平台 多点触摸电容屏_rk3568 触摸怎么关联显示-程序员宅基地

文章浏览阅读697次,点赞29次,收藏29次。你的支持,我的动力;祝各位前程似锦,offer不断,步步高升!!![外链图片转存中…(img-dAZRvqrW-1712307421909)][外链图片转存中…(img-qFRk4acx-1712307421910)]由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新如果你觉得这些内容对你有帮助,可以+V:Vip1104z获取!!!(备注:嵌入式)你的支持,我的动力;祝各位前程似锦,offer不断,步步高升!!!_rk3568 触摸怎么关联显示

解决:联想电脑开机壁纸图片在哪可以找到?_联想开机界面的图片在哪里-程序员宅基地

文章浏览阅读2.2w次,点赞12次,收藏10次。我的电脑每次开机后,都感觉壁纸很美,话很有道理,不由自主的很激情澎湃。下边是之前在自己电脑看到的一些:壁纸上还有一句经典的话。每次开机壁纸都图片都是新颖的没见过的,那句经典的励志话也不一样。一直很好奇想找到位置,今天终于知道这些壁纸的位置啦。C:\ProgramData\Lenovo\DeviceCenter\LockScreen\cache愿我们所有的努力都不辜负,理想都实现。..._联想开机界面的图片在哪里

spring.data.elasticsearch.cluster-nodes、cluster-name过时_弃用的配置属性 'spring.data.elasticsearch.cluster-name-程序员宅基地

文章浏览阅读1.2w次,点赞6次,收藏17次。这个在高版本中已经废弃,官方建议我们使用:High Level REST Client@Configurationpublic class ElasticsearchConfig { /** * localhost:9300 写在配置文件中就可以了 */ @Bean RestHighLevelClient elasticsearchClient() { ClientConfiguration configuration = ClientCo_弃用的配置属性 'spring.data.elasticsearch.cluster-name

Unity开发-深入理解RectTransform_unity 代码设置 recttransform rotation-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏3次。工作以后自己的时间被狠狠的压缩,回家以后有时候也不太想思考技术性问题,思考了也不一定写总结,所以呢,博客更新起来比较慢,不过最近钻研了很多问题,准备好好总结一下,陆续会把相关的内容发出来分享。。。言归正传,这篇主要说说RectTransform这个在处理UI位置,形变绕不过的组件。 新手在制作UI界面的时候经常会有这样疑惑? 为什么ui设置了相对位置以后ins面板上的..._unity 代码设置 recttransform rotation

显示器常用接口-程序员宅基地

文章浏览阅读81次。VGA接口也可以称其为“模拟信号接口”,在数字技术没有普及之前,大多数液晶显示器的接口都是VGA接口,该接口的规格为“15针D-Sub”,分为“R\G\B\H\V”五个分量,但对普通用来说,没必要了解这个,只要记住它是“模拟信号接口”的一种即可,算是最早的一种显示器接口,。VGA输出和传递的是模拟信号。大家都知道计算机显卡产生的是数字信号,显示器运用的也是数字信号。所以运用VGA的视频接口相当于是经历了一个数模转换和一次模数转换,信号有损失。

基本算法之枚举:199.鸡兔同笼_枚举法鸡兔同笼-程序员宅基地

文章浏览阅读1.2k次。枚举所有可能_枚举法鸡兔同笼

推荐文章

热门文章

相关标签