原生js伦比哦

2023-12-29 13:48
文章标签 js 原生 伦比

本文主要是介绍原生js伦比哦，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
        margin:0;
        padding:0;
        }
div{
        width:520px;
        height:280px;
        position:relative;
        background:pink;
        margin:0 auto;
        overflow:hidden;
        }
div ul{
        width:3640px;
        position:absolute;
        left:-520px;
        }   
div ul li{
        list-style:none;
        float:left;
        width:520px;
        height:280px;
        font-size:30px;
        text-align:center;
        line-height:280px;
        }
.prev ,.next{
        width:30px;
        height:50px;
        position:absolute;
        background:rgba(0,0,0,.4);
        top:115px;
        }   
.prev:hover,.next:hover{
        background:rgba(0,0,0,.6);
        }   
.prev{
        left:0;
        }
.next{
        right:0;
        }   
.prev:after{
        content:'<';
        color:#fff;
        line-height:50px;
        text-align:center;
        width:100%;
        height:100%;
        display:inline-block;
        }   
.next:after{
        content:'>';
        color:#fff;
        line-height:50px;
        text-align:center;
        width:100%;
        height:100%;
        display:inline-block;
        }
div ol{
        position:absolute;
        bottom:10px;
        left:50%;
        margin-left:-50px;
        background:rgba(255,255,255,.2);
        }
div ol li{
        list-style:none;
        float:left;
        color:#fff;
        width:10px;
        height:10px;
        border-radius:100%;
        background-color:#fff;
        overflow:hidden;
        text-indent:10000px;
        margin:0 5px;
        cursor:pointer;
        }
.orange{
        background-color:orange!important;
        }           
                            
</style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg" /></li>
            <li><img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg" /></li>
            <li><img src="https://img.alicdn.com/tfs/TB1Pp2IfDnI8KJjy0FfXXcdoVXa-520-280.png_q90_.webp" /></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1gWrUXfTM8KJjSZFDSuultXXa.jpg" /></li>
            <li><img src="https://img.alicdn.com/simba/img/TB10TmIgcnI8KJjSsziSuv8QpXa.jpg" /></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg" /></li>
            <li><img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg" /></li>
        </ul>
        <a class="prev" href="javascript:void(0)"></a>
         <a class="next"href="javascript:void(0)"></a>
         <ol>
            <li class="orange">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
         </ol>
    </div>
</body>
</html>
<script>    
var ul=document.querySelector("#box ul");
var currentValue=Number(getStyle(ul,"left").replace("px",""));
var li =document.querySelectorAll("#box ul li");
var width=Number(getStyle(li[0],"width").replace("px",""));
var prev=document.querySelector(".prev");
var next=document.querySelector(".next");
var ol=document.querySelector("#box ol");
var oli=document.querySelectorAll("#box ol li");
function Move(obj){
        var _this=this;
        this.decoration=obj.decoration||null;
        this.count=0;
        this.init=function(changeValue){
            ul.style.left=changeValue+"px";
            };
        this.action=function(){
                var timer=setInterval(function(){
                    if(_this.decoration=="left"){
                            _this.count-=10;
                            currentValue-=10;   
                        }else if(_this.decoration=="right"){
                            _this.count+=10;
                            currentValue+=10;   
                        }
                    if(currentValue==0){
                        currentValue=-width*(li.length-2);
                    }
                    if(currentValue==(li.length-1)*-width){
                        currentValue=-width;
                        }   
                    var index=Math.abs(currentValue/width)-1;
                    if(index>=li.length-(2+1)){
                        index=parseInt(index);
                        }
                    _this.olmove(Math.ceil(index)); 
                    _this.init(currentValue);
                    if(Math.abs(_this.count)==width){
                        clearInterval(timer);
                        }
                    },1)
                    
            };
        this.olmove=function(index){
            for(var j=0;j<oli.length;j++){
                oli[j].className="";
            }
            oli[Math.ceil(index)].className="orange";
            };
        this.olclick=function(){
            var arrays=new Array(oli.length);
            for(var i=0;i<oli.length;i++){
                arrays[i]=-(width*(i+1));
                 (function(i){
                     oli[i].onclick=function(){
                         _this.olmove(i);
                        var timer=setInterval(function(){
                            
                            if(arrays[i]<currentValue){
                                    if(currentValue-arrays[i]>width){
                                        currentValue-=30;
                                    }else{
                                        currentValue-=10;
                                        }
                                }else if(arrays[i]>currentValue){
                                    if(arrays[i]-currentValue>width){
                                        currentValue+=30;
                                    }else{
                                        currentValue+=10;
                                        }
                                }
                            if(arrays[i]==currentValue){
                                clearInterval(timer)
                                }   
                            _this.init(currentValue);
                            },1);
                         }
                     }(i));
                }
            };          
}
        
function getStyle(element,attr){
        if(element.currentstyle){
            return element.currentstyle[attr];
            }else{
                return window.getComputedStyle(element,null)[attr];
            }
        }
prev.onclick=function(){
            var obj={
                decoration:"right",
            }
        run(obj)
        }       
next.onclick=function(){
            var  obj={
                decoration:"left",
            }
            run(obj)
        }
                
function run(obj){
         var move=new Move(obj);    
         move.action(); 
        }   
var  obj={}
         var move=new Move(obj);
         move.olclick();
</script>

这篇关于原生js伦比哦的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/549620。

相关文章

Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
使用JS/Jquery获得父窗口的几个方法(笔记)

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法：$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);如题： $(selector, window.top.document);//获得顶级窗口里面的元素 $(
阅读更多...
js异步提交form表单的解决方案

js异步提交form表单的解决方案

1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>
阅读更多...
js react 笔记 2

js react 笔记 2

起因， 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2