<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习</title>
<!--页内样式表-->
<link rel="stylesheet" href="css/base1.css" type="text/css"/>
<style>
html, body {
width: 100%;
height: 100%;
}
.fdiv {
position: relative;
width: 500px;
height: 200px;
border: 0px solid seagreen;
margin-top: 50px;
overflow: hidden;
}
ul li {
width: 20px;
height: 20px;
float: left;
line-height: 20px;
text-align: center;
cursor: pointer;
margin-left: 9px;
color: cornflowerblue;
background-color: burlywood;
}
ul li:hover {
background-color: cornflowerblue;
color: brown;
}
.jingguo {
background-color: cornflowerblue;
color: brown;
}
</style>
</head>
<body style=" background: lightcoral;">
<!--网页主体开始-->
<div class="fdiv" id="fdiv">
<div id="yes" style="width: 3200px;margin: 0px;padding: 0px;position: absolute;left: 0px; ">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<ul style="position:absolute; left: 329px;
top: 169px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!--网页主体结束-->
</div>
<script src="js/base.js"></script>
<!--内部js-->
<script>
var li = getnode("li");
var j1 = 0, j2 = 0;
var yes = getnode("#yes");
var x = 0, y = 0;
var bool = true;
var nimabi = null;
yes.appendChild(yes.children[0].cloneNode(true));
function autoplay(a, b) {
clearInterval(nimabi);
nimabi = setInterval(function () {
if (a) {
x = x + (b - x) / 10;
yes.style.left = -x + "px";
}
else if (!a) {
x = 0;
}
// console.log(x);
}, 30);
}
var dierge;
var a;
var b = 0;
function auto(xxxxxxxxx) {
dierge = setInterval(function () {
a = true;
b = b + 505;
if (xxxxxxxxx != null) {
b = xxxxxxxxx;
}
if (b >= 3030) {
b = 0;
yes.style.left = 0 + "px";
clearInterval(nimabi);
a = false;
}
autoplay(a, b);
a = true;
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onmouseover = function () {
clearInterval(dierge);
// clearInterval(nimabi);
li[0].className = "";
li[1].className = "";
li[2].className = "";
li[3].className = "";
li[4].className = "";
li[this.index].className = "jingguo";
// auto(this.index * 505 - 1);
j2 = 505 * this.index;
autoplay(1, j2);
b = this.index * 505;
}
}
// console.log(b / 505);
li[0].className = "";
li[1].className = "";
li[2].className = "";
li[3].className = "";
li[4].className = "";
if (b / 505 >= 0) {
if (b / 505 == 5) {
li[0].className = "jingguo";
}
else {
li[b / 505].className = "jingguo";
}
}
else if (b / 505 == 0 || b / 505 == 6) {
}
}, 1700)
}
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onmouseout = function () {
clearInterval(dierge);
auto();
console.log(this.index * 505);
}
}
function nimabiaaa() {
if (bool) {
auto();
}
}
nimabiaaa();
// window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//封装自己的窗口什么的
// 咩咩
window.onload
{
function getnode(a) {
if (a != "") {
var jjj = a.slice(0, 1);
if (jjj == "#") {
return document.getElementById(a.slice(1));
}
if (jjj == ".") {
return document.getElementsByClassName(a.slice(1));
}
else {
return document.getElementsByTagName(a);
}
}
}
//g滚动
function scroll() {
if (window.pageYOffset != null) // ie9+ 和其他浏览器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode == "CSS1Compat") // 声明的了 DTD
// 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
function client() {
if (window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if (document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
</script>
<!--外部js-->
</body>
</html>
