The example in this article describes the method of using js to implement a carousel image effect that supports sliding switching on mobile phones. Share it with everyone for your reference. The details are as follows:
The operation effect is as follows:
Click here for the complete example codeDownload from this site.
Usage examples:
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/carousel-image.js"></script>
<script>
$('.carousel-image').CarouselImage({
num :$('.carousel-num')
});
</script>or requirejs:
<div class="carousel-image">
<div>
<a>
<img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/>
</a>
<a>
<img src="http://www.yoursiteweb.com/images/1430073252953.png"/>
</a>
<a>
<img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/>
</a>
</div>
<div class="carousel-num">
</div>
</div>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script>
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')
});
});
</script>API properties, methods and callbacks:
target:
Indicates that the element in this container will trigger the event. It should have child containers to facilitate animation optimization
num:
The original intention is to display the number of the current index, but now the number is hidden by the style. If you want to display the number style, you can change the style file yourself
I hope this article will be helpful to everyone’s JavaScript programming design.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
