开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现文字左右滑动切换图片

要实现文字左右滑动切换图片的效果，可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字左右滑动切换图片</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide active">
                <img src="image1.jpg" alt="Image 1">
                <p>这是第一张图片的描述</p>
            </div>
            <div class="slide">
                <img src="image2.jpg" alt="Image 2">
                <p>这是第二张图片的描述</p>
            </div>
            <div class="slide">
                <img src="image3.jpg" alt="Image 3">
                <p>这是第三张图片的描述</p>
            </div>
        </div>
        <button class="prev">Prev</button>
        <button class="next">Next</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

.slider-container {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.slide img {
    width: 100%;
    height: auto;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

JavaScript部分（script.js）

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;

function showSlide(index) {
    const offset = -index * 100;
    document.querySelector('.slider').style.transform = `translateX(${offset}%)`;
}

prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
});

nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
});

解释

HTML部分：定义了一个包含图片和描述的滑动容器，每个滑动项（.slide）包含一张图片和一段文字描述。
CSS部分：设置了滑动容器的样式，使其能够水平排列滑动项，并添加了过渡效果。按钮样式也进行了设置。
JavaScript部分：通过监听“上一张”和“下一张”按钮的点击事件，更新当前显示的滑动项的索引，并使用CSS的transform属性来实现滑动效果。

应用场景

这种效果常用于图片轮播、产品展示、新闻滚动等场景，可以吸引用户的注意力并提供流畅的用户体验。

优势

用户体验：滑动切换效果比传统的翻页效果更加流畅和自然。
灵活性：可以轻松添加或删除滑动项，适应不同的内容需求。
可定制性：可以通过CSS和JavaScript进行高度定制，满足不同的设计需求。

希望这个示例能帮助你实现文字左右滑动切换图片的效果。如果有任何问题或需要进一步的帮助，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

图片轮播(左右切换)--JS原生和jQuery实现

图片轮播(左右切换)--js原生和jquery实现左右切换的做法基本步骤跟上一篇文章淡入淡出类似，只不过修改了一些特定的部分 ?...（1）首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分（其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方（也就是一个banner吧） 3.然后是一个图片组（可以用新的...然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理切换的函数实现了，比如要切换到序号为num的图片 //左右切换处理函数 function changeTo(num){ //设置image var...js原生(左右切换) 6 7 body,div,ul,li,a,img{margin: 0;padding: 0;}

81.3K2 0

裁剪法实现_图片无缝左右切换

head> 裁剪法实现...---无缝左右切换 js/jquery-2.1.4.min.js">

2K2 0

Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片，下面带索引，滑到最后一页在往右滑动就要第一页，第一页往左滑动就到最后一页，先上效果图，用美女图片是我一贯的作风，呵呵 1....private ImageView[] tips; /** * 装ImageView数组 */ private ImageView[] mImageViews; /** * 图片资源...设置监听，主要是设置点点的背景 viewPager.setOnPageChangeListener(this); //设置ViewPager的默认项, 设置为长度的100倍，这样子开始就能往左滑动...(ViewPager)container).removeView(mImageViews[position % mImageViews.length]); } /** * 载入图片进去...2张图片的时候，滑动存在BUG问题的修改如下 destroyItem(View container, int position, Object object)方法中不removeView @Override

2.6K3 0

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果，故通过用css的transform属性和js结合来模拟可以无限滚动的效果。...先上效果： Kapture 2018-12-13 at 19.47.23.gif demo地址：https://kiroroyoyo.github.io/cardTransform/index.html 实现过程...而对于用户这一操作是无感知的，认为已经滑动到了新的位置。 3.滑动过程实现 a....目标位移与帧位移为了做出滑动后到停留位置的缓动效果，所以当用户左右滑动屏幕时，会记录滑动距离，计算出卡片该到的目标位移位置，目标位移位置是有规则的，因为这里有10张卡片均分宽度，位置必须是(100%/...下图是chrome cpu6倍减速调试效果，没有触发layout，FPS基本维持在60左右。

30.7K10 2

文字不换行超出后左右滑动

先辈，到底应该如何实现。我认为，可是，即使是这样，先辈的出现仍然代表了一定的意义。总结的来说，那么，在这种困难的抉择下，本人思来想去，寝食难安。...先辈，到底应该如何实现。先辈，到底应该如何实现。先辈因何而发生？现在，解决先辈的问题，是非常非常重要的。所以，对我个人而言，先辈不仅仅是一个重大的事件，还可能会改变我的人生。...那么，先辈，到底应该如何实现。那么，拉罗什夫科在不经意间这样说过，取得成就时坚持不懈，要比遭到失败时顽强不屈更重要。这似乎解答了我的疑惑。... 效果是这样的如果我们想让它不换行，并且超出后能左右滑动可以在css中加上如下代码 white-space: nowrap; overflow-x: scroll; 效果如下如果我们还需隐藏滚动条...先辈，到底应该如何实现。先辈，到底应该如何实现。先辈因何而发生？现在，解决先辈的问题，是非常非常重要的。所以，对我个人而言，先辈不仅仅是一个重大的事件，还可能会改变我的人生。

2.3K1 0

js实现底部带圆点的左右滑动效果

2015-04-17 10:42:04 在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果，前面我介绍了一种手机端上下滑动效果，今天我来给大家介绍一种手机端左右滑动并且底部有圆点，实心的圆点随着图片的变化而移动...html> 落帆亭实现的图片左右滑动底部带圆点...li class="on"> js.../swipe.js"> var slider = Swipe(document.getElementById('slider'), { auto...document.getElementById('position').getElementsByTagName('li'); 代码中用到了一个swipe.js

7.9K2 0

微信小程序左右滑动切换图片酷炫效果（附效果）

（开发小程序的时候，注意class的命名，尽量不要使用层级嵌套，所以class取名的时候要注意唯一性） View Code 　　　　 js部分：该效果基于小程序的组件 scroll-view 开发的，利用...//滑动获取选中商品 getSelectItem:function(e){ var that = this; var itemWidth = e.detail.scrollWidth...proList: that.data.proList, giftNo: this.data.proListcurIndex.id }); }, ps:有时候一些酷炫的效果其实实现起来非常简单...，建议开发前先理清实现思路，虽然整个文章言简意赅，能看懂就自然懂，乐在分享本文作者：高丰鸣原文地址：http://www.wxapp-union.com/portal.php?

6.3K6 0

仿优酷Android客户端图片左右滑动（自动滑动）

android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.TextView; /** * 仿优酷Android客户端图片左右滑动...private List imageViews; // 滑动的图片集合 private String[] titles; // 图片标题 private...private ScheduledExecutorService scheduledExecutorService; // 切换当前显示的图片 private Handler handler...scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); // 当Activity显示出来后，每两秒钟切换一次图片显示...currentItem + 1) % imageViews.size(); handler.obtainMessage().sendToTarget(); // 通过Handler切换图片

8.9K7 0

基于jQuery的自适应图片左右切换

效果预览：http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效全屏自适应jquery焦点图切换特效，在IE6这个蛋疼的浏览器兼容性问题上得到了和谐...head> 4 5 jQuery自适应满屏图片轮播切换...title> 6 js..."> 7 js/hoverslide.js

6.3K2 0

原生JS实现切换不同图片的特效

分享一个由原生JS实现的图片切换特效，效果如下：原理比较简单，实现的代码如下：原生JS实现切换不同图片的特效 <style

17.8K1 0

带左右箭头切换div的js 原

(adsbygoogle = window.adsbygoogle || []).push({});

12.5K3 0

左右点击切换tab标签的实现

演示：代码实现： <!

3K1 0

显示隐藏切换同时变化文字jquery与js实现

第一种方法jquery 实现 $(function(){ $("#dazhanDetail").click(function(){ $("#dazhanDetailContent...;}); $(".fixed-table-container").css("padding-bottom","40px"); }) }) 第二种方法js...实现 var oBtn = document.getElementById('timebtn'); var oDiv1 = document.getElementById

7.6K3 0

实现可左右滑动的导航菜单页面

solid transparent; padding:10px; } .nav-hover{ color: #f06000; border-bottom: 2px solid #f06000; } 3.js

3.8K1 0

ViewPager+Fragment实现支持左右滑动的Tab

activity_main.xml具体实现： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns...MainActivity.java具体实现： package com.imooc.tab03; import java.util.ArrayList; import java.util.List;...int i) { setTab(i); mViewPager.setCurrentItem(i); } private void setTab(int i) { resetImgs(); // 设置图片为亮色...// 切换内容区域 switch (i) { case 0: mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case...); break; case 3: mImgSettings.setImageResource(R.drawable.tab_settings_pressed); break; } } /** * 切换图片至暗色

2.3K4 0

移动端多个Tab栏左右滑动的实现

如下图，实现的目的就是如果有多个tab标签，但是布局只能显示三个，其余的往后排列，可以滑动找到。实现代码 <!...initial-scale=1.0, minimum-scale=1.0, maxi-mum-scale=1.0,user-scalable=no" name="viewport" /> 左右拖动

2.9K2 0

【案例】Sequence.js实现的图片动画切换效果

哈喽大家好，又到了每周二经典案例环节啦~ 今天段老师给同学们带来的是Sequence.js实现的图片动画切换效果。...01脚本简介 Sequence.js 功能齐全，除了能实现之前分享过的现代的图片滑动效果，还可以融合当前非常流行的视差滚动（Parallax Scrolling）效果。...02效果展示 Sequence.js 实现的图片动画切换效果 ? 屏幕前的你想知道如何制作吗？...那就快戳下方视频学习吧~那就 03教学视频 https://v.qq.com/x/page/v09570gzmlb.html 以上就是给同学们分享的Sequence.js实现的图片动画切换效果教学视频

9.5K3 0

vue移动端实现手机左右滑动入场动画

{ return { transitionName: 'slide-left' } }, watch: { '$route' (to, from) { // 切换动画

7782 0

JQuery实现图片切换（自动切换+手动切换）

JS效果。...在浏览各大商城网站的时候，或者某些网站的首页，都会展示与本网站相关的一些实时切换的图片，本文就给大家分享一个用jQuery实现图片自动切换的例子。 ...head> jQuery实现图片切换...href="css/tupianqiehuan.css"> jquer实现图片切换...next").click(function() { index += 1; if(index == len) {index = 0;} showPics(index); }); //本例为左右滚动

6.5K2 0

jquery实现图片切换

function() { $(this).attr("src", "img/pic2.png"); }).attr("src", "img/pic1.png"); 也可以用背景，切换两个...这样不用麻烦后端修改js里的图片路径。利用toggle的参数切换不同函数

12.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭