jq轮播原理及实现

深碍√TFBOYSˉ_ 2022-05-14 01:09 174阅读 0赞

直接开始，HTML CSS部分没备注，JS有

HTML部分

<div style="overflow: hidden;position: relative;left: 0;top: 0;height: 450px;width: 100%">
        <div id="slider">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

css部分

#slider {
        width: 300%;
        height: 450px;
        position: absolute;
        overflow: hidden;
      }
      #slider > div:nth-child(1) {
        #sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/allline2.jpg');
      }
      #slider > div:nth-child(2) {
        #sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/html1.jpg');
      }
      #slider > div:nth-child(3) {
        #sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/yizhanshi1.jpg');
      }

JS部分

var speed = 15;    //设置图片切换速度
        var page = 1;      //轮播图片
        var allPage = $('#slider').children('div').length;   //获取轮播图片数
        var clientWidth = $(window).width();      //获取浏览器显示宽度
        function Mixin() {                      //所有方法封装方便调用
            this.play = function (){              //总开关
                setInterval(function () {           //2秒换一张图
                    run.autoPlay();
                }, 2000)
            };
            this.animate = function (val) {
                clearInterval(play);              //先清除动画
                if(val ==0){                          //回到第一张图
                    $('#slider').css({'left': 0 + 'px'})
                }else {
                    var move = (val -1) * -clientWidth;     //运动轨迹开始值
                    var end = val * -clientWidth;           //运动轨迹结束值
                    var play = setInterval(function () {    //这给setInterval定义了个名字，好随时停止它
                        move = move -speed                  //动画移动速度
                        $('#slider').css({'left': move || 0 + 'px'})     //开始移动
                        if (move < end) {                                 //当移动值超过结束值 停止动画
                            clearInterval(play);
                        }
                    }, 5)
                }
            }
            this.autoPlay = function () {
                if(page >=allPage){                 //超过总图数回到第一张图
                    page =0;
                }
                this.animate(page);                //插图图几，开始动画
                page ++;
            };
        };
        var createslider = function () {            //这样写可以不写'new'来调用构造函数，传值也方便
            return new Mixin();
        };
        var run = createslider();                  //把函数赋值给RUN才能成功调用play,因为createslider指向本身，
                                                    // 而run的constructor指向mixin这个方法，可以用run.__proto__检测
        run.play();
        console.log(run.__proto__)

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq轮播图2

天续着上一期的来给大家讲另外一种方法的轮播图这种方法可以实现无缝轮播，原理就是我们在自己预先想要设置轮播的那一组照片后边，用jq语言在另外加上一组相同的照片，相...

柔情只为你懂/ 2024年04月18日 15:05/ 0 赞/ 57 阅读

相关轮播图的多种实现及原理

【写在前面】最近，在自己的项目中遇到了很多轮播图。当然，这里的很多，并非数量多，指的是种类很多，即多种实现。然后我觉得有不少小技巧，就决定写一篇文章讲解一下。

￡神魔★判官ぃ/ 2022年12月31日 06:22/ 0 赞/ 133 阅读

相关 jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片） [https://juejin.im/post/6844903799115497479][https_juejin.im_

桃扇骨/ 2022年12月17日 01:28/ 0 赞/ 233 阅读

相关图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

0.最终效果预览 ![366e374e108d][] 鼠标未触及区域时(自动滚动中) ![366e374e108d][] 鼠标触及区域后 (停止滚动，显示按钮) 基本

叁歲伎倆/ 2022年10月05日 10:57/ 0 赞/ 310 阅读

相关 jq实现图片轮播:圆形焦点+左右控制+自动轮播

来源：[http://www.ido321.com/862.html][http_www.ido321.com_862.html] html代码： 1: <!

我就是我/ 2022年08月12日 21:00/ 0 赞/ 242 阅读

相关 jq轮播原理及实现

直接开始，HTML CSS部分没备注，JS有 HTML部分 <div style="overflow: hidden;position: relative;left

深碍√TFBOYSˉ_/ 2022年05月14日 01:09/ 0 赞/ 175 阅读

相关 JQ代码实现轮播图功能

轮播图一般是横向滚动，我自己做了一个竖向滚动的轮播图，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

约定不等于承诺〃/ 2022年03月20日 07:50/ 0 赞/ 201 阅读

相关三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播）

三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js实现无缝轮播） //1、jq实现淡入淡出思路： a、使用JQ库里面的.fadeIn()\

一时失言乱红尘/ 2021年12月21日 15:37/ 0 赞/ 425 阅读

相关 JQ实现轮播图

<script> $(function(){ var t; var index=

小鱼儿/ 2021年09月19日 01:18/ 0 赞/ 447 阅读

相关 jq 呼吸轮播图

问题: 淡入淡出时间清除动画累积代码示例： <html> <head lang="en"> <meta charset="UTF

小灰灰/ 2021年07月25日 02:31/ 0 赞/ 387 阅读