基本实现四个效果
- 图片每三秒自动播放
- 点击左右按钮能切换图片
- 点击图片下方横线能切换到对应图片
- 点击对应图片切换到当前图片
html代码
<div class="box">
<div class="container1">
<ul>
<li class="p1"><img src="../images/1.jpg"></li>
<li class="p2"><img src="../images/2.jpg"></li>
<li class="p3"><img src="../images/3.jpg"></li>
<li class="p4"><img src="../images/4.jpg"></li>
<li class="p5"><img src="../images/5.jpg"></li>
<li class="p6"><img src="../images/6.png"></li>
</ul>
</div>
<a href="javascript:;" class="prev btn"><</a>
<a href="javascript:;" class="next btn">></a>
<div class="buttons">
<a href="javascript:;">
<span class="active"></span>
</a>
<a href="javascript:;">
<span></span>
</a>
<a href="javascript:;">
<span></span>
</a>
<a href="javascript:;">
<span></span>
</a>
<a href="javascript:;">
<span></span>
</a>
<a href="javascript:;">
<span></span>
</a>
</div>
</div>
javascript:;表示执行一段空白JAVASCRIPT语句 并且返回的也是空或者false值。这样对a标签的点击就不会有事件响应,如果写成href="#"的话,虽然也不会跳转页面,但是当有滚动条时点击会跳转到页面首部。
css代码
*
{
margin:0px;
padding: 0px;
}
.box
{
margin-top: 50px;
width: 100%;
height: 400px;
position: relative;
}
.container1
{
position: absolute;
width: 1000px;
height: 360px;
left:50%;
margin-left: -500px;
overflow: hidden;
}
li
{
list-style: none;
position: absolute;
top:0;
left: 0;
opacity: 0;
transition: all 0.3s ease-out;
}
.box ul li img
{
width:640px;
border:none;
float: left;
cursor: pointer;
}
.btn
{
color:#e93215;
cursor: pointer;
position: absolute;
font-size: 40px;
width: 60px;
top:50%;
margin-top: -50px;
height: 100px;
text-decoration: none;
background: #FFBD9B;
line-height: 100px;
text-align: center;
}
.prev
{
left: 80px;
}
.next
{
right:80px;
}
.p1
{
transform:translate3d(-180px,0,0) scale(0.81);
}
.p2
{
transform:translate3d(0px,0,0) scale(0.81);
transform-origin:0 50%;
opacity: 0.8;
z-index: 2;
}
.p3
{
transform:translate3d(180px,0,0) scale(1);
z-index: 3;
opacity: 1;
}
.p4
{
transform:translate3d(360px,0,0) scale(0.81);
transform-origin:100% 50%;
opacity: 0.8;
z-index: 2;
}
.p5
{
transform:translate3d(540px,0,0) scale(0.81);
}
.p6
{
transform:translate3d(720px,0,0) scale(0.81);
}
.buttons
{
position: absolute;
width: 1000px;
height: 30px;
bottom:0;
margin-left: -500px;
left: 50%;
padding-top: 10px;
text-align: center;
}
.buttons a
{
display: inline-block;
width: 35px;
height: 5px;
padding-top: 4px;
cursor: pointer;
}
span
{
display: block;
width: 35px;
height: 2px;
background-color: #e93215;
}
.active
{
background-color: #4F9D9D;
}
jquery代码
- container1是一个div,包裹着整个ul,我把ul高度设置成正常图片大小的高度,设定了一个宽度1000px,并且让溢出部分隐藏.
- translate3d(-180px,0,0)表示图片向左移动180px,根据container1-图片长度/2,可得为180px,scale(0.81)表示图片水平和垂直都缩小为原来的0.81
- z-index属性指定一个元素的堆叠顺序,这里当前显示图片的z-index设置为最大,左右两边的图片数值依次减1,就可以实现图片的堆叠.
- 我们没有使用transform-origin改变元素原点位置的情况下,css变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。所以这里用到了transform-origin.
var $a=$(".buttons a");
var $s=$(".buttons span");
var crr=["p1","p2","p3","p4","p5","p6"];//字符数组与类名一一对应
var index=0;
$(".prev").click(
function(){
previmg();
})
$(".next").click(
function(){
nextimg();
})
function previmg(){//前一张
crr.unshift(crr[5]);//unshift()在数组前端添加项,数组长度+1
crr.pop();//pop()在数组末端移除项,数组长度-1
$("li").each(function(i,e) {
$(e).removeClass().addClass(crr[i]);
})
index--;
if(index<0)
index=5;
show();
}
function nextimg(){//改变crr数组中字符的排列顺序
crr.push(crr[0]);//push()是用来在数组末端添加项,数组长度+1
crr.shift();//shift()在移除数组的第一个项,数组长度-1
$("li").each(function(i,e) {//i是选择器的位置,e是当前元素
$(e).removeClass().addClass(crr[i]);
})//用each函数为每个li增加样式,这时数组中的样式已经改变了,所以对应样式也要改变
index++;
if(index>5)
index=0;
show();
}
$a.each(function() {//也是通过改变数组中的成员顺序达到改变li的class样式
$(this).click(function(){
var myindex=$(this).index();//当前点击的图片下标
var b=myindex-index;
if(b==0)
return;
else if(b<0)//在当前图片左侧
{
var newcrr=crr.splice(0,-b);
crr=$.merge(crr,newcrr);//拼接到crr
$("li").each(function(i,e)
{
$(e).removeClass().addClass(crr[i]);
})
index=myindex;
show();
}
else
{
crr.reverse();//反转数组
var oldarr=crr.splice(0,b);
crr=$.merge(crr,oldarr);
crr.reverse();//还原
$("li").each(function(i,e){
$(e).removeClass().addClass(crr[i]);
})
index=myindex;
show();
}
})
})
function show(){
$($s).eq(index).addClass("active").parent().siblings().children().removeClass("active");
}
$(document).on("click",".p4",function() {
nextimg();
return false;
});
$(document).on("click",".p2",function() {
previmg();
return false;
});
$(".box").mouseover(function() {//鼠标移入时清除定时器
clearInterval(timer);
})
$(".box").mouseleave(function() {//鼠标移出时重新设置定时器
timer=setInterval(nextimg,3000);
})
timer=setInterval(nextimg,3000);//按照指定的周期(毫秒)来调用函数nextimg
通过用jquery代码来控制数组中p1,p2,p3,p4,p5,p6的顺序,然后通过removeClass和addClass把样式加到li上,以此来达到图片的点击时的切换。