android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法。分享给大家供大家参考。具体如下:

运行效果如下:

660e21846b8f9c0c9adc649cea0ebcb0.png

完整实例代码点击此处本站下载。

使用方法案例:

$('.carousel-image').CarouselImage({

num :$('.carousel-num')

});

或者requirejs:

requirejs.config({

//By default load any module IDs from js/lib

baseUrl: '../src',

paths: {

$: 'zepto'

}

});

require(['carousel-image',"$"], function(CarouselImage,$) {

var cs = new CarouselImage();

cs.init({

target:$('.carousel-image'),

num:$('.carousel-num')

});

});

API 属性、方法及回调:

target:表示是在这个容器内的元素会触发事件,它应该有个子级的容器,方便动画的优化

num:本意是以显示当前索引的数字表示,但现在用样式把数字隐藏了,如果要显示数字样式,可自行更改样式文件

希望本文所述对大家的javascript程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的html和js实现轮播效果,并添加了左右tab切换的代码: HTML代码: ```html <div id="slider"> <img class="slide" src="image1.jpg"> <img class="slide" src="image2.jpg"> <img class="slide" src="image3.jpg"> <img class="slide" src="image4.jpg"> <img class="slide" src="image5.jpg"> </div> <div id="tabs"> <div class="tab active"></div> <div class="tab"></div> <div class="tab"></div> <div class="tab"></div> <div class="tab"></div> </div> ``` CSS代码: ```css #slider { width: 600px; height: 400px; overflow: hidden; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } #tabs { margin-top: 10px; display: flex; justify-content: center; } .tab { width: 20px; height: 20px; border-radius: 50%; background-color: gray; margin: 0 5px; cursor: pointer; } .tab.active { background-color: black; } ``` JS代码: ```javascript var slides = document.querySelectorAll('.slide'); var tabs = document.querySelectorAll('.tab'); var current = 0; function reset() { for (var i = 0; i < slides.length; i++) { slides[i].classList.remove('active'); tabs[i].classList.remove('active'); } } function startSlide() { reset(); slides[0].classList.add('active'); tabs[0].classList.add('active'); } function slideLeft() { reset(); current--; if (current < 0) { current = slides.length - 1; } slides[current].classList.add('active'); tabs[current].classList.add('active'); } function slideRight() { reset(); current++; if (current > slides.length - 1) { current = 0; } slides[current].classList.add('active'); tabs[current].classList.add('active'); } tabs.forEach(function(tab, index) { tab.addEventListener('click', function() { reset(); current = index; slides[current].classList.add('active'); tabs[current].classList.add('active'); }); }); startSlide(); setInterval(function() { slideRight(); }, 5000); ``` 解释一下代码: 1. HTML代码中,我们使用`<div>`来包含轮播图,使用`<img>`来展示每张图。同时,我们使用一个`<div>`来包含tab标签,通过CSS实现tab标签样式,并使用JS实现tab的切换效果。 2. CSS代码中,我们设置`#slider`的宽高、overflow属性为隐藏,并将每张图的position属性设置为绝对定位,使它们可以重叠在一起,然后使用opacity和transition属性让它们可以淡入淡出切换。 3. JS代码中,我们使用`querySelectorAll()`方法获取轮播图和tab标签,然后定义了一些函数,如`reset()`函数用于重置轮播图和tab标签的状态,`startSlide()`函数用于开始轮播,`slideLeft()`和`slideRight()`函数用于左右切换。我们通过循环遍历tab标签,并使用`addEventListener()`方法监听tab标签的点击事件,然后调用`reset()`函数和设置轮播图和tab标签的`active`类来实现tab的切换效果。最后,我们使用`setInterval()`方法来设置定时器,使轮播图可以自动切换
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值