如果让图片从左向右滚动 在一个界面上,排一列图片,然后如何让图片自动从左向右滚动?求大神指点! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 您好,是从左向右,所以是向右哦css3 jq 都可以实现 控制 外边距 或者 right 负数 都可以啊 加个过渡缓冲就行了 轮播图吗,这里有个从右到左的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ margin:0; padding:0; } #div1{ width: 500px; height: 100px; margin:50px auto; border:1px solid grey; position: relative; overflow: hidden; } #div1 #ul1{ height: 100px; position: relative; } #div1 #ul1 li{ width:80px; height: 80px; border:3px double black; float: left; margin:7px; list-style: none; } #div1 #ul1 li img{ width:100%; height: 100%; } </style> <!-- <script src='../../tools.js'></script> --> <script> function $(id){ return document.getElementById(id); } function startMove(node,jsonObj, complete){//完美运动框架 clearInterval(node.timer); node.timer = setInterval(function(){ var isEnd = true; for(var attr in jsonObj){ var iTarget = jsonObj[attr]; var iCur = null; if(attr == "opacity"){ iCur = parseInt(parseFloat(getStyle(node, attr)) * 100); }else{ iCur = parseInt(getStyle(node, attr)); } var speed = (iTarget - iCur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(attr == "opacity"){ iCur += speed; node.style.opacity = iCur / 100; node.style[attr] = `alpha(opacity=$(iCur))`; }else{ node.style[attr] = iCur + speed + 'px'; } if(iCur != iTarget){ isEnd = false; } } if(isEnd){ clearInterval(node.timer); if(complete){ complete.call(node); } } },30) } function getStyle(node, cssStyle){//兼容获取class中的样式 if(node.currentStyle){ return node.currentStyle[cssStyle]; }else{ return getComputedStyle(node)[cssStyle]; } } window.onload = function(){ var lis = $("ul1").getElementsByTagName('li'); for(var i = 0; i < lis.length; i++){ var oImg = document.createElement('img'); oImg.src = `../images/${i + 1}.jpg`; lis[i].appendChild(oImg); } $("ul1").innerHTML += $("ul1").innerHTML; $("ul1").style.width = $("ul1").offsetWidth * 2 + 'px'; /*setInterval(function(){ if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){ $("ul1").style.left = 0; } var speed = 5; $("ul1").style.left = $("ul1").offsetLeft - speed + 'px'; },30)*/ /*setInterval(function(){ if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){ $("ul1").style.left = 0; } var speed = $("ul1").getElementsByTagName('li')[0].offsetWidth + 14; $("ul1").style.left = $("ul1").offsetLeft - speed + 'px'; },2000)*/ setInterval(function(){ startMove($("ul1"), { left: $("ul1").offsetLeft - $("ul1").getElementsByTagName('li')[0].offsetWidth - 14 },function(){ if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){ $("ul1").style.left = 0; } }) },2000) } </script></head><body> <div id="div1"> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div></body></html> js调用后台代码 带参 传值问题 JavaScript 异常try catch机制 JS如何取值 高分求http://www.pconline.com.cn/digital/页中的“数码世界今日焦点”下面的图片显示效果?如题! 各位大神求帮助,问题不是很复杂,但是总是没效果显示 如何用js设置文本框的值 对象为空? getAttribute如何得到style=""中的属性 一段简单代码,为什么这里的offset会叠加? checkbox 选取时判断 如何用jQuery在页面实现把一个table中的tb拖拽到另外一个table中,并且把数据添加到新的table中 咨询个组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width: 500px;
height: 100px;
margin:50px auto;
border:1px solid grey;
position: relative;
overflow: hidden;
}
#div1 #ul1{
height: 100px;
position: relative;
}
#div1 #ul1 li{
width:80px;
height: 80px;
border:3px double black;
float: left;
margin:7px;
list-style: none;
}
#div1 #ul1 li img{
width:100%;
height: 100%;
}
</style>
<!-- <script src='../../tools.js'></script> -->
<script>
function $(id){
return document.getElementById(id);
}
function startMove(node,jsonObj, complete){//完美运动框架
clearInterval(node.timer);
node.timer = setInterval(function(){
var isEnd = true;
for(var attr in jsonObj){
var iTarget = jsonObj[attr];
var iCur = null;
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
}else{
iCur = parseInt(getStyle(node, attr));
}
var speed = (iTarget - iCur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(attr == "opacity"){
iCur += speed;
node.style.opacity = iCur / 100;
node.style[attr] = `alpha(opacity=$(iCur))`;
}else{
node.style[attr] = iCur + speed + 'px';
}
if(iCur != iTarget){
isEnd = false;
}
}
if(isEnd){
clearInterval(node.timer);
if(complete){
complete.call(node);
}
}
},30)
}
function getStyle(node, cssStyle){//兼容获取class中的样式
if(node.currentStyle){
return node.currentStyle[cssStyle];
}else{
return getComputedStyle(node)[cssStyle];
}
}
window.onload = function(){
var lis = $("ul1").getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
var oImg = document.createElement('img');
oImg.src = `../images/${i + 1}.jpg`;
lis[i].appendChild(oImg);
}
$("ul1").innerHTML += $("ul1").innerHTML;
$("ul1").style.width = $("ul1").offsetWidth * 2 + 'px'; /*setInterval(function(){
if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
$("ul1").style.left = 0;
}
var speed = 5;
$("ul1").style.left = $("ul1").offsetLeft - speed + 'px';
},30)*/
/*setInterval(function(){
if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
$("ul1").style.left = 0;
}
var speed = $("ul1").getElementsByTagName('li')[0].offsetWidth + 14;
$("ul1").style.left = $("ul1").offsetLeft - speed + 'px';
},2000)*/
setInterval(function(){
startMove($("ul1"), {
left: $("ul1").offsetLeft - $("ul1").getElementsByTagName('li')[0].offsetWidth - 14
},function(){
if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
$("ul1").style.left = 0;
}
})
},2000) }
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>