圆点

利用jQuery实现图片无限循环轮播(不借助于轮播插件)

这一生的挚爱 提交于 2019-11-27 22:26:43
原来我主要是用Bootstrap来实现轮播图的功能,而这次是用javaScript和jQuery来实现图片无限循环轮播! 用到的技术有:html、css、JavaScript(少)、jQuery(主要) 效果展示: html代码: <body> <div id="container"><!-- left:-600px 表示:页面加载出现的第一张图片是1.jp --> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> </div> <div id="pointsDiv"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> <

使用canvas在图片上画圆圈,并可点击圆圈在圆圈下方画垂直线(适配移动端)

匆匆过客 提交于 2019-11-26 06:42:10
一、UI 二、实现 <div class="carBrightSpot"> <!-- 轮播图 --> <div class="block-swiper"> <div class="wrapper"> <swiper :options="swiperOption" id="swiper"> <swiper-slide v-for="(item,index) of carImageResult" :key="item.id"> <!-- <img class="swiper-img" :src="item.image"> --> <canvas width="800" height="600" :ref="index" @click="toLineBottom(index)"></canvas> </swiper-slide> </swiper> </div> <!-- 分页器 --> <div class="myPagination"> <div class="swiper-pagination" slot="pagination"></div> </div> </div> <!-- 热区的亮点 --> <div class="brightSpot"> <div class="oneBrightSpot" v-if="curCarHotspotPositionResultList