您的位置：首页 > Web前端 > JQuery

jquery轮播图

2015-11-12 17:28 615 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery轮播图</title>
<style>
*{margin:0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
html,body {
width: 100%;  /*设置body，html宽度为全屏*/
}
body {
font: 16px/20px 'Microsoft yahei,微软雅黑';
color: #aacc25;
}
.clear:before,.clear:after {
content: "";
display: table;
clear: both;
height: 0;
overflow: hidden;
}
.all {
width: 100%; /*容器为body宽度*/
height: 560px;
margin: 0 auto;
overflow: hidden;
}
ul {
list-style: none;
width: 400%;
position: relative; /*设置相对定位，小圆点相对此元素进行绝对定位*/
height: 100%;   /*为ul设置高度，防止img超出高度*/
z-index: 333;
}
ul li {
position: relative; /*li相对定位，方便设置其left值*/
left: 0;
top: 0;
float: left;
width: 25%;
/*   transition: left 1s;*/
}
ul li img {
display:block;
width: 100%;
height: 100%;
}
.all p {
position: absolute;
left: 25px;
bottom: 15px;

}
.all p span {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
-moz-border-radius: 50%;
background: #777777;
margin-right: 15px;
cursor: pointer;
z-index: 9999;
}
p span.current {
background: #006688;
cursor:default;
}
</style>
</head>
<body>
<div class="all">
<ul class="clear">
<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>
<p><span class="current"></span><span></span><span></span><span></span></p>
</ul>

</div>
<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script>
var isRight=false,currentIndex= 0,distance=$(document).width(),isFast=false,speed=2000;
$("body").width(distance);
//alert("当前文档的宽度是："+distance);
var liLength=$("ul li").length;
var moveImg=null;
$(function(){
var  $target=$("ul li");
/*开启自动轮播*/
function start(){

moveImg=setInterval(function(){
//点击的点的索引大于当前的索引就是向右，否则向左
if(currentIndex>=0&¤tIndex<liLength-1){
move($target);
currentIndex++;
}
else if(currentIndex==0){
$target.animate({"left":distance*3},500);
currentIndex=3;
}else if(currentIndex==3){
$target.animate({"left": 0},500);
currentIndex=0;
}
$("p span").eq(currentIndex).addClass("current").siblings().removeClass("current");
},speed);
if(isFast){
speed=2000;
}
console.log("speed:"+speed);
}

/*移动*/
function move(obj){
distance=isRight?distance:(-Math.abs(distance)); //Math.abs(distance);保证此数是正数。使用-distance会把全局的distance变为负数,导致distance得到的值不对
var leftDistance=distance*(currentIndex+1);
$(obj).animate({"left":leftDistance},500);
}
//当鼠标移动到li上时停止移动
$target.hover(function(){
clearInterval(moveImg);
},function(){
start();
});
/*点击小圆点时触发事件*/
$("p span").click(function(){
//判断点击的是不是带有current样式的点
var $this=$(this);
if(!$this.hasClass("current")){
/*判断左移还是右移动*/
$target.stop();
var thisIndex=$this.index();
isRight=thisIndex>currentIndex?false:true;//如果当前点击的索引大于currentIndex则是右移动，否则左移动
currentIndex=thisIndex-1;
isFast=true;
speed=1000;
}
else {
return false;
}
});

$(window).resize(function(){
distance=$(document).width();
});
start();
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航