轮播图-version1
实现目标
- 按'>'出现下一caption，按'<'出现上一caption
- 按下面的点到指定的caption
- 自动轮播
思路：
- 设置一个carousel容器，里面有carousel的每一张图，这里称为caption，例子中有caption 1，caption 2，caption 3，设这些caption的position为absolute，设置好top，left。这三张图叠加在一起了，默认显示caption 3，然而我们需要一开始显示caption 1，所以设所有的caption display为none，并增添一个新class show，show 的内容就是display：block，然后给caption 1添上class show。
- 按前进/后退按钮时，index（当前caption索引，起始为0）+1/-1，判断index是否超出范围，如果超出，按钮不做反应，index恢复正常值；如果没有超出，则将索引为index的图可见，其他不可见
- 给每一个dot加上点击事件，点击时，将点的索引给index，然后判断index是否超出范围，如果超出，按钮不做反应，index恢复正常值；如果没有超出，则将索引为index的图可见，其他不可见
- 使setInterval()函数实现轮播
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="carousel-container">
<div id="carousel" class="carousel">
<div class="carousel-piece show">
<div class="text">caption 1</div>
</div>
<div class="carousel-piece">
<div class="text">caption 2</div>
</div>
<div class="carousel-piece">
<div class="text">caption 3</div>
</div>
<div class="arrow-container">
<a href="#" class="pre">❮</a>
<a href="#" class="next">❯</a>
</div>
</div>
<div class="dot-container">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</body>
</html>
HTML
.carousel-container{
text-align:center;
}
.carousel {
width: 400px;
height: 200px;
background: orange;
position: relative;
overflow:hidden;
margin:0 auto;
}
.carousel .carousel-piece {
background: #ccc;
width: 80%;
height:100%;
margin:0 auto;
text-align:center;
line-height:200px;
position:absolute;
left:10%;
display:none;
}
.carousel .carousel-piece:nth-child(2){
background:pink;
}
.carousel .carousel-piece:nth-child(3){
background:lightblue;
}
.carousel .carousel-piece.show{
display:block;
}
.carousel .carousel-piece .text{
color:#fff;
font-size:24px;
}
.carousel .arrow-container {
position: absolute;
width:400px;
height:21px;
top:42%;
}
.carousel .arrow-container a{
text-decoration:none;
width:30px;
height:30px;
line-height:30px;
text-align:center;
background:#fff;
border-radius:50%;
}
.carousel .arrow-container .pre {
position:absolute;
left: 5px;
}
.carousel .arrow-container .next {
position:absolute;
right: 5px;
}
.dot-container{
margin:10px 0;
}
.dot-container span{
display:inline-block;
width:10px;
height:10px;
background:#fff;
border-radius:50%;
border:3px solid orange;
cursor:pointer;
}
.dot-container span.active{
background:#ccc;
}
CSS
var index=0;
var pieces=document.getElementsByClassName('carousel-piece');
var dots=document.getElementsByClassName('dot');
var preBtn=document.getElementsByClassName('pre')[0];
var nextBtn=document.getElementsByClassName('next')[0];
window.onload=function(){
setInterval(animateSlide,3000);
}
preBtn.onclick=function(){
getSlide(0,-1);
}
nextBtn.onclick=function(){
getSlide(0,1);
}
for(var i=0;i<dots.length;i++){
dots[i].onclick=(function(i){
return function(){
getSlide(1,i);
}
})(i);
}
function getSlide(flag,step){
if(flag===0){
index=index+step;
}
else{
index=step;
}
if(index>2){
index=2;return;
}
if(index<0){
index=0;return;
}
change();
}
function animateSlide(){
index++;
if(index>2){
index=0;
}
change();
}
function change(){
for(var i=0;i<pieces.length;i++){
if(i===index){
pieces[i].classList.add('show');
dots[i].classList.add('active');
}
else{
pieces[i].classList.remove('show');
dots[i].classList.remove('active');
}
}
}
Javascript
var index=0;
$(function(){
$('.pre').click(function(){
index=index-1;
change(1);
});
$('.next').click(function(){
index=index+1;
change(1);
});
$('.dot').click(function(){
index=$(this).index();
change(1);
});
setInterval(animateSlide,5000);
});
function change(flag){
if(index>2&&flag) {index=2;return;}
if(index<0&&flag) {index=0;return;}
$('.carousel-piece')
.not(':eq(index)').removeClass('show')
.eq(index).addClass('show');
$('.dot')
.not(':eq(index)').removeClass('active')
.eq(index).addClass('active')
}
function animateSlide(){
index=index+1;
if(index>2) {index=0;}
change(0);
}
JQuery
var index=0;
var pieces=document.getElementsByClassName('carousel-piece');
var dots=document.getElementsByClassName('dot');
var preBtn=document.getElementsByClassName('pre')[0];
var nextBtn=document.getElementsByClassName('next')[0];
window.onload=function(){
setInterval(animateSlide,5000);
}
preBtn.onclick=function(){
index=index-1;
getSlide();
}
nextBtn.onclick=function(){
index=index+1;
getSlide();
}
for(var i=0;i<dots.length;i++){
dots[i].onclick=(function(i){
return function(){
index=i;
getSlide();
}
})(i);
}
function getSlide(){
if(index>2) {index=2;return;}
if(index<0) {index=0;return;}
change();
}
function animateSlide(){
index++;
if(index>2){index=0;}
change();
}
function change(){
for(var i=0;i<pieces.length;i++){
if(i===index){
pieces[i].classList.add('show');
dots[i].classList.add('active');
}
else{
pieces[i].classList.remove('show');
dots[i].classList.remove('active');
}
}
}
Javascript Version2
轮播图-version1的更多相关文章
- js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- CSS-用伪类制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- superSlider实现美女轮播图
superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...
随机推荐
- Array.prototype.map()方法详解
Array.prototype.map() 1 语法 const new_array = arr.map(callback[, thisArg]) 2 简单栗子 let arr = [1, 5, 10 ...
- 一 hadoop 相关介绍
hadoop 相关介绍 hadoop的首页有下面这样一段介绍.对hadoop是什么这个问题,做了简要的回答. The Apache™ Hadoop® project develops open-sou ...
- 智能眼镜技术科普：VR、AR、MR的区别
前段时间, 获得谷歌5亿美元融资的技术公司Magic Leap在WSJD展会中放出了一段实录视频,引起不小骚动.如今,也有媒体称他们为MR公司,那么VR.AR.MR之间到底有什么区别呢. VR.AR. ...
- dubbo服务的group和version
group 当一个接口有多种实现时,可以用group区分 <!-- dubbo group 使用示例 --> <bean id="demoA" class=&qu ...
- hibernate之多对一单向关联
一个工作组(Group)里能够有多个用户(User),一个User仅仅属于一个Group,这是典型的多对一的关系. 在多对一的关系中正确的数据库设计是在多的这方(在这里是User这方)加一个Group ...
- list.ensureCapacity竟然会变慢
list.ensureCapacity竟然会变慢 jdk1.8 应该是做了优化了: public class Test10 { public static void main(String[] arg ...
- css的white-space属性导致了空格问题——查看十六进制发现2020变成了c2a0
今天发现了一个奇怪的问题.从文本编辑器(notepad++)中把一段文本输入到easyui的textbox文本框(textarea)中,不进行不论什么的操作.直接再从文本框中把文本拷贝出来贴到文本编译 ...
- Python开发【第*篇】【Socket网络编程】
1.Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. so ...
- （一）Java 入门教程
Java 入门教程 Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言. Java可运行于多个平台,如Windows, Mac OS,及其他多种UNIX版本的系统 ...
- 两个ajax写在一起报错
这样做完导致的结果是:在谷歌浏览器页面正常显示,在火狐浏览器会不定期出现系统异常错误提示!最后分析原因是: 从异步请求的执行原理来看,我们知道当一个异步请求发送时,浏览器不会处于锁死.等待的状态,从一 ...