Js轮播图和星星点灯作业-CSDN博客

本文链接：https://blog.csdn.net/mgwzz/article/details/135514991

js轮播图作业

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

div>ul {

list-style-type: none;

}

img {

width: 600px;

height: 300px;

display: none;

}

.container {

width: 600px;

height: 300px;

position: relative;

}

ol {

width: 150px;

height: 20px;

list-style: none;

background-color: rgba(0, 0, 0, .5);

left: 200px;

bottom: 10px;

position: absolute;

}

ol>li {

width: 13px;

height: 13px;

border-radius: 50%;

background-color: rgba(255, 255, 255, 0.5);

float: left;

margin-top: 3px;

margin-left: 14px;

}

.left,

.right {

width: 50px;

height: 50px;

font-size: 50px;

font-weight: bold;

position: absolute;

top: 45%;

background-color: rgba(255, 255, 255, 0.6);

color: black;

text-align: center;

line-height: 50px;

border-radius: 50%;

display: none;

}

.right {

right: 0;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

</ol>

</div>

let img_arr = document.querySelectorAll("ul img");

let div = document.querySelector(".container");

let left = document.querySelector(".left");

let right = document.querySelector(".right");

let j = 0, k = 0,record=0;

let cirle_arr = document.querySelectorAll("ol li")

let time_id = setInterval(lunbo,1000);

//轮播+圆点高亮

function lunbo() {

if (j >= img_arr.length) { j = 0; }

for (let i = 0; i < img_arr.length; i++) {

if (j == i) {

img_arr[i].style.display = "block";

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,1)";

}

else {

img_arr[i].style.display = "none";

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,0.5)"

}

j++;

}

//点击圆点切换

for (let i = 0; i < img_arr.length; i++) {

cirle_arr[i].onclick = function () {

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,1)";

img_arr[i].style.display = "block";

j = i;

for (let i = 0; i < img_arr.length; i++) {

// img_arr[k].style.display = "block";

// cirle_arr[k].style.backgroundColor = "rgba(255, 255, 255,1)";

if (i != j) {

img_arr[i].style.display = "none";

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,0.5)";

}

//箭头

left.onclick = function(){

if(j==0)

{

j=img_arr.length;

}

j=j-1;

cirle_arr[j].style.backgroundColor="rgba(255, 255, 255,1)";

img_arr[j].style.display = "block";

for (let i = 0; i < img_arr.length; i++)

{

if(i!=j)

{

img_arr[i].style.display = "none";

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,0.5)";

}

right.onclick = function(){

if(j>img_arr.length-1)

{

j=0;

cirle_arr[j].style.backgroundColor="rgba(255, 255, 255,1)";

img_arr[j].style.display = "block";

for (let i = 0; i < img_arr.length; i++)

{

if(i!=j)

{

img_arr[i].style.display = "none";

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,0.5)";

}

if(j>0)

{

cirle_arr[j].style.backgroundColor="rgba(255, 255, 255,1)";

img_arr[j].style.display = "block";

for (let i = 0; i < img_arr.length; i++)

{

if(i!=j)

{

img_arr[i].style.display = "none";

cirle_arr[i].style.backgroundColor = "rgba(255, 255, 255,0.5)";

}

j++;

}

div.onmousemove = function () {

clearInterval(time_id)

left.style.display = "block"

right.style.display = "block"

}

div.onmouseout = function () {

time_id = setInterval(lunbo, 1000)

left.style.display = "none"

right.style.display = "none"

}

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

/* body {

background-color: white;

} */

</style>

</head>

<body>

const img_w = 254;

const img_h = 218;

document.body.style.backgroundColor = "black"

document.onclick = function (e) {

let i = document.createElement("img")

i.style.position = "absolute"

let w = my_random(20, 200);

let h = img_h / img_w * w;

i.style.border = "black"

i.style.width = w + "px";

i.style.height = h + "px";

i.style.left = (e.pageX - w / 2) + "px"

i.style.top = (e.pageY - h / 2) + "px"

document.body.appendChild(i);

}

function my_random(min, max) {

return parseInt(min + Math.ceil((max - min) * Math.random()))

}

</script>

</body>

</html>