lunbotu

最新推荐文章于 2024-04-15 10:28:24 发布

zhao55759013

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量187

点赞数

分类专栏：导航

导航专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQlunBoTu.aspx.cs" Inherits="WebApplication2.JQlunBoTu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}

body {
padding: 20px;
}

#container {
width: 600px;
height: 400px;
border: 1px solid #333;
overflow: hidden;
position: relative;
}

#list {
width: 4200px;
height: 400px;
/*border: 3px solid #333;*/
overflow: hidden;
position: relative;
}

#list img {
float: left;
width: 600px;
height: 400px;
}

#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}

#buttons span {
cursor: pointer; /*鼠标样式*/
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}

#buttons .on {
background: orangered;
}

.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0,0,0,0.3);
color: #FFF;
}

.arrow:hover {
background-color: RGBA(0,0,0,0.7);
}

#container:hover .arrow {
display: block;
}

#prev {
left: 20px;
}

#next {
right: 20px;
}
</style>
<script>
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');

var index = 1;
var animated = false;

next.onclick = function () {
if (!animated) {
if (index == 5) {
index = 1;
}
else {

index += 1;

}
showbutton();
animate(-600);
}

}

prev.onclick = function () {
if (!animated) {
if (index == 1) {
index = 5;
}
else {
index -= 1;
}
showbutton();

animate(600);
}
}

//图片的转换
function animate(offset) {
animated = true;
var left = parseInt(list.style.left) + offset;
var time = 300; //位移总时间
var interval = 10; //位移间隔时间
var speed = offset / (time / interval); //每次位移量
function go() {

if ((speed < 0 && parseInt(list.style.left) > left) || (speed > 0 && parseInt(list.style.left) < left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, 10); //延迟10毫秒回调go函数
}

else {
animated = false;
//list.style.left = left + 'px';
if (left < -3000) {
list.style.left = -600 + 'px';
}
if (left > -600)
list.style.left = -3000 + 'px';
}

}

go();
}

function play() {
timer = setInterval(function () {
next.onclick();
}, 3000);
}

function stop() {

}
//控制圆点颜色
function showbutton() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == 'on') {
buttons[i].className = '';
break;
}
}

buttons[index - 1].className = 'on';
}

//指向圆点按钮时
for (var i = 0; i < buttons.length; i++) {

buttons[i].onmouseover = function () {
if (this.className == 'on') {
return;
}
var myindex = parseInt(this.getAttribute('index')); //获取当前对象index值，getAttribute:获取HTML元素的属性
var offset = (myindex - index) * -600;

index = myindex;
showbutton();
list.style.left = parseInt(list.style.left) + offset + 'px';

}
}

container.onmouseover = function () {
clearInterval(timer);
}
container.onmouseout = play;

play();

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="list" style="left: -600px;">
<img src="images/05.jpg" alt="" />
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
<img src="images/01.jpg" alt="" />

</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>

</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</form>
</body>
</html>