纯JS实现带小圆点缩略图及左右箭头的轮播图
HTML部分 <body> <div id="container"><div id="list" class="pic" style="left:-400px"><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="1" /><img src="img/3.jpg" alt="1" /><img src="img/4.jpg" alt="1" /><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /></div><div id="circle" class="circle"><div class="on"><p id="small" style="display: none"><img src="img/1.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/2.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/3.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/4.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/5.jpg" alt=""><a href="#"></a></p></div></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a> </div> </body>
CSS部分 <style> * {margin: 0;padding: 0;text-decoration: none; }body {padding: 20px; }#container {position: relative;width: 400px;height: 400px;margin: 0 auto;border: 5px solid #333;overflow: hidden;/*显示一张图片,左右的隐藏*/ }#list {position: absolute;z-index: 1;width: 2800px;height: 400px; }#list img {float: left;width: 400px;height: 400px; } .circle {position: absolute;left: 150px;bottom: 20px;z-index: 2;width: 100px;height: 10px; }.circle div {float: left;position: relative;margin-right: 5px;width: 10px;height: 10px;border-radius: 50%;border:1px solid #fff;background: #333;cursor: pointer; }.circle div img {position: absolute;bottom: 20px;left: -54px;width: 110px;height: 70px;border-radius: 0;border: 5px solid #fff; } .circle div a {position: absolute;display: inline-block;top: -12px;left: -1px;width: 0;height: 0;opacity: 1;background: none;border-radius: 0;border-right: 6px solid transparent;border-left: 6px solid transparent;border-top: 6px solid #fff;} .circle .on { background: #FF972F; } a { position: absolute;top: 180px;z-index: 2;/*箭头所在层置顶*/display: none;width: 40px;height: 40px;line-height: 40px;color: #fff;font-size: 36px;text-align: center;font-weight: bold;border-radius: 50%;/*箭头设置成圆形*/background: #000;filter:alpha(opacity:30); opacity:0.3;/*设置透明度*/cursor: pointer; } a:hover { filter:alpha(opacity:60); opacity:0.6; } #container:hover a {display: block; } #prev {left:10px; } #next {right:10px; } </style>
js部分 <script> window.onload = function() {var oContainer = document.getElementById('container');var oList = document.getElementById('list');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next'); var oCircle = document.getElementById('circle');var aCircle = oCircle.getElementsByTagName('div');var aP = oCircle.getElementsByTagName('p');var timer;var num = 0;function animate(offset) {var newLeft = parseInt(list.style.left) + offset;list.style.left = newLeft + 'px'; if(newLeft > -400) {//如果当前的 a = list.style.left = 0;此时图片位于被隐藏的第五张,它的前面没有图, 就把-2000px赋值给a,此时图片还是位于第五张图,而她的前面有五张图片所以a = -400px*5=-2000px; list.style.left = -2000 + 'px'; }if(newLeft < -2000) {//同理,如果当前的a= list.style.left = -2400px;此时图片位于第一张,它的前面有六张图,就把-400px赋值给a,此时图片还是位于第一张,而它的前面有一张图,所以a = -400px; list.style.left = -400 + 'px'; }}//图片自动轮播function autoPlay() {//设置定时器,每隔1.5s运行一次oNext.onclick timer = setInterval(function(){oNext.onclick(); },1500);}function stopAutoPlay (){clearInterval(timer); }//鼠标移入图片,清除定时器,移开,打开定时器 oContainer.onmouseover = stopAutoPlay;oContainer.onmouseout = autoPlay;autoPlay();//设置小圆点function circleShow() {//清除之前所有的样式for(var i = 0; i<aCircle.length; i++) {aCircle[i].className = ''; } //把第一个下标为0的设置属性className aCircle[num].className = 'on';}//左右箭头切换图片,圆点样式也跟着移动 oPrev.onclick = function() {num--;if(num == -1) {num = aCircle.length - 1; } circleShow();animate(400);}oNext.onclick = function() {num++;if(num == aCircle.length) {num = 0; } circleShow();animate(-400);}for(var i=0; i<aCircle.length; i++) {aCircle[i].index = i;//鼠标点击小圆点显示相应图片 aCircle[i].onclick = function() {//图片相对左侧移动的距离var offset = 400 * (num-this.index);animate(offset);//鼠标移动到小圆点的位置 num = this.index;circleShow(); }//鼠标移入小圆点显示相应图片 aCircle[i].onmouseover = function(){aP[this.index].style.display = 'block';};aCircle[i].onmouseout = function(){aP[this.index].style.display = 'none';};}
转载于:https://www.cnblogs.com/eddina/p/7274251.html
纯JS实现带小圆点缩略图及左右箭头的轮播图相关推荐
- HTML中轮播图里的圆点不充满,老师好,轮播图中的小点不显示
我设置了padding-botom 为40%还是不显示,请麻烦看一下这是什么问题呢 import { Swiper, SwiperItem } from "@/common/swiper&q ...
- CSS-用伪元素制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- 原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录 功能简介 项目准备 项目说明 方案一:源代码 CSS样式 HTML结构 JS逻辑 方案二:源代码 CSS样式 HTML结构 JS逻辑 功能简介 页面展示 该项目功能实现: 无限滚动轮播图 j ...
- 微信小程序用swiper做旋转木马缩放轮播图
主要还是用到css3的特性,利用transition动画和transform:scal()属性. wxml <view class="vip-center-container" ...
- 微信小程序前端动态获取最新的轮播图优化
现在我们有一个这样的需求 就是后台改了轮播图的图片以及更新或者换位置 这是前端不能即使知道 就需要用到websocket 这样做虽然很简单但代码量也很大 所以我想出了一个方案: 思路 : 1.既然我们 ...
- 在微信小程序中,swiper组件(轮播图4)的常用属性
swiper组件的常用属性 属性 类型 默认值 说明 indicator-dots boolean false 是否显示版面指示点 indicator-color color rgba(0,0,0,3 ...
- html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- 小程序实现轮播图跳转页面和小程序
小程序实现轮播图跳转页面和小程序 文章目录 小程序实现轮播图跳转页面和小程序 跳转小程序 Object object 使用限制 需要用户触发跳转 需要用户确认跳转 示例代码 在我们开发微信小程序时候, ...
- 小程序实现3D轮播图效果
小程序通过swiper标签实现3D轮播图效果 一.效果图 二.代码块 1.html <view wx:if="{{slideList.length>0}}" class ...
最新文章
- Docker火遍全球!Docker(Inc)这家公司却要死了???
- WPF动画的属性被劫持
- 若谷歌实用量子计算机难产,拉里·佩奇会把它砍掉吗?
- java面向对象思想如何理解
- Zeusee 开源移动端车型识别系统HyperVID
- VS20“.NET研究”10自定义新建文件模版
- TensorFlow下载与安装
- 图解TCPOP-SMTP
- Openstack概论
- HackerOne年度报告:安全众测推出四年,成果几何?
- flutter 判断是不是调试模式_当永恒的软键盘问题遇到Flutter
- 学生成绩管理系统mysql课程设计_数据库课程设计报告-学生成绩管理系统
- DM7 达梦数据库 物理备份 相关概念说明
- DSP28335加密及解密
- LPC4370 USERMANUAL
- 经验模态分解python_EMD经验模态分解
- 【转载】白素贞的身世之谜
- 文件服务器 配额,文件服务器配额邮件通知
- 3d效果图设计师接私单的渠道介绍和避坑指南
- 那一年,我进传销了……(作者亲身经历)
热门文章
- linux访问文档根目录之外的网页_开发文档加载不再卡顿,亿点点提升
- unity 在图片的指定位置上添加按钮_Unity-利用免费资源快捷实现第三人称角色控制...
- python opencv图像对比度增强_图像增强、锐化, Python-OpenCV 来实现 4 种方法!
- tcp option 结构体_基于 Kotlin 实现一个简单的 TCP 自定义协议
- python决策树生成规则_如何从scikit-learn决策树中提取决策规则?
- python函数def中import_在Python中使用def函数时出现名称错误
- 图像降噪算法——DnCNN / FFDNet / CBDNet / RIDNet / PMRID / SID
- 【每周CV论文推荐】 初学目标检测必须要读的文章
- 中国存储器行业应用趋势与投资机遇研究报告2022版
- 中国金控(00875.HK)获主席兼首席执行官林裕豪增持15.8万股