js修改css

小刘哈哈 2012-07-17 11:48:58
如题：在ul下有li 里面是图片左右点击、左右滚动的，一次滚全屏6张 问题是：我第一次点击按钮、图片可以滚动6张之后点击就只能滚动一张了 document.getElementById ("goleft").style.left="-1375"; 我怀疑是第一次点击后修改了css使其style.left="-1375" 之后就不再修改css了 我想做的是每次点击都可以修改下这个css使其滚动6张 希望大牛们可以给我点思路或者代码？谢谢了....
...全文
231 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
dxphero 2012-07-17
  • 打赏
  • 举报
 回复
document.getElementById ("goleft").style.left=-1375
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]
document.getElementById ("goleft").style.left="-1375px"

px不能省
[/Quote]

加上了 px 还是一样啊 ！
孟子E章 2012-07-17
  • 打赏
  • 举报
 回复
document.getElementById ("goleft").style.left="-1375px"

px不能省
bonlog 2012-07-17
  • 打赏
  • 举报
 回复
第一，为什么一定要使用负值，你要知道有的浏览器不兼容的。
第一，还有使用display的方法较为经典。
104915562 2012-07-17
  • 打赏
  • 举报
 回复
结贴吧
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
非常感谢 lizhengdao1314 你的方法很好用 谢谢了...
lizhengdao1314 2012-07-17
  • 打赏
  • 举报
 回复
右移动
function turnRight() {
var scrollimg = $("#scrollimglist");
if (scrollimg.css("margin-left") == "0px") {
var lastLiIndex=scrollimg.children().size()-1;
var footli = scrollimg.children().slice(lastLiIndex-6, lastLiIndex).clone(); scrollimg.prepend(footli).css("margin-left", "-1375px");
scrollimg.animate({ marginLeft: "+=" + 1375 }, "slow", "swing", function() { scrollimg.css("margin-left", "-1375px"); for (i = 0; i < 6; i++) { scrollimg.children().eq(0).remove(); } });
}
else { $("#scrollimglist").animate({ marginLeft: "+=" + 1375 }, "slow", "swing"); }
}
刚才的左移动是循环六次，因你要移动6张图片.
for (i = 0; i < 6; i++) { $("#scrollimglist li:last").remove(); }
lizhengdao1314 2012-07-17
  • 打赏
  • 举报
 回复
左移动
function turnLeft() {
var scrollimg = $("#goleft");
if (scrollimg.css("margin-left") != "0px") {
var headli = scrollimg.children().slice(0, 6).clone(); scrollimg.append(headli);
scrollimg.animate({ marginLeft: "-=" + 1375 }, "slow", "swing", function() { scrollimg.css("margin-left", "0px"); for (i = 0; i < 4; i++) { $("#scrollimglist li:last").remove(); } });
}
else { scrollimg.animate({ marginLeft: "-=" + 1375 }, "slow", "swing"); }
}
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
这是html
<div class="content_left_down_one">
<div class="content_left_down_one_title">  Platinum Member Recommendation</div>
<div class="content_left_down_one_piclist">
<div class="prev">
<a target="_blank" style="cursor:hand;" fg="Platinumprodleftmove" id="turnLeft">
<img src="/template/skin/1/img/job_mj_068.gif" width="30" height="30" align="absmiddle" />
</a>
</div>
<div class="content_left_down_one_piclist_pic" id="Platinumprod">
<ul id="goleft">
<%for (int ni = 0; ni < dt_platinumprodrecommend.Rows.Count; ni++){%>
<li>
<a target="_blank" class="lineimg" href='/<%=dt_platinumprodrecommend.Rows[ni]["Username"].ToString() %>/product/<%=Hong.Utility.Utils.TitleToUrl(dt_platinumprodrecommend.Rows[ni]["Productname"],25) %>-<%=dt_platinumprodrecommend.Rows[ni]["Tabsellid"].ToString() %>.shtml' title='<%=dt_platinumprodrecommend.Rows[ni]["Productname"] %>'>
<%
if (dt_platinumprodrecommend.Rows[ni]["Thumbnail"] != null && dt_platinumprodrecommend.Rows[ni]["Thumbnail"].ToString() != "")
{
%>
<img onerror="showError(this)" width="90px" height="90px" src='<%=dt_platinumprodrecommend.Rows[ni]["Thumbnail"].ToString() %>' alt='<%=dt_platinumprodrecommend.Rows[ni]["Productname"].ToString() %>' />
<%
}
else
{
%>
<img src="/template/images/NoPic.gif" onerror="showError(this)" width="90px" height="90px" />
<%
}

%>
<%-- <img onerror="showError(this)" src='<%=dt_platinumprodrecommend.Rows[ni]["Thumbnail"].ToString() %>' alt='<%=dt_platinumprodrecommend.Rows[ni]["Productname"].ToString() %>' />--%>
</a>
<a target="_blank" href='/<%=dt_platinumprodrecommend.Rows[ni]["Username"].ToString() %>/product/<%=Hong.Utility.Utils.TitleToUrl(dt_platinumprodrecommend.Rows[ni]["Productname"],25) %>-<%=dt_platinumprodrecommend.Rows[ni]["Tabsellid"].ToString() %>.shtml' title='<%=dt_platinumprodrecommend.Rows[ni]["Productname"].ToString() %>'><%=dt_platinumprodrecommend.Rows[ni]["Productname"].ToString()%></a>
</li><%}%>
</ul>
</div>
这是css

.content_left_down_one_piclist_pic {
float: left;
height:138px;
width: 640px; _width:634px;
overflow:hidden;
position:relative;
}

.content_left_down_one_piclist_pic ul{list-style:none;width:954px; position:relative;}

lizhengdao1314 2012-07-17
  • 打赏
  • 举报
 回复
把你的HTML代码贴出来看看，看下你到底是要那块区域要移动。CSS最好也一并贴出来。
不过觉得你后面是自己改的吧，前面都有JQUERY，后面还可以用啊，改成这样看看，
$("#goleft").animate({left:"-="+1375},600);这样试试看，因还不知你具体是要那块区域移动的效果。
work_fei 2012-07-17
  • 打赏
  • 举报
 回复
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>图片左右滚动</title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
var i=0;
var li = $(".lxfscroll li");
var n=li.length-1;
var speed = 300;
li.not(":first").css({left:"400px"});
li.eq(n).css({left:"-400px"});
lxfNext=function (){
if (!li.is(":animated")) {
if (i>=n){
//i=0;
li.eq(n).animate({left:"-400px"},speed);
li.eq(i).animate({left:"0px"},speed);
}
else{
i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);};
li.not("eq(i)").css({left:"400px"});
$("i").text(i+1);
}
else{};
};
lxfLast=function (){
if (!li.is(":animated")) {
if (i<=0){
//i=n;
li.eq(0).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);
//li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);
}
else{
i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);}
li.not("eq(i)").css({left:"-400px"});
$("i").text(i+1);
};
};
});
</script>
<style type="text/css">
* {
font-size:12px;
color:#333;
text-decoration:none;
padding:0;
margin:0;
list-style:none;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
.lxfscroll {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 300px;
border: 1px dashed #CCC;
}
.button {
margin-right:auto;
margin-left:auto;
width:400px;
text-align:center;
padding-top: 10px;
}
i {
color:#F00;
font-weight:bold;
}
.button input {
padding-top: 4px;
padding-right: 12px;
padding-bottom: 4px;
padding-left: 12px;
}
.lxfscroll ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
position: absolute;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="lxfscroll">
<ul>
<li>我是第1张图片</li>
<li>我是第2张图片</li>
<li>我是第3张图片</li>
<li>我是第4张图片</li>
<li>我是第5张图片</li>
<li>我是第N张图片</li>
</ul>
</div>
<div class="button">
<input name="a" type="button" onClick="lxfLast()" value="上一个" />
<input name="a" type="button" onClick="lxfNext()" value="下一个" />
</div>
<div class="button">当前显示的是第 <i>1</i> 张图片</div>
</body>
</html>
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 的回复:]
$('#goleft').css('left',-1375*2)
$('#goleft').css('left',-1375*3)
[/Quote]

孟哥 按你说的 做法 点击左按钮 图片全部向左移动之后就剩下空白了
孟子E章 2012-07-17
  • 打赏
  • 举报
 回复
$('#goleft').css('left',-1375*2)
$('#goleft').css('left',-1375*3)
孟子E章 2012-07-17
  • 打赏
  • 举报
 回复
document.getElementById ("goleft").style.left=-1375
这是固定的了。你可以

document.getElementById("goleft").style.left=-1375*2 + "px"
呢
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 的回复:]
你一直在这个位置上，滑动图片不是个静态值，这个写法不可行，现在网上有好多js效果你可以去找个
[/Quote]

那你能给个代码我参考下吗？我找了很久都没发现可用的资源啊！
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 的回复:]
贴你的全部代码
[/Quote]

这是核心的js代码：

function turnLeft(){
$("#turnLeft").unbind("click");
var ul= $("#Platinumprod>ul").get(0);
var div=$("#Platinumprod").get(0);

var lpx= ul.offsetLeft-106*6;

$("#Platinumprod>ul").animate({left: lpx}, "slow",'linear',function(){
$("#Platinumprod>ul").append( $("#Platinumprod>ul>li").eq(0).clone());
$("#Platinumprod>ul>li").eq(0).remove();
document.getElementById ("goleft").style.left=-1375;
$("#turnLeft").bind("click",turnLeft);

});
}
dxphero 2012-07-17
  • 打赏
  • 举报
 回复
你一直在这个位置上，滑动图片不是个静态值，这个写法不可行，现在网上有好多js效果你可以去找个
小刘哈哈 2012-07-17
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 的回复:]
自己做图片的滑动？
[/Quote]


嗯 是的 js代码核心是这样的：
function turnLeft(){
$("#turnLeft").unbind("click");
var ul= $("#Platinumprod>ul").get(0);
var div=$("#Platinumprod").get(0);

var lpx= ul.offsetLeft-106*6;

$("#Platinumprod>ul").animate({left: lpx}, "slow",'linear',function(){
$("#Platinumprod>ul").append( $("#Platinumprod>ul>li").eq(0).clone());
$("#Platinumprod>ul>li").eq(0).remove();
document.getElementById ("goleft").style.left=-1375;
$("#turnLeft").bind("click",turnLeft);

});



}
天下在我心 2012-07-17
  • 打赏
  • 举报
 回复
自己做图片的滑动？
孟子E章 2012-07-17
  • 打赏
  • 举报
 回复
贴你的全部代码
加载更多回复（4）
如何用JavaScript实现动态修改CSS样式表
如何用JavaScript实现动态修改CSS样式表？下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧
级联菜单修改 js css
菜单 menu JavaScript css js div 下拉级联菜单 菜单 menu JavaScript css js div 下拉级联菜单
javascript 动态修改css样式方法汇总(四种方法)
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧
jQuery ui Datepicker日期插件
jquery的日期插件Datepicker，这两天正好研究完了，将研究结果分享下，单独的封装汉化版本，都有注释，好修改也好使用，注意保持images里面图片的名称和路径，red-datepicker.css可以定义日期div的样式，我自己在源...
JavaScript修改Css样式
javascript修改css
.NET社区

62,041

社区成员

669,051

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章