js对象轮播插件

最新推荐文章于 2022-07-17 23:57:10 发布
最新推荐文章于 2022-07-17 23:57:10 发布
阅读量184 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frost666/article/details/81191340
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
      #bb,#cc{
                    width: 50px;
                    height: 150px;
                    background: rgba(255,255,255,0.3);
                    font-size:30px;
                    margin-top: 140px;
                    color: rgba(0,0,0,0.6);
                    position: absolute;
                    border: 0;
                    cursor: pointer;
                }
      #cc{
          left: 650px;

      }
        #ss{
            margin-left: 300px;
            width: 700px;
            height: 400px;
            position: relative;
        }
        .u1{
            margin-left: 300px;
            position: absolute;
            top:400px;
        }
        img{
            width: 700px;
            height: 450px;
            display: none;
        }
        li{
            width: 10px;
            height: 10px;
            background: rgba(255,255,255,0.5);
            border-radius:50%;
            float: left;
            margin-right: 15px;
            cursor: pointer;
        }
        .i1{
            display: block;
        }
        .active{
            width: 10px;
            height: 10px;
            background: rgba(255,0,0,0.8);
            border-radius:50%;
        }

    </style>
</head>
<body>
<div id="ss">
    <input type="button" id="bb" value="<">
    <input type="button" id="cc" value=">">
    <img src="1.jpg" class="i1">
    <img src="2.jpg" >
    <img src="3.jpg" >
    <img src="4.jpg" >
    <img src="5.jpg" >
    <ul class="u1">
        <li class="active"></li>
        <li ></li>
        <li ></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
<script>
    class aaa{
        constructor(id,inputLeft,inputRight){
            this.id=document.getElementById(id);
            this.li=this.id.getElementsByTagName("li");
            this.img=this.id.getElementsByTagName("img");
            this.left=document.getElementById(inputLeft);
            this.right=document.getElementById(inputRight);
            this.imgs=0;
            this.sss();
        }
        sss(){
            for(let i=0;i<this.li.length;i++){
                this.li[i].οnmοuseοver=()=>{
                    for(var j=0;j<this.li.length;j++){
                        this.li[j].className="";
                        this.img[j].className=""
                    }
                    this.li[i].className="active";
                    this.img[i].className="i1";
                    this.imgs=i;
                }
            }

            this.ads=()=>{
                this.imgs=this.imgs+1;
                if(this.imgs>=this.img.length){
                    this.imgs=0
                }
                for (var j = 0; j < this.li.length; j++) {
                    this.li[j].className ="";
                    this.img[j].className="";}
                this.img[this.imgs].className="i1";
                this.li[this.imgs].className="active";
            };
            this.x=setInterval(this.ads,1000);
            this.id.οnmοuseοver=()=>{
              clearInterval(this.x)
            };
            this.id.οnmοuseοut=()=>{
                this.x=setInterval(this.ads,1000);
            };
            this.right.οnclick=this.ads;
            this.left.οnclick=()=>{
                this.imgs=this.imgs-1;
                if(this.imgs<0){
                    this.imgs=this.img.length-1
                }
                for (var j = 0; j < this.li.length; j++) {
                    this.li[j].className = "";
                    this.img[j].className="";}
                this.img[this.imgs].className="i1";
                this.li[this.imgs].className="active";
            }

        }
    }
    new aaa("ss","bb","cc");
</script>
</html>
瓜皮瓜皮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js无缝轮播插件使用详解
12-28
这篇博文主要讲如何使用原生js来实现一个兼容 IE9+ 的无缝轮播图。主要知识点如下： 面向对象 js优化之节流函数 js运动 效果 html结构 <li class=slider xss=removed>5 <li class=slider xss=removed>1 &...
js面向对象的编程方法和一些比较有用的js插件
u012846041的专栏
10-23 359
一、js 插件 语法代码插件：prism.js：https://prismjs.com/ 热力图绘制插件：heatmap：https://www.patrick-wied.at/static/heatmapjs/ 实现流程图绘制的插件：go：https://gojs.net/latest/samples/absolute.html 二、面向对象对的JS编程方法 1、采用js原型方法进行j...
图片轮播效果 面向对象方法
weiqiang_gg的博客
04-13 1097
/*广告图片数组*/ var imgs=[ {"img":"images/index/banner_01.jpg"},   {"img":"images/index/banner_02.jpg"},   {"img":"images/index/banner_03.jpg"},   {"img":"images/index/banner_04.jpg"},   {"img":"imag
javascript插件的几种写法
小小阳
07-07 5141
一、js原生插件的写法 （1）工厂模式 var Helloword = function(objId){ var _get_dom = function(Id){ return document.getElementById(Id); } var _aim_obj = _get_dom(objId); var _say_hello = funct
js面向对象实现图片轮播插件
weixin_33688840的博客
09-14 154
这个demo的学习过程很值得记录下来。前言：学习了一遍js的面向对象，想找点东西练练手，就上网找了个用js面向对象实现图片轮播插件：http://www.codefans.net/jscss/code/3327.shtml 功能：新建一个实例就是一个图片轮播，可以新建多个，但是实例与实例之间是干扰的。过程：看视频教程说，第一次搞面向对象，把面向过程改头换面就可以了。自己就死磕...
react native 原生js解决局部数据渲染
愿你走过半生，归来任是少年。
06-03 944
总体把控三点 封装 多态 继承 面向对象oop是一种编程思想，最大的好处就是让程序更容易维护增加了代码的重复利用效率。 所谓的手写对象 var per = { name:'laoyeye', age:'90', say:function(){ alert(this.name) } } 数据属性提供的高级功能没必要利用，但理...
js原生制作轮播图插件
墨羽晨的博客
09-22 607
调用时也只需要写一个DIV即可 调用的js部分配置内容： 传入轮播图需显示的位置（div） 传入图片和点击跳转的链接 话不多说，上代码 HTL <div id="banner"></div> HTML文档内的<script>,这里是轮播图的配置内容，一共两个参数，第一个是需要传入的DIV（轮播图所显示的区域），第二个参数是一个数组，数组里的元素是一个个对象，对象里第一个属性imgUrl表示图片，第二个属性link表示跳转链接 一个数组元...
jq轮播图插件(面向对象)
weixin_45034639的博客
10-09 302
1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
原生JS实现轮播图插件
SiaEyre
05-21 1004
HTML部分只提供存放轮播图的容器，img标签等全部由js操作dom元素动态生成，样式部分也由js 完成 html代码部分 <!-- 创建存放轮播图片的容器 --> <div id="banner"></div> <!-- 引入轮播图插件 --> <script src="./plugin/banner.js"...
纯javascript轮播滑动特效插件Swiper
xianren1hao的博客
07-17 651
纯javascript轮播滑动特效插件Swiper，它是一个开源、免费、强大的触摸滑动插件！
jprettyCarousel:jQuery轮播插件
05-01
jPrettyCarousel 一个漂亮的轮播插件，可与jQuery 1.7+一起使用版本1.1安装在页面顶部添加插件调用带有可见项数量$("my_container").jprettyCarousel({ visibleItens:5 })的轮播方法设置一些可选参数，可能的参数是...
broadcastJs:一个基于原生JS的html轮播图插件
05-11
功能&介绍没有引用第三方插件库，原生js，封装一个Broadcast对象，在此对象上展开，仅仅190多行代码。目前主要实现了:无缝轮播，自动播放，PC端左右按钮点击切换，移动端手势滑动切换。自己写了一部分基础的css样式...
简单的JS轮播图代码
12-10
在团队带人，突然被人问到轮播图如何实现，进入前端领域有一年多了，但很久没自己写过，一直是用大牛写的插件，今天就写个简单的适合入门者学习的小教程。当然，轮播图的实现原理与设计模式有很多种，我这里讲的是用...
jquery 插件 轮播图左右切换方式
12-26
自己写的，非常简单的轮播图，无缝滚动轮播，以面向对象的方式书，仍有可以改进的地方 //使用，默认有nav jQuery(".slide").slide(); //使用-无nav jQuery(".slide").slide({ nav:false });
基于yolov5目标检测的跌倒检测数据集（voc格式）-上部
05-07
基于yolov5目标检测的跌倒检测数据集（voc格式）——上部
STM32通过ADC多通道检测数据
最新发布
05-07
工程代码基于STM32F103C8T6，通过ADC多通道检测4个数据，使用一个电位器产生0-3.3v连续变化的模拟电压信号，和三个传感器：光敏电阻模块，热敏电阻模块，红外反射模块。之后用stm32的adc读取数据，并且通过oled屏幕显示4个数据。
2024年中国便携式RFID读写器行业研究报告.docx
05-07
2024年中国便携式RFID读写器行业研究报告
2024年中国超声腐蚀监测系统行业研究报告.docx
05-07
2024年中国超声腐蚀监测系统行业研究报告
帮我用swiper插件生成一个5张图片轮播的网页源码
02-28
好的，以下是使用Swiper插件生成一个5张图片轮播的网页源码示例： ...JavaScript代码部分实例化了Swiper对象，并对其进行了一些配置，例如自动播放、循环轮播、分页器和左右箭头等。这些选项可以根据具体需求进行配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值