A-A+

jquery焦点图切换(待提高)

2015年10月21日 JavaScript 暂无评论 阅读 71 次

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jquery焦点图切换(待提高)</title>
<style>
*{padding:0;margin:0}
ul{overflow: hidden;height:400px;}
li{float:left;height:400px;display: block;width: 1200px}
img{width:1200px;height:400px;}
.out{width:1200px;margin:0 auto;overflow: hidden;position: relative}
.lr{position: relative;width:100%;height:100%}
.left{
position: absolute;left:5px;top:200px;color:white;
}
.right{ position: absolute;right:5px;top:200px;color:white;}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="out">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>

<i class="left">left</i>
<i class="right">right</i>

</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
var owidth = $(".out").width();
var olen =$("ul li").length;
var oul = owidth * olen;
var nowleft =0;
var rtime,ltime;
$(".left").click(function(){
clearTimeout(rtime);
ltime = setInterval("autoleft()",3000);
});

$(".right").click(function(){
clearTimeout(ltime);
rtime =setInterval("autoright()",3000);
});

function autoleft() {
$("ul").css("width", oul + "px")
.animate({marginLeft: "-="+owidth + "px"},"slow", function () {
$(this).css("margin-left", "0").find("li:first").appendTo(this);
})
.hover(function () {
$(this).stop(true, false)
});

}

function autoright(){
$("ul").css("width", oul + "px")
.animate({marginRight: "-="+owidth}, "slow", function () {
$(this).css("margin-right", "0").find("li:last").prependTo(this);
})
.hover(function () {
$(this).stop(true, false)
});
}

////          等于-3600的时候
////            if(nowleft<0 || (nowleft== -(olen-1)*owidth)){
////                nowleft= 0;
////等于3600的时候
////            }else if(nowleft ==(olen-1)*owidth){
////                nowleft= 0;
////            }
//            console.log("当前左侧:"+nowleft);
//            //默认 margin-left 转为赋值 想左侧移动
//            $("ul").css("width",oul+"px").animate({marginLeft:-nowleft+"px"},100).hover(function(){
//                $(this).css("margin-left","0").stop(true, false).find("li:first-child").appendTo($("ul"));
//            });
////            nowleft +=owidth;
////
////            console.log("j计算后左侧:"+nowleft);

setInterval("autoright()",3000);
</script>
</body>
</html>

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录