极客观点
项目管理
HarmonyOS
我直接代码吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="js/commen.js" type="text/javascript"></script>
<title>轮播</title>
<style>
body,
html {
margin: 0;
height: 0;
width: 100%;
height: 100%;
clear: both;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.parent {
height: 200px;
}
.carousel {
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.carousel ul {
height: 100%;
max-height: 100%;
width: auto;
display: block;
position: relative;
}
.car_list {}
.carousel ul li {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
position: absolute;
float: left;
}
.carousel ul li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="carousel">
<ul class="car_list">
<li class="car_item">
<img src="img/cof.jpg" />
</li>
<li class="car_item">
<img src="img/m_bar8.jpg" />
</li>
<li class="car_item">
<img src="img/m_bar9.jpg" />
</li>
<li class="car_item">
<img src="img/m_bar10.jpg" />
</li>
<!--<li class="car_item">
<img src="img/m_bar11.jpg" />
</li>
<li class="car_item">
<img src="img/m_bar12.jpg" />
</li>
<li class="car_item">
<img src="img/m_bar13.jpg" />
</li>-->
</ul>
</div>
</div>
<div class="dorp_btn">
<input type="button" id="prove" value="<"/>
<input type="button" id="next" value=">"/>
</div>
<script>
window.onload = function() {
var parent = document.getElementsByClassName("carousel")[0].parentNode;
var list = document.getElementsByClassName("carousel")[0].children[0];
var item = list.children;
var LEN = item.length;
var I = 1;
var prove=document.getElementById("prove");
var next=document.getElementById("next");
var attrStyle = function(elem, attr) { //获取样式
if(elem.attr) {
return elem.style[attr];
} else if(elem.currentStyle) {
return elem.currentStyle[attr];
} else if(document.defaultView && document.defaultView.getComputedStyle) {
attr = attr.replace(/([A-Z])/g, '-$1').toLowerCase();
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(attr);
} else {
return null;
}
}
if(parent.tagName != "BODY") {
var height = parseInt(attrStyle(parent, "height"));
var width = parseInt(attrStyle(parent, "width"));
setStyle(width, height);
} else {
var width = window.screen.width;
var width = 100;
setStyle(width, height);
}
function setStyle(width, height) {
list.style.cssText = "width:" + len * width + "px;height:" + height + "px;";
for(var i = 0, len = item.length; i < len; i++) {
(function(i) {
item[i].style.cssText = "left:" + (i-1) * width + "px;" + "width:" + width + "px;";
})(i)
}
}
var timer = setTimeout(run, 1000);
function run() {//默认是向后走
if(I < LEN + 1) {
runSetNext();
// runSetProve();
} else {
I = 1;
// runSetProve();
runSetNext();
}
I++;
setTimeout(run, 1000);
}
timer;
function runSetNext() {//向后走
for(var i = 0, len = item.length; i < len; i++) {
if(I < LEN) {
if((i - I) * width >= -width) {
item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * (i - I) + "px;";
// item[i].style.left=width * (i - I) + "px";
} else {
item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * ((len - I) + i) + "px;";
// item[i].style.left=width *((len - I) + i)+ "px";
}
} else if(I == LEN) {
if((i - I) * width >= -width) {
item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * (i - I) + "px;";
// item[i].style.left=width * (i - I) + "px";
} else {
item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * ((len - I) + i) + "px;";
// item[i].style.left=width *((len - I) + i)+ "px";
}
} else if(I == LEN + 1) {
if(width * (i - I) >= -width) {
item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * (i - I) + "px;";
// item[i].style.left=width * (i - I) + "px";
} else {
item[i].style.cssText = "transform: translateX(0);transition:all 350ms;left:" + width * ((len - I) + i) + "px;";
// item[i].style.left=width *((len - I) + i)+ "px";
}
}
}
}
function runSetProve(){//向前走
for(var i = 0, len = item.length; i < len; i++) {
if(I < LEN) {
if((i + I) * width <= (len-1)*width) {
item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i + I)-1) + "px;";
} else {
item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i-len - 1) + I) + "px;";
}
} else if(I == LEN) {
if((i + I) * width <= (len-1)*width) {
item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i + I)-1) + "px;";
} else {
item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i-len - 1) + I) + "px;";
}
} else if(I == LEN + 1) {
if((i + I) * width <= (len-1)*width) {
item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i + I)-1) + "px;";
} else {
item[i].style.cssText = "transform: translateX(-360px);transition:all 350ms;left:" + width * ((i-len - 1) + I) + "px;";
}
}
}
}
next.onclick=function(){
return runSetNext();
}
prove.onclick=function(){
return runSetProve();
}
}
</script>
</body>
</html>图片能跑（默认向前或者默认向后，单独的跑一点问题没有），就是在默认向后跑的情况下，按了上一张（触发向前跑）就出问题--理论上应该是向前跑，然后再在当前的位置再默认向后跑，可是它仍然是以未触发向前跑之前的顺序向后跑，那么反应在页面上的效果就是感觉按了想前一次的时候，再次向后跑的时候，它会中间跳过一次（这一次被向前所占用了），不知道我的意思表述明白没有，请问大神，该怎么解决这个情况？
mark后面看看，如果实在急用，推荐superslide，非常方便。