html中图片左右切换,超简单的图片左右切换滑动

网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现。插件虽方便,但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能

效果预览如下图:

1460000022921829

代码部分(直接复制代码便可使用,注意对应的图片路径改成自己的图片路径,图片大小建议300*300)

html>

超简单的图片左右切换滑动

var cot=0;//设置一个计数器,初始值为0;作用是用来监听点击切换的时候哪一个图片应该隐藏或者显示

function nex(){

if(cot<=2){

$('.imgs img').eq(cot).animate({'margin-left':'-305px'},500);

cot++;

}

}

function pre(){

if(cot>0){

cot--;

$('.imgs img').eq(cot).animate({'margin-left':'0'},500);

}

}

上一页
下一页

最后

觉得文章不错的,给我点个赞哇,关注一下呗!

技术交流可关注微信公众号【GitWeb】,加我好友一起探讨

微信交流群:加好友(备注思否)邀你入群,抱团学习共进步

bVbDfWH

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!对于图片左右切换滑动,您可以使用一些前端框架或者库来实现,以下是一种基于jQuery的实现方式: 1. 首先,在页面引入jQuery库,例如: ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 2. 然后,在页面添加一个包含多张图片的容器,例如: ```html <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` 3. 接着,编写一些CSS样式,使得容器能够显示多张图片,并且可以水平滑动,例如: ```css .slider { width: 100%; overflow-x: scroll; white-space: nowrap; } .slider img { display: inline-block; height: 200px; margin-right: 10px; } ``` 4. 最后,在jQuery编写一些JavaScript代码,实现图片左右切换滑动的效果,例如: ```javascript $(function() { var slider = $('.slider'); var images = slider.find('img'); var imageWidth = images.first().outerWidth(true); var scrollWidth = imageWidth * images.length; slider.css('width', scrollWidth); $(window).resize(function() { imageWidth = images.first().outerWidth(true); scrollWidth = imageWidth * images.length; slider.css('width', scrollWidth); }); $('button.prev').click(function() { slider.animate({ scrollLeft: '-=' + imageWidth }, 500); }); $('button.next').click(function() { slider.animate({ scrollLeft: '+=' + imageWidth }, 500); }); }); ``` 在上面的代码,我们首先获取了容器和图片的相关信息,然后根据窗口大小重新计算容器的宽度,接着监听前进和后退按钮的点击事件,使用jQuery的`animate()`函数来实现滑动效果。 至此,一个基于jQuery的图片左右切换滑动功能就实现了。希望能够帮到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值