原生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。

相关文章

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'
阅读更多...
学习记录：js算法（二十八）：删除排序链表中的重复元素、删除排序链表中的重复元素II

学习记录：js算法（二十八）：删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一：循环解法二：递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head ， 删除所有重复的元素，使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1：（图一）输入：head = [1,1,2]输出：[1,2]示例 2：（图
阅读更多...
uuid.js 使用

uuid.js 使用

相关代码 import { NIL } from "uuid";/** 验证UUID* 为空 则返回 false* @param uuid* @returns {boolean}*/export function MyUUIDValidate(uuid: any): boolean {if (typeof uuid === "string" && uuid !== NIL) { //uuid
阅读更多...
js定位navigator.geolocation

js定位navigator.geolocation

一、简介 　　html5为window.navigator提供了geolocation属性，用于获取基于浏览器的当前用户地理位置。 　　window.navigator.geolocation提供了3个方法分别是： void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置int watchCurrentPosition(
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2