jquery 想写一个图片轮播 只会jquery 选择器 能写出来吗?给个思路吧 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html><html><head><style type='text/css'>body { margin:0; padding:0; }.clearfix:after { content:','; display:block; clear:both; height:0; visibility:hidden; }.clearfix { *zoom:1; }ul,li { margin:0; padding:0; }ul { float:left; list-style:none; }ul li { float:left; width:50px; height:50px; background-color:red; text-align:center; line-height:50px; }#box { width:600px; position:absolute; top:0; }#content { width:300px; height:50px; overflow:hidden; position:relative; }ul li.two { background-color:yellow; }ul li.stree { background-color:green; }ul li.four { background-color:blue; }ul li.five { background-color:#ccc; }ul li.six { background-color:#ddd; }</style><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script><script type='text/javascript'>//版本1/*var timer;function scrolls() { var $box = $('#box'); var left = parseInt($box[0].style.left); left--; if(-left % 50 == 0) { clearInterval(timer); var time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == -300) { left = 0; } $box[0].style.left = left + 'px';}$(function() { $('#box')[0].innerHTML += $('#box')[0].innerHTML; timer = setInterval(scrolls, 50);});*///版本2var timer,time; /*function scrolls() { var $box = $('#box'); var left = parseInt($box[0].style.left); left--; if(-left % 50 == 0) { clearInterval(timer); var time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == -300) { left = 0; } $box[0].style.left = left + 'px';}*/ function scrollFun(obj) { /*function scrolls() { var $box = $('#box'); var left = parseInt($box[0].style.left); left--; if(-left % 50 == 0) { clearInterval(timer); var time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == -300) { left = 0; } $box[0].style.left = left + 'px'; }*/ function scrolls(flag) { var $box = $('#box'); var left = parseInt($box[0].style.left); var right = parseInt($box[0].style.right); if(!scrolls.data || !scrolls.data.size) { if(!scrolls.data || scrolls.data.right != 'right') { left--; if(-left % 50 == 0) { clearInterval(timer); time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == -300) { left = 0; } $box[0].style.left = left + 'px'; } else { left = parseInt($box[0].style.left); left++; if(-left % 50 == 0) { clearInterval(timer); time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == 0) { left = -300; } $box[0].style.left = left + 'px'; } } else { if(!scrolls.data || scrolls.data.right != 'right') { left--; if(-left % parseInt(scrolls.data.size.width) == 0) { clearInterval(timer); time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == -(parseInt(scrolls.data.size.width)*6)) { left = 0; } $box[0].style.left = left + 'px'; } else { left = parseInt($box[0].style.left); left++; if(-left % parseInt(scrolls.data.size.width) == 0) { clearInterval(timer); time = setInterval(function() { timer = setInterval(scrolls, 50); clearInterval(time); }, 2000); } if(left == 0) { left = -(parseInt(scrolls.data.size.width)*6); } $box[0].style.left = left + 'px'; } } } if(obj && obj.left == 'left') { scrolls.data = null; if(!obj.right || !obj.size) { timer = setInterval(scrolls, 50); } } else if(obj && obj.right == 'right') { if(obj.size) { $('#box')[0].style.left = '-' + (parseInt(obj.size.width)*6) + 'px'; } else { $('#box')[0].style.left = '-300px'; } scrolls.data = {right:'right'}; if(!obj.size) { timer = setInterval(scrolls, 50); } } if(obj && obj.size) { $('#content').css('width', (parseInt(obj.size.width)*6) + 'px'); $('#box').css('width', (parseInt(obj.size.width)*12) + 'px'); $('#box ul li').css('width', obj.size.width); scrolls.data = scrolls.data || {}; scrolls.data.size = {width:obj.size.width}; timer = setInterval(scrolls, 50); }} $(function() { $('#box')[0].innerHTML += $('#box')[0].innerHTML; scrollFun({ //right:'right', left:'left' //size:{width:'100px'} }); $('.btn').first().click(function() { clearInterval(timer); clearInterval(time); scrollFun({ left:'left' }); }); $('.btn').eq(1).click(function() { clearInterval(timer); clearInterval(time); scrollFun({ right:'right' }); });});</script></head> <body><div id='content' class='clearfix'> <div id='box' style='left:0;'> <ul> <li class='one'>1</li> <li class='two'>2</li> <li class='stree'>3</li> <li class='four'>4</li> <li class='five'>5</li> <li class='six'>6</li> </ul> </div></div><div> <button class='btn' value='向左'>向左</button><button class='btn' value='向右'>向右</button></div></body></html>参考下,给个意见 写轮播的话,js基础更重要一些,主要把setTimeout处理好就可以了。https://github.com/FishBooy/tinyWidgets这是用jquery写的,参考一下吧~ 求这种 节点流程树 的jsp和javascript代码(3个select框是联动的),急用!!!(看下图) 请问js的正则表达式可以向左预搜索吗? div模态窗口中的树形菜单问题 用js 控制MediaPlayer的问题 。。。。。在线等 急 javascript如何调用Asp函数、数组 jscript和javascript有什么区别 简单问题散分 asa文件用什么工具查看 求大神帮解密下JS代码,谢谢了,在线等待 这两个this如何理解 javascript中的事件是串行分配的么? 如何在一个框架中通过javascript置值提交另外一个框架中的表单?
<html>
<head>
<style type='text/css'>
body { margin:0; padding:0; }
.clearfix:after { content:','; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { *zoom:1; }
ul,li { margin:0; padding:0; }
ul { float:left; list-style:none; }
ul li { float:left; width:50px; height:50px; background-color:red; text-align:center; line-height:50px; }
#box { width:600px; position:absolute; top:0; }
#content { width:300px; height:50px; overflow:hidden; position:relative; }
ul li.two { background-color:yellow; }
ul li.stree { background-color:green; }
ul li.four { background-color:blue; }
ul li.five { background-color:#ccc; }
ul li.six { background-color:#ddd; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
//版本1
/*var timer;
function scrolls() {
var $box = $('#box');
var left = parseInt($box[0].style.left);
left--;
if(-left % 50 == 0) {
clearInterval(timer);
var time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == -300) {
left = 0;
}
$box[0].style.left = left + 'px';
}
$(function() {
$('#box')[0].innerHTML += $('#box')[0].innerHTML;
timer = setInterval(scrolls, 50);
});*/
//版本2
var timer,time;
/*function scrolls() {
var $box = $('#box');
var left = parseInt($box[0].style.left);
left--;
if(-left % 50 == 0) {
clearInterval(timer);
var time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == -300) {
left = 0;
}
$box[0].style.left = left + 'px';
}*/
function scrollFun(obj) {
/*function scrolls() {
var $box = $('#box');
var left = parseInt($box[0].style.left);
left--;
if(-left % 50 == 0) {
clearInterval(timer);
var time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == -300) {
left = 0;
}
$box[0].style.left = left + 'px';
}*/
function scrolls(flag) {
var $box = $('#box');
var left = parseInt($box[0].style.left);
var right = parseInt($box[0].style.right);
if(!scrolls.data || !scrolls.data.size) {
if(!scrolls.data || scrolls.data.right != 'right') {
left--;
if(-left % 50 == 0) {
clearInterval(timer);
time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == -300) {
left = 0;
}
$box[0].style.left = left + 'px';
} else {
left = parseInt($box[0].style.left);
left++;
if(-left % 50 == 0) {
clearInterval(timer);
time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == 0) {
left = -300;
}
$box[0].style.left = left + 'px';
}
} else {
if(!scrolls.data || scrolls.data.right != 'right') {
left--;
if(-left % parseInt(scrolls.data.size.width) == 0) {
clearInterval(timer);
time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == -(parseInt(scrolls.data.size.width)*6)) {
left = 0;
}
$box[0].style.left = left + 'px';
} else {
left = parseInt($box[0].style.left);
left++;
if(-left % parseInt(scrolls.data.size.width) == 0) {
clearInterval(timer);
time = setInterval(function() {
timer = setInterval(scrolls, 50);
clearInterval(time);
}, 2000);
}
if(left == 0) {
left = -(parseInt(scrolls.data.size.width)*6);
}
$box[0].style.left = left + 'px';
}
}
}
if(obj && obj.left == 'left') {
scrolls.data = null;
if(!obj.right || !obj.size) {
timer = setInterval(scrolls, 50);
}
}
else if(obj && obj.right == 'right') {
if(obj.size) {
$('#box')[0].style.left = '-' + (parseInt(obj.size.width)*6) + 'px';
} else {
$('#box')[0].style.left = '-300px';
}
scrolls.data = {right:'right'};
if(!obj.size) {
timer = setInterval(scrolls, 50);
}
}
if(obj && obj.size) {
$('#content').css('width', (parseInt(obj.size.width)*6) + 'px');
$('#box').css('width', (parseInt(obj.size.width)*12) + 'px');
$('#box ul li').css('width', obj.size.width);
scrolls.data = scrolls.data || {};
scrolls.data.size = {width:obj.size.width};
timer = setInterval(scrolls, 50);
}
}
$(function() {
$('#box')[0].innerHTML += $('#box')[0].innerHTML;
scrollFun({
//right:'right',
left:'left'
//size:{width:'100px'}
});
$('.btn').first().click(function() {
clearInterval(timer);
clearInterval(time);
scrollFun({
left:'left'
});
});
$('.btn').eq(1).click(function() {
clearInterval(timer);
clearInterval(time);
scrollFun({
right:'right'
});
});
});
</script>
</head>
<body>
<div id='content' class='clearfix'>
<div id='box' style='left:0;'>
<ul>
<li class='one'>1</li>
<li class='two'>2</li>
<li class='stree'>3</li>
<li class='four'>4</li>
<li class='five'>5</li>
<li class='six'>6</li>
</ul>
</div>
</div>
<div>
<button class='btn' value='向左'>向左</button><button class='btn' value='向右'>向右</button>
</div>
</body>
</html>
参考下,给个意见
https://github.com/FishBooy/tinyWidgets
这是用jquery写的,参考一下吧~