使用方法：
可能很多人对轮播图感兴趣，下面奉上本人的 原生 js 轮播代码
复制 js 到页面的最底部，样式在 css 里改，js 基本不用动，有什么不懂的可以 加本人 QQ172360937 咨询 或者留言都可以，这个是用 原生写的 轮播图，样式可以写自己喜欢的样式，什么都不用改，只改变样式就行，页面结构的id 要与js的相对应li随便加。li 随便加的意思就是说你可以加无数个图片。每个li 里装一个图片，或者是其他什么元素，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
div{
width:200px;/*必须有*/
height:50px;/*必须有*/
position:relative;/*必须有===*/
overflow:hidden;/*必须有===*/
-webkit-user-select: none;/*必须有*/
-moz-user-select: none;/*必须有*/
-ms-user-select: none;/*必须有*/
user-select: none;/*必须有*/
margin:20px;
}
ul{
position:absolute;/*必须有*/
left:0;/*必须有*/
font-size:0;/*必须有*/
}
li{list-style: none;/*必须有*/
font-size:16px;/*必须有*/
height:50px;/*必须有*/
width:200px;/*必须有*/
float:left;/*必须有*/
}
#parent{
width:50%;
height:200px;
border:1px solid red;
margin:0 auto;
}
.span{
display:inline-block;/*必须有*/
width:20px;
height:20px;
line-height:20px;
text-align: center;
border-radius:50%;
color:white;
cursor:pointer;/*必须有*/
}
</style>
</head>
<body>
<div id="parent">
<div>
<ul id=‘ul‘>
<li style=‘background:red;‘>第一个</li>
<li style=‘background:yellow;‘>第二个</li>
<li style=‘background:pink;‘>第三个</li>
<li style=‘background:green;‘>第四个</li>
<li style=‘background:blue;‘>第五个</li>
<li style=‘background:blue;‘>第6个</li>
<li style=‘background:green;‘>第7个</li>
<li style=‘background:blue;‘>第8个</li>
<li style=‘background:green;‘>第9个</li>
<li style=‘background:blue;‘>第10个</li>
</ul>
</div>
<a href="#" id="prev">向左</a>
<a href="#" id="next">向右</a>
</div>
<script>
var prev = document.getElementById(‘prev‘);
var next = document.getElementById(‘next‘);
var parent = document.getElementById(‘parent‘);
var ttt;
var type = true;
var t;
var span;
var ul = document.getElementById(‘ul‘);
var li = ul.getElementsByTagName(‘li‘);
var color1 = ‘#cccccc‘;//小圆点的背景颜色 灰色
var color2 = ‘red‘;//小圆点的背景颜色，红色
var liWidth = li[0].offsetWidth;
ul.style.width = liWidth*li.length+‘px‘;
// 点点
for(var i = 0;i<li.length;i++){
li[i].index = i;
span = document.createElement(‘span‘);
span.className = ‘span‘;
span.style.background = color1;
span.innerHTML = i+1;
parent.appendChild(span);
}
var span_span = parent.getElementsByTagName(‘span‘);
for(var n = 0;n<span_span.length;n++){
span_span[n].index = n;
//所有的小圆点的事件
span_span[n].onmouseover = function(){
if(type){
ul_ul(this.index);
for(var s = 0;s<span_span.length;s++){
span_span[s].style.background = color1;
span_span[this.index].style.background = color2;
}
type = true;
}
}
}
function ul_ul(inde){
var this_li = li[0].index;
if(inde>this_li){
var x = inde-this_li;
for(var y = 0;y<x;y++){
ul.appendChild(li[0]);
}
}
if(inde<this_li){
var x_x = this_li-inde;
for(var g = 0;g<x_x;g++){
ul.insertBefore(li[li.length-1],li[li.length-li.length]);
}
}
}
span_span[0].style.background = color2;
prev.onclick = function(){
if(type){
clearInterval(t);
ul.insertBefore(li[li.length-1],li[li.length-li.length]);
liWidth = li[0].offsetWidth;
ul.style.left = ‘-‘+liWidth+‘px‘;
t = setInterval(rem,5);//动画速度修改
type = false;
background(0);
}
};
next.onclick = function(){
if(type){
liWidth = 0;
clearInterval(ttt);
ttt = setInterval(nex,5);//动画速度修改
type = false;
background(1);
}
};
function background(number){
for(var j = 0;j<span_span.length;j++){
span_span[j].style.background = color1;
}
span_span[li[number].index].style.background = color2;
}
function nex(){
ul.style.left = ‘-‘+liWidth+ ‘px‘;
liWidth += 3 ;
if(liWidth == li[0].offsetWidth+1){
clearInterval(ttt);
ul.appendChild(li[li.length-li.length]);
liWidth = 0;
ul.style.left = liWidth+‘px‘;
type = true;
}
}
function rem(){
ul.style.left = ‘-‘+liWidth+‘px‘;
liWidth -= 3 ;
if(liWidth == -1){
clearInterval(t);
type = true;
}
}
var parent_t = setInterval(next.onclick,1500);
parent.onmouseover = function(){
clearInterval(parent_t);
};
parent.onmouseout = function(){
parent_t = setInterval(next.onclick,1500);
};
</script>
</body>
</html>
时间： 2024-10-25 15:39:39