web前端之图片轮播特效

浏览数：31 / 时间：2015年06月09日

这周用jquery来实现网页上常见的图片轮播效果，下边是效果图：

技术分享

当我们用鼠标点击上图中的向左以及向右按钮时候，图片会发生相应的切换效果，代码如下：

index.html源代码：


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>图片轮播</title>
  <link href=‘./index.css‘ type=‘text/css‘ rel=‘stylesheet‘/>
  <script type="text/javascript" src="jquery-2.1.1.js"></script>
  <script type="text/javascript" src="index.js"></script>
 </head>
 
 <body>
 <div id="pox">
     
	 <img id=‘pre‘ src=‘./imgs/pre1.png‘/>
	 
	 <div id=‘box‘>
	 <ul id=‘ul1_1‘>
	 <li><a href=‘‘><img src=‘./imgs/1.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/2.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/3.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/4.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/5.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/6.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/7.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/8.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/9.png‘></a></li>
	 <li><a href=‘‘><img src=‘./imgs/10.png‘></a></li>
	 </ul>
	 
	 </div>
	 <img id=‘next‘ src=‘./imgs/next1.png‘/>
 </div>
 </body>
 </html>

inindex.css源代码

*{
margin:0px;
padding:0px;
}

li{
list-style:none;
}

#pox{
width:1000px;
height:130px;
border-top:2px solid blue;
border-bottom:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
margin:0px auto;
}


#ul1_1{
width:1850px;
height:110px;
margin-left:0px;
}

#ul1_1 li{
float:left;
padding-left:12px;
padding-right:12px;
margin-top:5px;
}

#pre{
float:left;
margin-left:10px;
margin-top:60px;
}

#next{
float:right;
margin-right:10px;
margin-top:-115px;
}


#box{
width:920px;
height:160px;
margin-left:40px;
margin-top:15px;
overflow: hidden;
}
#box #ul1_2{
width:1850px;
height:20px;
float:left;
margin-top:10px;
}

#box #ul1_2 li{
float:left;
padding-left:15px;
line-height:20px;
}
#box #ul1_2 li a{
color:black;

}

#box #ul1_2 li a:hover{
text-decoration:underline;
}

index.js源代码

$(function(){
	
$(‘#next‘).on(‘click‘,function(){
	var res=$(‘#ul1_1‘).css(‘margin-left‘);
	var leftNum=parseInt(res.substr(0,res.length-2));
	if(leftNum<=0&&leftNum>=-860)
    $(‘#ul1_1‘).css(‘margin-left‘,((leftNum-183)+‘px‘));
	});
	
$(‘#pre‘).on(‘click‘,function(){
	var res=$(‘#ul1_1‘).css(‘margin-left‘);
	var leftNum=parseInt(res.substr(0,res.length-2));
	if(leftNum<0){	
	   $(‘#ul1_1‘).css(‘margin-left‘,((leftNum+183)+‘px‘));
	}
});
});

　　特别说明：本实例采用jquery2.0以后的版本，如果是之前版本，可能部分函数无法使用，请自行改成之前对应函数。

图片轮播原理：首先设置一个大的div盒子，用来包括图片（只需要包括呈现出来的图片就好），就如之上图片上显示出图片的那部分（还用边框包括起来了），对应index.html代码里面id为pox的那个div。之后呢，创建两个<img>标签来显示那两个向前向后的图片（不然没法点击怎么切换啊？），将对应位置设置好就可以。再然后就创建一个ul列表来存放需要展示的十张图片（吐槽：上边怎么只显示五张？？ me：拜托，只有五张图片你切换你大头贴啊？？），然后设置之前那个id为pox的div的一个属相为溢出隐藏，也就是：overflow：hidden。这个属性的意思就是当ul的图片超出之前div时候就隐藏了，也就是说，其实十张图片都是存在的，只是超出div盒子的部分被我们隐藏了。当我们点击那两个按钮时候，只需要改变ul中呈现在盒子里面的内容就可以了，简单来说，让ul的margin-left对应增加减少就可以了。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

web前端之图片轮播特效