切换页面一段时间后，再切回来轮播图使劲滚！
切换页面一段时间后，再切回来轮播图使劲滚！求大神帮忙解决，快快。拜托
穷仔仔3432743
2016-10-27
4 回答
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
float: left;
/*display: none;*/
}
ul li a {
draggable: false;
}
img {
vertical-align: top;
draggable: false;
-webkit-tap-highlight-color:transparent;
}
#box {
position: relative;
width: 520px;
height: 280px;
border: 1px solid #666;
/*padding: 5px;*/
margin: 200px auto;
overflow: hidden;
}
#slider {
width: 520px;
height: 280px;
position: relative;
}
ul {
width: 1000%;
position: absolute;
left: 0;
top: 0;
}
ol {
/*width: 200px;*/
/*height: 20px;*/
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
ol li {
float: left;
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: silver;
color: #fff;
text-align: center;
margin: 5px;
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.current {
background-color: orange;
}
</style>
</head>
<body>
<div id="box">
<div id="slider">
<ul>
<li><a href="" ondragstart='return false;'><img src="images/01.jpg" alt=""/></a></li>
<li><a href=""><img src="images/02.jpg" alt=""/></a></li>
<li><a href=""><img src="images/03.jpg" alt=""/></a></li>
<li><a href=""><img src="images/04.jpg" alt=""/></a></li>
<li><a href=""><img src="images/05.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
<script>
// document.ondragstart=function(e){
// e.preventDefault();
// return false;
// }
//
// document.onselectionchange =function(e){
// e.preventDefault();
// return false;
// }
let box = document.getElementById("box");
let slider = document.getElementById("slider");
let ul = slider.children[0];
ul.appendChild(ul.children[0].cloneNode(true));
let ulLis = ul.children;
let ol = document.createElement("ol");
box.appendChild(ol);
for ( let i = 0; i < ulLis.length - 1; i++) {
let li = document.createElement("li");
ol.appendChild(li);
li.innerText = i + 1;
}
let olLis = ol.children;
olLis[0].className = "current";
function animate(obj, target) {
if(obj.timer){
clearInterval(obj.timer);
}
let speed = target > obj.offsetLeft ? 10 : -10;
obj.timer = setInterval(function() {
obj.style.left = obj.offsetLeft + speed + "px";
let result = target - obj.offsetLeft;
if(Math.abs(result) <= 10) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
}, 10)
}
for (let i = 0; i < olLis.length; i++) {
olLis[i].index = i;
olLis[i].onclick = function () {
for (let i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
this.className = "current";
animate(ul, -this.index * 520);
// ul.style.left=-this.index * 520+'px';
squre = key = this.index;
}
}
let timer = null;
let key = 0;
let squre = 0;
timer = setInterval(autoplay,1000);
document.addEventListener('visibilitychange',function(){ //浏览器切换事件
if(document.visibilityState=='hidden') { //状态判断
// timer = null;
clearInterval(timer);
}else {
timer = setInterval(autoplay,1000);
// key++;
//// alert(key,squre);
// timer;
// if (key > ulLis.length - 1) {
// ul.style.left = 0;
// key = 1;
// }
// animate(ul, -key * 520);
// squre++;
// if (squre > olLis.length -1) {
// squre = 0;
// }
// for (let i = 0; i < olLis.length; i++) {
// olLis[i].className = "";
// }
// olLis[squre].className = "current";
}
});
document.addEventListener('visibilitychange',function() { //浏览器切换事件
if (document.visibilityState == 'visible') { //状态判断
// timer = null;
timer;
}
})
function autoplay () {
// console.log(1);
// let jilu = location.href;
// if (location.href !== jilu) {
// return;
// }
key++;
if (key > ulLis.length - 1) {
ul.style.left = 0;
key = 1;
}
animate(ul, -key * 520);
squre++;
if (squre > olLis.length -1) {
squre = 0;
}
for (let i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[squre].className = "current";
}
box.onmouseover = function() {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(autoplay, 1000);
}
slider.ondragstart = function () {
return false;
}
// window.onload = function () {
//// clearInterval(obj.timer);
// ul.style.display = "show";
// }
</script>
</html>css和js都在一个页面上写着,html结构中的图片路径自己改一下应该就能看到效果了
举报
0/150
提交
取消
