幻灯片切换

这是完整的代码
<html>
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<script src="JS/jquery-1.8.3.min.js"></script>
	<style>
		*{padding:0;margin:0}
		html,body,div{
			font:normal normal 13px/24px SimSun,MicroSoft YaHei;
			color:#333;
		}
		html,body{
			height:100%;
		}
		h1,h2,h3,h4,h5,h6{
			font-size:100%;
			font-weight:normal;
		}
		ul,li,ol,dl,dt,dd{
			list-style:none;
			margin:0;
			padding:0;
		}
		header,nav,section,article,footer,aside{
			display:block;
		}
		.clearfix{
			zoom:1;
		}
		.clearfix:after{
			display:block;
			content:"";
			overflow:hidden;
			clear:both;
		}
		
		.wrapper{
			margin:0 auto;
			height:100%;
		}
		
		.pageContent{
		margin-left:210px;
		height:100%;
		}
		.pic{
			position:relative;
			width:700px;
			height:300px;
			overflow:hidden;
			border:1px #ddd solid;
			margin:10px;
		}
		.pic .sildebar{
			width:100%;
			position:absolute;
			top:0;
			height:298px;
		}
		.pic .sildebar li{
			float:left;
			width:700px;
			overflow:hidden;
			height:100%;
		}
		img{border:none;}
		.focusBox {
		position: absolute;
		bottom: 20px;
		width: 120px;
		left: 50%;
		margin-left: -60px;
		}
		.focusBox li{
			float:left;
			margin-right:10px;
			width:10px;
			height:10px;
			border-radius:10px;
			background:#fff;
			cursor:pointer;
		}
		.focusBox li.cur{
			background:#f60;
			opacity:0.6;
			filter:alpha(opacity=60);
		}
		.btn-focus{
			position:absolute;
			display:block;
			width:60px;
			height:30px;
			background-color:#000;
			opacity:0;
			filter:alpha(opacity=0);
			text-align: center;
			color:#fff;
			line-height:30px;
			text-decoration:none;
		}
		.prev{
			left:2px;
			top:50%;
		}
		.next{
			right:2px;
			top:50%;
		}
	</style>
</head>
<body>
	
<div class="wrapper clearfix">
	<div class="pageContent">
		<div id="pic1" class="pic" style="margin:100px auto;">
			<ul id="slideName1" class="sildebar clearfix">
				<li style="background:#4390EE"><a href=""><img src="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/6/19/957cb05ebfd65ac9a85764145bb00b62/images/img1.jpg" alt="图片一" width="100%" height="300px"></a></li>
				<li style="background:#CA4040"><a href=""><img src="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/6/19/957cb05ebfd65ac9a85764145bb00b62/images/img2.jpg" alt="图片二" width="100%" height="300px"></a></li>
				<li style="background:#FF8604"><a href=""><img src="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/6/19/957cb05ebfd65ac9a85764145bb00b62/images/img3.jpg" alt="图片三" width="100%" height="300px"></a></li>
				<li style="background:#4e8a00"><a href=""><img src="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/6/19/957cb05ebfd65ac9a85764145bb00b62/images/img4.jpg" alt="图片四" width="100%" height="300px"></a></li>
				<li style="background:#ff0"><a href=""><img src="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/6/19/957cb05ebfd65ac9a85764145bb00b62/images/img5.jpg" alt="图片五" width="100%" height="300px"></a></li>
			</ul>
			<a href="javascript:void(0)" class="btn-focus prev"> 上一张 </a>
			<a href="javascript:void(0)" class="btn-focus next">下一张</a>
		</div>
	</div>
</div>
<script>
	
 $(document).ready(function(){

 var sWidth = $('#pic1').width();
 var len = $('#pic1 .sildebar li').length;
 var timer;
 var index = 0;

 var focusBox = '<ul class="focusBox clearfix"></ul>';
 $('#pic1').append(focusBox);

 //生成底部焦点
 for(var i=0;i<len;i++){
 	var li = document.createElement('li');
    $('.focusBox')[0].appendChild(li);
 }

//上一张
 $('#pic1 a.prev').click(function(){
 	index -=1;
 	if(index == -1){index = len-1}
 	showPic(index);
 });

//下一张
 $('#pic1 a.next').click(function(){
 	index +=1;
 	if(index == len){index=0}
  showPic(index);
 });

 $('#pic1').live({
  mouseenter:function(){
    $('#pic1 a.prev,#pic1 a.next').animate({"opacity":0.6},1000);
  },
  mouseleave:function(){
  alert(2);
    $('#pic1 a.prev,#pic1 a.next').animate({"opacity":0},1000);
  }
 })
  
  //点击圆点时，进行切换
 $('#pic1 .focusBox li').click(function(){
 	index = $('#pic1 .focusBox li').index(this);
 	showPic(index);
 }).eq(0).trigger('click');
 
 $('#pic1 .sildebar').css("width",sWidth * (len));

//定时器，定时进行切换
 $('#pic1').hover(function(){
 	clearInterval(timer);
    },function(){
	 	timer = setInterval(function(){
	 	showPic(index);
	 	index++;
		alert(1);
	 	if(index == len){index = 0;}
        },3000);
 }).trigger('mouseleave');

 function showPic(index){
 	var nowLeft = -index * sWidth;
 	$('#pic1 .sildebar').stop(true,false).animate({left:nowLeft},500);
 	$('#pic1 .focusBox li').removeClass('cur').eq(index).addClass('cur'); 
 }

});

</script>
</body>
</html>
这个幻灯切换是我在网上找的一个素材
这几张图片是先并列放到了一个div里面的，控制div显示的宽度，通过改ul属性的left 来实现切换效果，用animate 这个函数来实现滑动的效果
通过延时函数来达到定时切换的效果，光标移上去暂停
底部焦点的圆形是通过css圆角属性设置的，焦点发光是通过改背景颜色
猜你喜欢
