jquery+点击左右切换

jQuery是一个广泛使用的JavaScript库，它简化了HTML文档的遍历和操作、事件处理、动画效果以及AJAX操作。而点击左右切换是在网页中制作轮播图常用的效果之一，下面我们一起来看看如何使用jQuery实现它。

//HTML代码div class="slider">
    ul>
    li>
    img src="slide1.jpg">
    /li>
    li>
    img src="slide2.jpg">
    /li>
    li>
    img src="slide3.jpg">
    /li>
    .../ul>
    div class="prev">
    /div>
    div class="next">
    /div>
    /div>
//CSS代码.slider {
    position: relative;
    overflow: hidden;
}
.slider ul {
    position: absolute;
    width: 9999px;
}
.slider li {
    float: left;
}
//jQuery代码$(document).ready(function() {
    var slideCount = $('.slider ul li').length;
    var slideWidth = $('.slider ul li').width();
    var slideHeight = $('.slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
$('.slider').css({
 width: slideWidth, height: slideHeight }
    );
$('.slider ul').css({
 width: sliderUlWidth, marginLeft: - slideWidth }
    );
    $('.slider ul li:last-child').prependTo('.slider ul');
function moveLeft() {
$('.slider ul').animate({
left: + slideWidth}
, 200, function () {
    $('.slider ul li:last-child').prependTo('.slider ul');
    $('.slider ul').css('left', '');
}
    );
}
    ;
function moveRight() {
$('.slider ul').animate({
left: - slideWidth}
, 200, function () {
    $('.slider ul li:first-child').appendTo('.slider ul');
    $('.slider ul').css('left', '');
}
    );
}
    ;
$('.prev').click(function () {
    moveLeft();
}
    );
$('.next').click(function () {
    moveRight();
}
    );
}
    );
    

上述代码中，给定了一个DIV容器，并在其中插入一些图片，然后设置了容器和图片的CSS样式，并在JQuery代码中编写了点击左右切换的函数。最后，在HTML代码中用DIV容器包围起来并添加了两个DIV元素作为左右切换的按钮。运行代码，你会看到轮播图已经实现了左右切换的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！