<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin: 0;
padding: 0;
font: 1rem "micro-soft Yahei";
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.play-box {
position: relative;
width: 865px;
height: 535px;
border: 1px solid #ccc;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: none;
}
.play-box a {
opacity: 0;
height: 0;
overflow: hidden;
display: block;
transition: opacity 1s;
}
.play-box a span {
position: absolute;
font-size: 1.5rem;
color: bisque;
opacity: 0.6;
padding-left: 20px;
padding-top: 20px;
}
.play-box a.current {
opacity: 1;
height: auto;
}
.play-box img {
width: 865px;
height: 535px;
border: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#iconList {
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -45px;
}
#iconList li {
float: left;
margin: 0 4px;
width: 10px;
height: 10px;
border-radius: 50%;
font-size: 0;
background-color: #fff;
cursor: pointer;
}
#iconList li.current {
background: linear-gradient(to bottom, #f8f8f8 0,lawngreen 80%);
}
.slidebar {
position: absolute;
display: none;
top: 50%;
margin-top: -35px;
width: 30px;
height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
background-color: #000;
opacity: .6;
cursor: pointer;
font-family: simsun;
}
.slidebar_left {
left: 0;
}
.slidebar_right {
right: 0;
}
#imgContent, #materials {
display: flex;
justify-content: center;
margin: 60px auto;
color: #666;
}
#title {
height: auto;
width: 535px;
text-align: left;
padding-left: 20px;
border: 1px solid #ccc;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-left: none;
}
#title ul {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
}
#title ul li a {
text-decoration: none;
}
#title ul li.current {
padding-left: 18px;
color: #000;
text-decoration: underline #fefce6 dashed;
background: url(/images/arrow_blue_right.png) left no-repeat;
}
h2 {
padding: 0;
margin: 0;
}
h3 {
padding: 0;
margin: 0;
font-weight: normal;
}
hr {
color: #ccc;
}
#category {
font-size: 1.2rem;
}
.footer {
text-align: right;
margin-top: 20px;
margin-right: 200px;
color: navy;
height: 50px;
bottom: 30px;
right: 20px;
margin-bottom: -80px;
}
.footer img {
vertical-align: middle;
padding-right: 10px;
height: 30px;
}
#materials {
width: 1400px;
justify-content: left;
padding-left: 10px;
}
.wrap {
min-height: 100%;
}
#top {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
z-index: 1;
background: linear-gradient(to bottom,#f8f8f8 0,#ccc 100%);
height: 45px;
top: 0;
border-bottom: #aaa solid 2px;
margin-bottom: 5px;
box-shadow: 2px 2px 4px 2px #bbb, -5px 5px 5px 5px #fff;
}
#home {
background: url(/images/home.png) left no-repeat;
padding:0 50px;
}
#materials ul {
width: 100%;
display: flex;
flex-direction: column;
}
#materials ul li {
margin: 10px 0 0 -10px;
display: inline-block;
background: none;
padding-left: 10px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
#materials ul li:hover {
background: linear-gradient(to bottom, #f8f8f8 0,#fefce6 100%) !important;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
color: #333;
}
#materials ul li a {
width: 100%;
display: block;
color: #666;
text-decoration: none;
}
#materials ul li a:hover {
text-decoration: underline blue dashed;
color: #111;
padding-left: 5px;
}
#web {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="top">
<div id="web">
<a href="https://www.xmath.cn" target="_blank">xmath<sup>®</sup>先锋数学</a>
<div id="category">栏目列表</div>
</div>
<div id="home"><a href="/index.aspx"> 回到首页</a></div>
</div>
<div id="imgContent">
<div id="playBox" class="play-box">
<div id="imgList">
<a href="#" class="current">
<span>a</span>
<img src="/images/test/1.jpg">
</a>
<a href="#">
<span>b</span>
<img src="/images/test/2.jpg">
</a>
<a href="#">
<span>c</span>
<img src="/images/test/3.jpg">
</a>
<a href="#">
<span>d</span>
<img src="/images/test/4.jpg">
</a>
<a href="#">
<span>e</span>
<img src="/images/test/5.jpg">
</a>
<a href="#">
<span>f</span>
<img src="/images/test/6.jpg">
</a>
</div>
<div id="iconList">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="slidebar slidebar_left"><</div>
<div class="slidebar slidebar_right">></div>
</div>
<div id="title">
<ul>
<li class="current">
<a href="" target="_blank">
<h2>1111111111111</h2>
<h3>1111111111</h3>
</a>
</li>
<li>
<a href="" target="_blank">
<h2>2222222222222</h2>
<h3>2222222222222222</h3>
</a>
</li>
<li>
<a href="" target="_blank">
<h2>333333333333333333</h2>
<h3>3333333333</h3>
</a>
</li>
<li>
<a href="" target="_blank">
<h2>4444444444444</h2>
<h3>4444444444</h3>
</a>
</li>
<li>
<a href="" target="_blank">
<h2>5555555555555</h2>
<h3>555555555555</h3>
</a>
</li>
<li>
<a href="" target="_blank">
<h2>66666666</h2>
<h3>66666</h3>
</a>
</li>
</ul>
</div>
</div>
<div id="materials">
<ul>
<li>
<a href="">
<h2>1</h2>
<h3>1</h3>
</a>
</li>
<li>
<a href="">
<h2>2</h2>
<h3>2</h3>
</a>
</li>
<li>
<a href="">
<h2>3</h2>
<h3>3</h3>
</a>
</li>
<li>
<a href="">
<h2>4</h2>
<h3>4</h3>
</a>
</li>
<li>
<a href="">
<h2>5</h2>
<h3>5</h3>
</a>
</li>
<li>
<a href="">
<h2>6</h2>
<h3>6</h3>
</a>
</li>
<li>
<a href="">
<h2>7</h2>
<h3>7</h3>
</a>
</li>
<li>
<a href="">
<h2>8</h2>
<h3>8</h3>
</a>
</li>
<li>
<a href="">
<h2>9</h2>
<h3>9</h3>
</a>
</li>
<li>
<a href="">
<h2>10</h2>
<h3>10</h3>
</a>
</li>
</ul>
</div>
<input id="pageIndex" type="hidden" value="1" />
</div>
<footer class="footer"><a href="https://www.staredu.cn/" target="_blank"><img src="/images/file_logo.png" title="星光教育信息科技"></a><a href="https://www.math.xyz" target="_blank"><img src="/images/file_logo_xmath.png"></a> <a href="https://www.xmath.cn" target="_blank">www.xmath<sup>®</sup>.cn </a>先锋数学 </footer>
<script src="/js/jquery.2.1.4.min.js"></script>
<script src="/js/layer/layer.js"></script>
<script type="text/javascript">
$(function () {
$("#pageIndex").val(1);
var speed = 5000;
var m = 1;
var imgCount = $("#iconList ul li").length;
var playTimer = setInterval(runPlay, speed);
function runPlay() {
if (m > imgCount - 1) m = 0;
controlPlay(m);
m++;
}
function controlPlay(n) {
$("#imgList a").removeClass("current").eq(n).addClass("current");
$("#iconList li").removeClass("current").eq(n).addClass("current");
$("#title li").removeClass("current").eq(n).addClass("current");
}
$("#playBox").mouseenter(function () {
clearInterval(playTimer);
$(".slidebar").fadeIn(300);
}).mouseleave(function () {
playTimer = setInterval(runPlay, speed);
$(".slidebar").fadeOut(300);
});
$("#iconList li").click(
function () {
m = $(this).index();
controlPlay(m);
m++;
}).hover(function () {
return false;
});
$(".slidebar").hover(function () { return false; });
$(".slidebar_right").click(
function () {
if (m > imgCount - 1) m = 0;
controlPlay(m);
m++;
});
$(".slidebar_left").click(
function () {
m -= 2;
if (m < 0) m = imgCount - 1;
controlPlay(m);
m++;
});
});
var timer;
$(window).bind('scroll',
function () {
clearTimeout(timer);
timer = setTimeout(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 5) {
// alert("已经到底部了");
var ll = layer.load(2);
var pageIndex = parseInt($("#pageIndex").val());
for (var i = 0; i < 10; i++) {
var title = pageIndex * 10 + i + 1;
setTimeout(function (t) { $("#materials").find("ul").append(' <li><a href=""><h2>' + t + '</h2><h3>' + t + '</h3></a></li>'); }, 500 * (i + 1), title);
}
$("#pageIndex").val(pageIndex + 1);
layer.close(ll);
}
},
300);
});
</script>
</body>
</html>
浙公网安备 33010602011771号