个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

用Jq实现图片轮播

发布于2017-02-14 / 564次浏览

研究了半天,熬夜写出来了!困死了,写完这就睡觉! 有空在来写分析~

Jq代码:


$(document).ready(function(){
 var flag=0;
 var show=setInterval(function(){
 flag++;
 $(".pic").animate({left:"-"+(flag)*400+"px"},500);
 if(flag>2)
 flag=-1;
 },3000);
 $("#prev").hover(function(){
 clearInterval(show);
 },function (){
 autoshow();
 });
 $("#next").hover(function(){
 clearInterval(show);
 },function (){
 autoshow();
 });
 $("#prev").click(function(){
 if((flag-1)<0)
 flag=4;
 $(".pic").animate({left:"-"+(--flag)*400+"px"},500);
 });
 $("#next").click(function(){
 if((flag+1)>3)
 flag=-1;
 $(".pic").animate({left:"-"+(++flag)*400+"px"},500);
 });
 
 $(".num li").hover(function(){
 var _num=$(this).find("span").text();
 clearInterval(show);
 $(".pic").animate({left:"-"+(--_num)*400+"px"},500);
 },function(){
 autoshow();
 });

 function autoshow(){
 show=setInterval(function(){
 flag++;
 $(".pic").animate({left:"-"+(flag)*400+"px"},500);
 if(flag>2)
 flag=-1;
 },3000)};
 });

css代码:


*{
	margin:  0;
	padding: 0;
}
ul,li{
	list-style: none;
}
.pic img{
	height: 200px;
	width: 400px;
	z-index: 1;
}
.pic{
	height: 200px;
	width: 1600px;
	position: relative;
}
span{
	display: none;
}
.num {
	position: relative;
	top:-80px;
	left: 140px;
}
.num li{
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 5px;
	float: left;
	cursor: pointer;
}
.num li:hover{
	transform: scale(1.5);
}
li{
	float: left;
}
.img{
	overflow: hidden;
	width: 400px;
    height: 200px;
}
.banner{
	height: 200px;
	width: 400px;
	overflow: hidden;
	position: relative;
	margin: 30px auto;
}
#prev{
	z-index: 10;
	position: relative;
	top:-120px;
}
#next{
	z-index: 10;
	position: relative;
	top:-120px;
	left:330px;
}

html代码:


<div class="wrap">
 <div class="banner">
 <ul class="pic">
 <li><img src="images/demo1.jpg"></li>
 <li><img src="images/demo2.jpg"></li>
 <li><img src="images/demo3.jpg"></li>
 <li><img src="images/demo4.jpg"></li>
 </ul>
 <img id="prev" src="images/prev.png">
 <img id="next" src="images/next.png">
 <ul class="num">
 <li><img src="images/circle.png"><span>1</span></li>
 <li><img src="images/circle.png"><span>2</span></li>
 <li><img src="images/circle.png"><span>3</span></li>
 <li><img src="images/circle.png"><span>4</span></li>
 </ul>
 </div>
</div>

喜欢 0
TAGS:  暂无标签
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 用Jq实现图片轮播

暂无评论