jquery实现左右轮播切换效果

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jquery实现左右轮播切换效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码，供大家参考，具体内容如下

html:

<Meta charset="UTF-8"> Document

<script src="js/jquery.min.js">
<script src="js/banner.js">

css：

li{float:left;width:960px;} #banner ul.banner-img img{ width:960px; height:384px; } #banner a.ck-slide{ position:absolute; top:150px; width:35px; height:70px; border-radius:3px; background:#000; opacity:0.15; transition:all .3s linear; } #banner a.ck-left{ left:40px; background: #000 url(../img/index/arrow-left.png) no-repeat center center; } #banner a.ck-right{ right:0px; background:#000 url(../img/index/arrow-right.png) no-repeat center center; } #banner a.ck-slide:hover{ opacity:0.3; } #banner ul.indicators{ position:absolute; bottom:10px; left:50%; margin-left:-34px; list-style: none; } #banner ul.indicators li{ width:12px; height:12px; background:#fff; border-radius:50%; float:left; margin-right:5px; transition:all .2s linear; } #banner ul.indicators li:hover,#banner ul.indicators li.hover{ cursor:pointer; background-color:#0AA1ED; }

js：

{ $.ajax({ type:"get",url:"PHP/xz.PHP",dataType:"json" }).then(data=>{ console.log(data); var html=""; const LIWIDTH=960; for(var item of data){ html+=`
    • `; } html+=`
    • `; console.log(html); var $ulImg=$(".banner-img"); $ulImg.html(html).css("width",LIWIDTH*(data.length+1));

    var $ids=$(".indicators");

    $ids.html("

  • ".repeat(data.length)).children().first().addClass("hover");

    const WAIT=2000,DURA=1000;
    var moved=0,timer=null;
    function move(dir=1){
    moved+=dir;
    console.log("moved="+moved);

    $ulImg.animate({
    left:-LIWIDTH*moved
    },DURA,()=>{
    if(moved%data.length==0){
    moved=0;
    $ulImg.css("left",0);
    }
    $ids.children(li:eq(${moved})).addClass("hover").siblings().removeClass("hover");
    })
    }

    var timer=setInterval(move,WAIT);

    $('#banner').hover(
    ()=>{ //这个是什么？
    clearInterval(timer),timer=null;
    },()=>{
    timer=setInterval(move,WAIT);
    }
    );

    $("[data-move=right]").click(()=>{
    //防止动画叠加
    /clearInterval(timer);
    timer=null;
    move();
    timer=setInterval(move,WAIT);    /
    if(!$ulImg.is(":animated"))
    move();
    });

    $("[data-move=left]").click(()=>{
    if(!$ulImg.is(":animated")){
    if(moved==0){
    $ulImg.css("left",-LIWIDTH*data.length);
    moved=data.length;
    }
    move(-1);
    }
    });

    $ids.on("mouSEOver","li",function(){
    var $li=$(this);
    var i=$li.index();
    moved=i;
    $ulImg.stop(true).animate({
    left:-LIWIDTH*moved
    },()=>{
    $ids.children(":eq("+i+")")
    .addClass("hover")
    .siblings().removeClass("hover");
    })
    });
    })
    })

    PHP：

    PHP;"> header("Content-type:application/json");
    require_once("init.php");

    $sql="SELECT img,title,href FROM xz_index_carousel";
    $result=mysqli_query($conn,$sql);
    echo json_encode(mysqli_fetch_all($result,1));
    ?>

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

    原文链接：https://www.f2er.com/jquery/34403.html
    jquery实现左右轮播jquery左右轮播切换jquery轮播切换

    猜你在找的jQuery相关文章

    《锋利的jQuery》笔记：插件的使用和写法
    jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
    jQuery插件开发入门
    扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
    jquery.roundabout.js实现3D图片层叠旋转木马切换
    最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
    jQuery效果之jQuery实现图片的依次加载图片
    css代码： js代码：
    jQuery之deferred对象详解
    一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
    jQuery插件开发进阶
    jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
    jQuery 实现邮箱输入自动提示功能：（一）
    记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
    jQuery插件之上传文件ajaxfileupload.js源码与使用
    在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
    jQuery效果之封装一个文章图片弹出放大效果
    首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
    《从零开始学习jQuery》：用jQuery操作元素的属性与样式
    元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作