轮播图特效

来源：互联网发布：python 内存地址编辑：程序博客网时间：2024/06/05 15:35

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</figure>

</header>

</footer>

</nav>

</body>

</html>

margin: 0;

padding:0;

}

nav{

width: 600px;

height: 400px;

position: relative;

margin: 100px auto;

border: 3px solid #000000;

overflow: hidden;

}

figure{

position: absolute;

height: 400px;

z-index: 1;

width: 4200px;

}

figure img{

display: block;

float: left;

}

footer {

position: absolute;

z-index: 2;

width: 600px;

height: 50px;

top: 175px;

left: 0px;

display: none;

}

footer a{

text-align: center;

text-decoration: none;

display: block;

width: 50px;

height: 50px;

background-color: black;

opacity: .2;

color: white;

font-size: 40px;

cursor: pointer;

}

footer a:nth-last-of-type(2){

float: left;

}

footer a:nth-last-of-type(1){

float: right;

}

nav:hover footer{

display: block;

}

footer:hover a{

opacity: .5;

}

header{

position: absolute;

width: 100px;

height: 20px;

top: 370px;

left: 250px;

display: -webkit-box;

-webkit-box-pack: justify;

z-index: 2;

}

header span{

display: block;

height: 10px;

width: 10px;

border-radius: 50%;

border: 1px solid white;

cursor:pointer;

}

.on{

background-color: white;

}

.off{

background-color: none;

}

window.onload = function() {

var contenter=document.getElementById("contenter")

var imgs = document.getElementById("imgs");

var botns = document.getElementById("botn").getElementsByTagName("span");

var botn1 = document.getElementById("botn1");

var botn2 = document.getElementById("botn2");

var index = 1;

var timer;

function showBotton() {

for (var i = 0; i < botns.length; i++) {

botns[i].className = "";

}

botns[index - 1].className = "on";

}

// 动画播放函数

function anmiate(offset) {

var times = 300;

var onec = 10;

var speed = offset / (times / onec);

var newleft = parseInt(imgs.style.left) + offset;

var go = function() {

if ((speed < 0 && newleft < parseInt(imgs.style.left)) || (speed > 0 && newleft > parseInt(imgs.style.left))) {

imgs.style.left= parseInt(imgs.style.left)+speed+"px" ;

setTimeout(go,onec);

} else {

imgs.style.left = newleft+ "px";

if (parseInt(imgs.style.left) > -600) {

imgs.style.left = "-3000px";

}

if (parseInt(imgs.style.left) < -3000) {

imgs.style.left = "-600px";

}

go();

}

// 动画播放函数

botn1.onclick = function() {

if (index == 1) {

index = 5;

} else {

index -= 1;

}

showBotton();

anmiate(600);

}

botn2.onclick = function() {

if (index == 5) {

index = 1;

} else {

index += 1;

}

showBotton();

anmiate(-600);

}

for (var i = 0; i < botns.length; i++) {

(function(i) {

botns[i].onclick = function() {

if (this.className == "on") {

return;

}

var offset = -600 * (i - index+1);

anmiate(offset);

index = i + 1;

showBotton();

}

})(i);

}

function play () {

timer=setInterval(botn2.onclick,3000)

}

function stop (){

clearInterval(timer);

}

play ();

contenter.onmouseover=function () {

stop ();

}

contenter.onmouseout=function () {

play ();

}

};

0 0