jQuery学习之大轮播+小轮播
程序员文章站
2024-03-25 13:30:16
...
jQ代码：
在写jQuery代码之前一定要先导库，此处我用的是3.0的库
<script src="jquery-3.0.0.js"></script>
<script type="text/javascript">
var timer;
$(function() {
//设置图片向左移
imgshow();
//点击暂停按钮事件
$(".pause").click(function () {
clearInterval(timer);
});
//点击播放按钮事件
$(".play").click(function () {
imgshow();
});
//点击左按钮
$(".prev").click(function () {
imganimation("left");
});
//点击右按钮
$(".next").click(function () {
imganimation("right");
});
function imganimation(res) {
//图片向左走的轮播
if(res=="right"){
//animate()动画第一个li向左移动20%
$(".lilist:first").animate({
"marginLeft": "-20%"
}, 700, "linear", function () {
//这个li回到原来的位置
$(this).css("marginLeft", "0px");
//将它追加到ul的最后的位置
$(this).appendTo($(".ullist"));
});
//设置小框的图片轮播，原理与大框图片轮播一致
$(".s_lilist:first").animate({
"marginLeft": "-20%"
}, 650, "linear", function () {
$(this).css("marginLeft", "0px");
$(this).appendTo($(".s_ullist"));
});
}else {
//图片向右走，与向左的原理相同
$(".lilist:first").animate({
"marginLeft": "20%"
}, 700, "linear", function () {
$(this).css("marginLeft", "0px");
$(".lilist:last").prependTo($(".ullist"));
});
$(".s_lilist:first").animate({
"marginLeft": "20%"
}, 650, "linear", function () {
$(this).css("marginLeft", "0px");
$(".s_lilist:last").prependTo($(".s_ullist"));
});
};
};
//默认图片自动向左走
function imgshow() {
timer = setInterval(function (){
imganimation("right");
} , 2000);
};
});
</script> css样式：
* {
margin: 0;
padding: 0;
}
.divbg {
width: 100%;
height: 350px;
/*overflow: hidden;*/
position: relative;
}
.mb {
width: 30%;
height: 350px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
}
.mb:first-child {
left: 0px;
}
.mb:nth-child(2) {
right: 0px;
}
.ullist {
width: 200%;
height: 350px;
margin-left: -50%;
}
.lilist {
width: 20%;
height: 350px;
list-style: none;
float: left;
}
.imglist {
width: 100%;
height: 100%;
}
.divblock{
width: 20%;
height: 70%;
border: 4px solid rgba(255, 255, 255, 0.32);
position: absolute;
z-index: 5;
left: 46%;
top: 15%;
overflow: hidden;
}
.s_mb{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 10;
}
.s_ullist{
width: 500%;
height: 100%;
margin-left: -200%;
}
.s_lilist{
width: 20%;
height: 100%;
list-style: none;
float: left;
}
.s_imglist{
height: 100%;
width: 100%;
}
.s_mb img{
margin-left: 16%;
margin-top: 65%;
cursor: pointer;
}html样式：
<div class="divbg">
<div class="divblock">
<div class="s_mb">
<img class="prev" src="./img2/btn_prev.png" />
<img class="pause" src="./img2/btn_pause.png" />
<img class="play" src="./img2/btn_play.png" />
<img class="next" src="./img2/btn_next.png" />
</div>
<ul class="s_ullist">
<li class="s_lilist">
<img class="s_imglist" src="img2/2121.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2122.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2123.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2124.jpg" />
</li>
<li class="s_lilist">
<img class="s_imglist" src="img2/2123.jpg" />
</li>
</ul>
</div>
<div class="mb"></div>
<div class="mb"></div>
<ul class="ullist">
<li class="lilist">
<img class="imglist" src="img2/2121.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2122.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2123.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2124.jpg" />
</li>
<li class="lilist">
<img class="imglist" src="img2/2123.jpg" />
</li>
</ul>
</div>