幻灯片切换
这是完整的代码
<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圆角属性设置的，焦点发光是通过改背景颜色
