JQ图片轮播

最新推荐文章于 2023-05-23 10:54:11 发布

aoyinyan3561

最新推荐文章于 2023-05-23 10:54:11 发布

阅读量66

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guarda/p/6409952.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style type="text/css">
*{margin:0;padding:0;border:none;}
.menu{ width:871px; height:298px; margin:0 auto; overflow:hidden; position:relative }
.menu .pic{ width:4355px; height:298px; }
.menu .pic img{ float:left;}
.menu .btleft,.menu .btright{width:37px;height:40px;position:absolute;top:129px;cursor:pointer;}
.menu .btleft{left:0px; background:url(pic/arrowl.png)}
.menu .btright{right:0px;background:url(pic/arrowr.png)}

.menu .ss{ width:100px; height:20px; position:absolute; top:268px; left:400px;}
.menu .ss span{ display:block; margin-right:5px; width:20px; height:20px; background:rgba(102,102,102,0.8); float:left; border-radius:50%;text-align:center;line-height:20px;color:#ccc;cursor:pointer;}
.menu .ss span:nth-of-type(1){ background:rgba(255,0,0,1);}
.menu .ss span:hover{color:#fff;}

</style>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
var num=0;
$(function(){
img=$(".menu .pic img");
len=img.length;
$(".menu .pic").width(len*871);//给对象赋宽度值/整个图片的一个宽度
pic=$(".menu .pic");
btleft=$(".menu .btleft");
btright=$(".menu .btright");
bt=$(".menu .ss span");
$("span,.btright,.btleft").mouseover(function(){
clearInterval(tt);
clearInterval(tt1);
})

bt.mouseout(function(){
tt=setInterval(ch1,2000);
});

btleft.mouseleave(function(){
tt=setInterval(ch1,2000);
});
btright.mouseleave(function(){
tt1=setInterval(ch2,2000);
});

bt.click(function(){
num=$(this).index();
tab(num);
});
//左边按钮点击事件
btleft.click(function(){
ch1();
});
//右边按钮点击事件
btright.click(function(){
ch2();
});

})
function ch1(){
num++;
if(num==len){
num=len/2;
var dd=(num-1)*(-871)+"px";
pic.css("marginLeft",dd);
}
tab(num);
}
function ch2(){
num--;
if(num==-1){
var dd=(len/2)*(-871)+"px";
pic.css("marginLeft",dd);
num=(len/2)-1;
}
tab(num)
}
function tab(n){
var ss=n*(-871)+"px";
pic.animate({marginLeft:ss},"slow");
var ss=n;
if(ss>=4){ss=ss-4;}
bt.css("background","rgba(102,102,102,0.8)").eq(ss).css("background","rgba(255,0,0,1)")
}
var tt=tt1=setInterval(ch1,2000);

</script>

</head>
<body>
<div class="menu">
<div class="btleft prev"></div> 
<div class="btright next"></div> 
<div class="pic">
<img src="pic/1.jpg" />
<img src="pic/2.jpg" />
<img src="pic/3.jpg" />
<img src="pic/4.jpg" />
<img src="pic/1.jpg" />
<img src="pic/2.jpg" />
<img src="pic/3.jpg" />
<img src="pic/4.jpg" />
</div>
<div class="ss">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/guarda/p/6409952.html

aoyinyan3561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ图片轮播

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换</title> <style type="text/css"> *{margin:0;padding:0;border:none;} .menu...
复制链接

扫一扫