jq-仿(博看文思官网就业学员效果)原理做的效果
只仿了原理,所以不喜欢误喷,自行更改jq路径
<!DOCTYPE>
<html>
<head>
<title> New Document </title>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
.bigdiv{width:500px;height:300px;border:1px solid red;overflow-x:hidden;margin:0px auto;overflow-y:hidden;}
.imglist{height:90px;width:1500px;float:left;}
.divone{width:500px;height:300px;background:#000;color:#fff;font-size:50px;float:left;}
.btn{width:50px;height:50px;bordeR:1px solid red;}
</style>
</head>
<body>
<div class="bigdiv" id="bigdiv">
<div class="imglist" id="imglist">
<div class="divone">1</div>
<div class="divone">2</div>
<div class="divone">3</div>
</div>
</div>
<div class="btn" id="leftbtn">left</div>
<div class="btn" id="rightbtn">right</div>
</body>
<script type="text/javascript">
<!--
var divone = document.getElementById("imglist").getElementsByTagName("div");
var bigdiv = document.getElementById("bigdiv");
var leftbtn = document.getElementById("leftbtn");
var rightbtn = document.getElementById("rightbtn");
var divwidth = divone[0].offsetWidth;
var n = 0;
var m = divone.length - 1;
var time1;
var time2;
test1();
//左右按钮点击效果
leftbtn.onclick = lbtn;
rightbtn.onclick = rbtn;
$("#bigdiv").hover(function() {
clearInterval(time1);
},
function() {
time2 = setTimeout(test1, 3000)
}
);
function test1() {
time2&&clearTimeout(time1);
time1 = setInterval(run1, 5000)
}
function run1() {
if (++n > m) {
n = 0
}
run2(n * divwidth)
}
//传进来一个值 让scroll执行动画
function run2(aaa) {
$("#bigdiv").animate({
scrollLeft: aaa
}, 300)
}
function lbtn() {
if (--n < 0) {
n = m
}
run2(n * divwidth);
}
function rbtn() {
if (++n > m) {
n = 0
}
run2(n * divwidth);
}
//-->
</script>
</html>
1、cookie js案例
2、基础安全术语科普（三）——RAT
3、JIRA + FishEye + Crucible + Confluence + PostgreSQL
4、Android4.1源码 下载咯
5、19.11.20课堂笔记（html+css）