web前端之图片轮播特效

这周用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对应增加减少就可以了。