jq圖片左右無縫切換滾動，有定時切換。
阿新 • • 發佈：2018-12-19
<!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" />
<title>無標題文件</title>
<script src="http://code.jquery.com/jquery.js"></script>
<style>
body,ul,li{ margin:0; padding:0;}
.divbox{ width: 1000px; margin:0 auto; position: relative;}
.div_a{ width: 440px;border:1px solid #eee; margin:0 auto; position: relative; height: 100px; overflow: hidden;}
.div_a ul{ overflow:hidden; position: absolute; height: 100px;}
.div_a li{ width:110px; float:left; list-style:none; text-align:center;}
.div_a li span{ margin:0 auto;}
.pos{position: absolute;}
.next{ position: absolute; right: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
.prev{ position: absolute; left: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
</style>
<script language="javascript">
$(function(){
var ii=0;
var obj=$("#fuck")
obj.find("li").clone().appendTo("#stra");//克隆一份
var length=obj.find("li").length;
var width=obj.find("li").width();
var str=length*width;
obj.width(str);
var step=0 //定義動畫值，初始值為0,0表示動畫可以執行，1表示動畫正在執行，不能點選
var timo=setInterval(zdgd,3000); //3秒執行zdgd方法
var dbox=function(){
step=0;
if(ii==length/2){
obj.css({"left":0})
ii=0;
}else if(ii==-length/2){
obj.css({"left":0})
ii=0;
}
}
function zdgd(){
ii++
if(ii==length/2+1){
ii=1;
}else if(ii==1){
obj.css({"marginLeft":-str/2,"marginRight":0})
}
obj.animate({
left:width*ii
},dbox)
}
function zgd(ii){
obj.animate({
left:width*ii
},dbox)
}
$(".prev,.next,.pos").hover(function(){ //滑鼠移上去停止動畫，移開執行
clearInterval(timo)
},function(){
timo=setInterval(zdgd,3000);
})
$(".prev").on("click",function(){
if(step==0){
ii++
if(ii==length/2+1){
ii=1;
}else if(ii==1){
obj.css({"marginLeft":-str/2,"marginRight":0})
}
step=1;
zgd(ii)
}else{
return false;
}
})
$(".next").on("click",function(){
if(step==0){
ii--
if(ii==-1){
obj.css({"marginRight":str/2,"marginLeft":0})
}else if(ii==-length/2-1){
ii=-1;
}
step=1;
zgd(ii)
}else{
return false;
}
})
})
</script>
</head>
<body>
<div class="divbox">
<div class="div_a">
<ul id="fuck">
<div id="stra" class="pos">
<li><span style="width:100px;height:100px;background:#000;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#ff0;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#f00;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#dff;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#f00;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#dff;display:block;"></span></li>
</div>
</ul>
</div>
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script src="http://code.jquery.com/jquery.js"></script>
<style>
body,ul,li{ margin:0; padding:0;}
.divbox{ width: 1000px; margin:0 auto; position: relative;}
.div_a{ width: 440px;border:1px solid #eee; margin:0 auto; position: relative; height: 100px; overflow: hidden;}
.div_a ul{ overflow:hidden; position: absolute; height: 100px;}
.div_a li{ width:110px; float:left; list-style:none; text-align:center;}
.div_a li span{ margin:0 auto;}
.pos{position: absolute;}
.next{ position: absolute; right: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
.prev{ position: absolute; left: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
</style>
<script language="javascript">
$(function(){
var ii=0;
var obj=$("#fuck")
obj.find("li").clone().appendTo("#stra");//克隆一份
var length=obj.find("li").length;
var width=obj.find("li").width();
var str=length*width;
obj.width(str);
var step=0 //定義動畫值，初始值為0,0表示動畫可以執行，1表示動畫正在執行，不能點選
var timo=setInterval(zdgd,3000); //3秒執行zdgd方法
var dbox=function(){
step=0;
if(ii==length/2){
obj.css({"left":0})
ii=0;
}else if(ii==-length/2){
obj.css({"left":0})
ii=0;
}
}
function zdgd(){
ii++
if(ii==length/2+1){
ii=1;
}else if(ii==1){
obj.css({"marginLeft":-str/2,"marginRight":0})
}
obj.animate({
left:width*ii
},dbox)
}
function zgd(ii){
obj.animate({
left:width*ii
},dbox)
}
$(".prev,.next,.pos").hover(function(){ //滑鼠移上去停止動畫，移開執行
clearInterval(timo)
},function(){
timo=setInterval(zdgd,3000);
})
$(".prev").on("click",function(){
if(step==0){
ii++
if(ii==length/2+1){
ii=1;
}else if(ii==1){
obj.css({"marginLeft":-str/2,"marginRight":0})
}
step=1;
zgd(ii)
}else{
return false;
}
})
$(".next").on("click",function(){
if(step==0){
ii--
if(ii==-1){
obj.css({"marginRight":str/2,"marginLeft":0})
}else if(ii==-length/2-1){
ii=-1;
}
step=1;
zgd(ii)
}else{
return false;
}
})
})
</script>
</head>
<body>
<div class="divbox">
<div class="div_a">
<ul id="fuck">
<div id="stra" class="pos">
<li><span style="width:100px;height:100px;background:#000;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#ff0;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#f00;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#dff;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#f00;display:block;"></span></li>
<li><span style="width:100px;height:100px;background:#dff;display:block;"></span></li>
</div>
</ul>
</div>
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</body>
</html>