幻灯片

实现幻灯片自动放映，左下角圆圈直接跳转到某张幻灯片。
如果想点击切换，请见web前端之幻灯片（一）

效果图

代码实现动图展示

html代码

<body><div class="show"><div class="myShow"><div class="number">1 / 4</div><img src="../image/huan1.jpg" alt=""><div class="text">introduction1</div></div><div class="myShow"><div class="number">2 / 4</div><img src="../image/huan2.jpg" alt=""><div class="text">introduction2</div></div><div class="myShow"><div class="number">3 / 4</div><img src="../image/huan3.jpg" alt=""><div class="text">introduction3</div></div><div class="myShow"><div class="number">4 / 4</div><img src="../image/huan4.jpg" alt=""><div class="text">introduction4</div></div><div class="dot_contain"><div class="dot" onmouseenter="currentShow(1)">1</div><div class="dot" onmouseenter="currentShow(2)">2</div><div class="dot" onmouseenter="currentShow(3)">3</div><div class="dot" onmouseenter="currentShow(4)">4</div></div></div>
</body>

css代码

<style>    *{font-family: 微软雅黑;}.show{max-width: 1000px;position: relative;margin:auto;}.myShow{display: none;}img{width: 100%;}/*-------------------------------------------------------------------*//*文字部分s*/.text {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;right: 8px;width: 50%;text-align: center;/*border:1px solid #000;*/}/*数字文字部分*/.number{color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
/*-------------------------------------------------------------------*//*幻灯片下方圆点*/.dot_contain{position:absolute;bottom:8px;text-align: center;}.dot{font-size: 10px;font-weight: bold;text-align: center;height: 20px;width: 20px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;}.active, .dot:hover {background-color: #696969;}</style>

js代码

<script src="../jquery-1.11.3/jquery-1.11.3.min.js"></script><script>index = 0;show();function currentShow(n) {show(index = n-1);}function show() {//获取到classshows=$('.myShow');dots=$('.dot');//获取到幻灯片长度-----即幻灯片个数length=shows.length;//获取到幻灯片下方圆圈个数dotLength=dots.length;for (i = 0; i < length; i++) {shows[i].style.display = "none";  }index++;if (index > length) {index = 1;}for (i = 0; i < dotLength; i++) {dots[i].className = dots[i].className.replace(" active", "");}shows[index-1].style.display = "block";  dots[index-1].className += " active";setTimeout(show, 2000); // 切换时间//切换时间可根据自己喜欢调节}
</script>

☺️

web前端之幻灯片（二）--自动播放相关推荐

web前端技术（二）之动画进阶
web前端技术(二)之动画进阶目录 web前端技术(二)之动画进阶前言一.web前端动画是什么二.2D转换标签(transforms) 1. translate() 2.rotate() 3. ...
web前端知识总结二（css（其他）+移动web网页开发）
web前端知识总结二(css(其他)+移动web网页开发) 文章目录 web前端知识总结二(css(其他)+移动web网页开发) 字体图标平面转换-位移位移:绝对定位居中开门效果旋转转换原点 ...
面试官常问的 web前端问题（二）
面试官常问的 web前端问题 11-20 11.什么是响应式设计? 12.为什么我们要弃用 table 标签 13.iframe 有哪些缺点 14.meta viewport 是做什么用的,怎么写? ...
Web前端面试指导(二)：编写简历，吃透简历内容
2.1 简历模板(仅供参考,不得千篇一律) ~~~~~~温馨提示 ~~~~~~ 简历模板文件在QQ群 490916635 2.2 吃透简历内容 2.2.1 吃透自己的简历 Ø 简历出现的名词 ...
android 自动播放幻灯片,Android自动播放Banner图片轮播效果
本文实例为大家分享了Android自动播放Banner图片轮播的具体代码,供大家参考,具体内容如下先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id=&qu ...
唯品会web前端实习生一面二面经
请假来到上海,正式开启实习生的面试之旅. 面之前紧张的不行,毕竟第一次,通知11:05的面试时间,提早一个小时到了,发现人并不是很多,而且好多人电话通知都没有来,想想我大老远从长沙跑到上海,也是够风雨 ...
web前端学习（二）html学习笔记部分（3）--range对象
1.2.8 html5编辑api之range对象(一) 1.2.8.1 Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...
[Web 前端] mobx教程(二)-mobx主要概念
cp from : https://blog.csdn.net/smk108/article/details/84960159 通过<Mobx教程(一)-Mobx简介>我们简单理解了Mob ...
WEB前端 vue学习二组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

web前端之幻灯片（二）--自动播放

幻灯片

效果图

代码实现动图展示

html代码

css代码

js代码

web前端之幻灯片（二）--自动播放相关推荐

最新文章

热门文章