原⽣js轮播图完整代码（css+html+js）  1<style>
2        *{
3            padding: 0;
4            margin: 0;
html个人网页完整代码图片
5        }
6        .container{
7            width: 600px;
8            height: 320px;
9            box-shadow: 0px 0px 33px 11px #25dbc7;
10            margin-top: 90px;
11            margin-left: 300px;
素材网站名称
12        }
13        .picShow{
14            width: 600px;
15            height: 370px;
16            overflow: hidden;
17            position: relative;
18        }
19        .picShow img{
20            display: block;
21            float: left;
22        }
23        #pic{
24            width: 2400px;
25        }
26        #pic>img{
27            width: 600px;
28        }
29        .picShow>img{
30            position: absolute;
31            top:150px;
32            opacity: 0.7;
33            cursor: pointer;
34        }
35        .picShow>img:nth-child(2){
36            left:0;
37        }
38        .picShow>img:nth-child(3){
39            right:0;
40        }
41        #list{
42            margin-left: 246px;
43        }
44        #list li{
45            list-style: none;
46            float: left;
47        }
48        #list a{
49            display: block;
50            width: 20px;
51            height: 20px;
52            font-size: 20px;
53            text-align: center;
54            text-decoration: none;
55            color: #000;
56            border-radius: 50%;
57            border: 1px solid #ccc;
58            background-color: #1270d8;
59            opacity: 0.5;
60            margin-left: 5px;
61        }
62        #list .active{
63            background-color: red;
64        }
65</style>
66</head>
67<body>
68<div class="container">
69<div class="picShow">
70<div id="pic">
71<img src="images/1.jpg" alt="">
log4j漏洞利用方法
72<img src="images/2.jpg" alt="">
73<img src="images/3.jpg" alt="">
74<img src="images/4.jpg" alt="">
75</div>
76<img id="prev" src="images/slider-prev.png" alt="">
regression歌词中文77<img id="next" src="images/slider-next.png" alt="">
78<ul id="list">
79<li><a class="active" href="#"></a></li>
80<li><a href="#"></a></li>
81<li><a href="#"></a></li>
82<li><a href="#"></a></li>
83</ul>mysql存储过程和索引区别
84</div>
85</div>
86<script>
87var num = 0;
88function G(id){
ElementById(id)
90        }
91var arrA = G("list").getElementsByTagName('a')
92        G("next").onclick = function(){
93if(num<3){
94                num = num + 1;
95            }else{
96                num = 0;
97            }
98            console.log(num)
99var ml = num * -600 + "px";
100            G("pic").style.marginLeft = ml;
101for(var i = 0;i < arrA.length;i++){
102                arrA[i].style.backgroundColor = "#1270d8";
103            }
104            arrA[num].style.backgroundColor = "red";
105        }
106        G("prev").onclick = function(){
107if(num>0){
108                num = num - 1;
109            }else{
110                num = 3;
111            }
112            console.log(num);
113var ml1 = num * -600 + "px";
114            G("pic").style.marginLeft = ml1;
115for(var i = 0;i < arrA.length;i++){
116                arrA[i].style.backgroundColor = "#1270d8";
117            }
118            arrA[num].style.backgroundColor = "red";
119        }
120for(var i = 0;i < arrA.length;i++){
121            arrA[i].index = i;
122            arrA[i].onclick = function(){
123var ind = this.index;
124                num = ind;
125var ml3 = num * -600 + "px";
126                G("pic").style.marginLeft = ml3;
127for(var i = 0;i < arrA.length;i++){
128                    arrA[i].style.backgroundColor = "#1270d8";
129                }
130                arrA[num].style.backgroundColor = "red";
131            }
132        }
标签云属于可视化的哪一种
133function lunbo(){
134if(num<3){
135                num+=1;
136            }else{
137                num=0;
138            }
139var ml4 = num * -600 + "px";
140            G("pic").style.marginLeft = ml4;
141            console.log(ml4)
142for(var i = 0;i < arrA.length;i++){
143                arrA[i].style.backgroundColor = "#1270d8";
144            }
145            arrA[num].style.backgroundColor = "red";
146        }
147var stop = setInterval(lunbo,2000);
148        G("pic").onmouseenter = function(){
149            clearInterval(stop)
150        }
151        G("pic").onmouseleave = function(){
152            stop = setInterval(lunbo,2000)
153        }
154</script>
思路：布局⾸先写⼀个⼀张图⽚宽度的盒⼦，然后⾥⾯套⼀个盒⼦，盒⼦⾥⾯放上图⽚，两边左右切换的图标可以定位上去，然后说⼀下js 代码的思路
先看⼀下需要拿到什么数，然后根据规律定义⼀个变量num=0,⽤if语句可以拿到想要的数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。