JS实现简易图片轮播效果的方法-白红宇

JS实现简易图片轮播效果的方法

阅读量：5880 次

发布时间：2019-06-19

本文共 3150 字，大约阅读时间需要 10 分钟。

<!DOCTYPE html>

<html lang=

"en"

>

<head>

<meta http-equiv=

"Content-Type"

content=

"text/html; charset=utf-8"

/>

<title>JS幻灯代码</title>

<script type=

"text/javascript"

>

window.onload =

function

() {

flag = 0;

obj1 = document.getElementById(

"slider"

);

obj2 = document.getElementsByTagName(

"li"

);

obj2[0].style.backgroundColor =

"#666666"

;

//默认被选中颜色

time = setInterval(

"turn();"

, 5000);

obj1.onmouseover =

function

() {

clearInterval(time);

}

obj1.onmouseout =

function

() {

time = setInterval(

"turn();"

, 6000);

}

for

(

var

num = 0; num < obj2.length; num++) {

obj2[num].onmouseover =

function

() {

turn(

this

.innerHTML);

clearInterval(time);

}

obj2[num].onmouseout =

function

() {

time = setInterval(

"turn();"

, 6000);

}

//延迟加载图片，演示的时候，使用本地图片

//上线后请改为二级域名提供的图片地址

document.getElementById(

"second"

).src =

"images/2.png"

;

//使用图片宽660，高550

document.getElementById(

"third"

).src =

"images/3.png"

;

document.getElementById(

"four"

).src =

"images/4.png"

;

}

function

turn(value) {

if

(value !=

null

) {

flag = value - 2;

}

if

(flag < obj2.length - 1)

flag++;

else

flag = 0;

obj1.style.top = flag * (-550) +

"px"

;

for

(

var

j = 0; j < obj2.length; j++) {

obj2[j].style.backgroundColor =

"#ffffff"

;

}

obj2[flag].style.backgroundColor =

"#666666"

;

}

</script>

<style type=

"text/css"

>

#wrap

{

height: 550px;

width: 660px;

overflow: hidden;

position: relative;

overflow: hidden;

}

#wrap ul

{

list-style: none;

position: absolute;

top: 500px;

left: 450px;

}

#wrap li

{

margin-left:2px;

opacity: .3;

filter: alpha(opacity=30);

text-align: center;

line-height: 30px;

font-size: 20px;

height: 30px;

width: 30px;

 padding: 0px 0px 0px 5px; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: gray !important; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">#fff;

float: left;

border-radius:3px;

cursor:pointer;

}

#slider

{

position: absolute;

top: 0px;

left: 0px;

}

#slider img

{