箭头函数及两种轮播方式

Posted 2023-03-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了箭头函数及两种轮播方式相关的知识，希望对你有一定的参考价值。

参考技术A <script>

/* 普通函数 */

/* function fn()

return 123

let a = fn();

console.log(a); */

/* function fn(str)

let msg = str + 'hello'

return msg

let a = fn('张三丰') */

/* =>箭头函数后面只有一段表达式代表 return 返回 */

/* let fn = () => 123;

let a = fn();

console.log(a); */

/* 箭头函数只有一个参数()可以省略不写 */

/* 普通函数可以作为构造函数,箭头函数不能作为构造函数不然会报错 */

let fn = (str) =>

let msg = str +'hello'

return msg

let a = fn('张无忌')

console.log(a);

/* 普通函数this谁调用就是谁的,箭头函数没有自己的this,箭头函数的this是上下文环境的this */

/* let obj1 =

name:"张三",

fn:function()

console.log(this)

let obj2 =

name:"李四",

*/

/* 普通函数的this可以被call 或apply修改 */

/* obj1.fn.call(obj2) */

/* 一个参数都没有箭头不能省略 */

let obj1 =

name:"张三",

fn:()=>

/* 目前的环境下的this是window */

console.log(this);

let obj2 =

name:"李四",

obj1.fn()/* this指向window 当前上下文环境

箭头函数的this不会被call 或者apply 修改 */

obj1.fn.call(obj2)

</script>

https://v3.bootcss.com/javascript/#carousel

<style>

#lunbo

width: 600px;

height: 400px;

margin:30px auto;

</style>

</head>

<body>

<h1>首页</h1>

<div id="lunbo">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">



<ol class="carousel-indicators">



</ol>



<div class="carousel-inner" role="listbox">



</div>



<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

<div style="text-align: center;">

<button onclick="prevFn()">向前</button>

<button onclick="nextFn()">向后</button>

<button onclick="pauseFn()">暂停</button>

<button onclick="goDuo()">跳转19岁女大学生失联</button>

<button onclick="leftR()">从左到右</button>

</div>

<script src="./jquery-1.12.4.js"></script>

<script src="./bootstrap.min.js"></script>

<script>

$('.carousel').carousel(

interval: 2000

)

function prevFn()

$('.carousel').carousel('prev')

function nextFn()

$('.carousel').carousel('next')

function pauseFn()

$('.carousel').carousel('pause')

function goDuo()

$('.carousel').carousel(1)

function leftR()

$('.carousel').carousel('cycle')

$.ajax(

url:"https:调用接口//也可以直接在原文复添加图片地址",

method:"post",

data:

page:1,

count:5

,

success:res=>

let result = res

let str1 = '';

let str2 = '';

result.forEach((item,index)=>

str1 +=`

<li data-target="#carousel-example-generic" data-slide-to="$index"></li>

`

str2 += `

<div class="item ">

<a href="$item.path">

<img style="width: 600px;height: 400px;" src="$item.image">

<div class="carousel-caption">$item.title</div>

</div>

`

)

$('.carousel-indicators').html(str1)

$('.carousel-inner').html(str2)

$('.carousel-inner .item:first').addClass('active')

)

</script>

https://www.swiper.com.cn/usage/index.html

<link rel="stylesheet" href="./swiper-bundle.min.css">

<style>

.swiper

width: 600px;

height: 300px;

.swiper-slide img

width: 600px;

height: 300px;

display: block;

</style>

</head>

<body>

<div class="swiper">

<div class="swiper-wrapper">

<div class="swiper-slide">

<img src="https://img0.baidu.com/it/u=3519534124,1254775703&fm=253&fmt=auto&app=138&f=JPG?w=889&h=500" alt="">

</div>

<div class="swiper-slide">

<img src="https://img1.baidu.com/it/u=1037786612,1020382020&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">

</div>

<div class="swiper-slide">

<img src="https://img0.baidu.com/it/u=3288667263,3070739640&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">

</div>

</div>



<div class="swiper-pagination"></div>



<div class="swiper-button-prev"></div>

<div class="swiper-button-next"></div>





</div>

<script src="./swiper-bundle.min.js"></script>

<script src="./jquery-1.12.4.js"></script>

<script>

/* Swiper('对应的类名') */

var mySwiper = new Swiper('.swiper',

// direction: 'vertical', // 垂直切换选项

loop: true, // 循环模式选项

// 如果需要分页器

pagination:

el: '.swiper-pagination',

,

/* 切换反转效果 */

effect: 'cube',

/* 自动播放效果 */

autoplay:

delay: 1000, //1秒切换一次

,

// 如果需要前进后退按钮

navigation:

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

,

// 如果需要滚动条

// scrollbar:

// el: '.swiper-scrollbar',

// ,

)

</script>

</body>

jQuery的几种轮播

我们在开发当中经常用到轮播。我在这里总结了一下几种，仅供参考：

第一种：

　　1、jQuery：用display ：none/block控制的一种轮播；

// CSS部分
#igs {
    margin: 30px auto;
    width: 1200px;
    height: 460px;
    position: relative;
}
         
.ig {
    position: absolute;
}
         
#tabs {
    position: absolute;
    list-style: none;
    background-color: rgba(255,255,255,.5);
    left: 500px;
    bottom: 10px;
    border-radius: 10px;
    padding: 5px 0 5px 5px;
}
         
.tab{
    float: left;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    overflow: hidden;
    margin-right: 4px;
    border-radius: 100%;
    background-color: rgb(200,100,150);
}
        
.tab.active{
    background-color: red;
    color: #fff;
}

.btn{
    position: absolute;
    top: 200px;
    width: 40px;
    color: #fff;
    height: 100px;
    background-color: rgba(255,255,255,.3);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    margin: 0 5px;
}
         
.btn2{
    position: absolute;
    right: 0px;
}
         
.btn:hover{
    background-color: rgba(0,0,0,.7);
}

// HTML部分
        <div id="igs">
              <a class="ig" href="#">1<img src="images/slider-1.jpg"/></a>
              <a class="ig" href="#">2<img src="images/slider-2.jpg"/></a>
              <a class="ig" href="#">3<img src="images/slider-3.jpg"/></a>
              <a class="ig" href="#">4<img src="images/slider-4.jpg"/></a>
              <a class="ig" href="#">5<img src="images/slider-5.jpg"/></a>
              <div class="btn btn1"><</div>
              <div class="btn btn2">></div>
              <ul id="tabs">
                  <li class="tab active">1</li>
                  <li class="tab">2</li>
                  <li class="tab">3</li>
                  <li class="tab">4</li>
                  <li class="tab">5</li>
              </ul>
        </div>

// JavaScript部分
            //定义全局变量和定时器
            var i = 0 ;
            var timer;
             
            $(function(){
                  //用jquery方法设置第一张图片显示，其余隐藏
                  $(‘.ig‘).eq(0).show().siblings(‘.ig‘).hide();
                   
                  //调用showTime()函数（轮播函数）
                  showTime();
               
                  //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
                  $(‘.tab‘).hover(function(){
                      //首先清除时间函数
                    clearInterval(timer);
                    //获取当前i的值，调用轮播函数
                    i = $(this).index();
                    Show();
                  },function(){
                       //鼠标离开时开启时间函数
                    showTime();
                  });
               
                //鼠标点击左侧的箭头
                $(‘.btn1‘).click(function(){
                    clearInterval(timer);
                    if(i == 0){
                        //注意此时i的值
                          i = 5;
                    }
                    i--;
                    Show();
                    showTime();
                });
               
                //鼠标点击右侧的箭头
                $(‘.btn2‘).click(function(){
                    clearInterval(timer);
                    if(i == 4){
                        //当图片是最后一张时，点击右箭头，
                          i = -1;
                    }
                    i++;
                    Show();
                    showTime();
                });
            });
             
             
            //创建一个showTime函数
            function showTime(){
                  //设置定时器
                  timer = setInterval(function(){
                    //调用一个Show()函数
                    Show();
                    i++;
                    //当图片是最后一张的后面时，设置图片为第一张
                    if(i == 5){
                          i = 0;
                    }
                  },2000);
            }
             
            //创建一个Show函数
            function Show(){
                  //在这里可以用其他jquery的动画
                  $(‘.ig‘).eq(i).fadeIn(300).siblings(‘.ig‘).fadeOut(300);
               
                  //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
                  $(‘.tab‘).eq(i).addClass(‘active‘).siblings(‘.tab‘).removeClass(‘active‘);
            }

。

以上是关于箭头函数及两种轮播方式的主要内容，如果未能解决你的问题，请参考以下文章

如何用jquery实现焦点图上下轮播（仅仅用图片不要缩略图），带上下箭头？

箭头函数

箭头函数 -------JavaScript

箭头函数

箭头函数与普通函数的区别