轮播图-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 ...
随机推荐
- RIP
距离矢量路由协议 假设网络拓扑如下 192.168.1.0网段 - - - - R1 - - 192.168.12.0网段 - - R2 - - 192.168.23.0网段 - - R3 - - - ...
- Mysql的timestamp类型，自动记录数据的更新时间
datetime也可以设置自动更新的
- 功能超级强大的网络工具nc
摘自:http://www.linuxso.com/command/nc.html 功能说明:功能强大的网络工具语 法:nc [-hlnruz][-g<网关...>][-G<指向器数 ...
- MapReduce Cross 示例
MapReduce Cross 示例 package com.bsr.cross; import java.io.IOException; import org.apache.hadoop.conf. ...
- 75. Autorelease机制及释放时机
Autorelease机制是iOS开发人员管理对象内存的好伙伴.MRC中.调用[obj autorelease]来延迟内存的释放是一件简单自然的事:ARC下,我们甚至能够全然不知道Autoreleas ...
- iOS项目开发实战——通过Http Get方式与server通信
移动client往往须要同后台server进行通信,上传或者下载数据,最经常使用到的方式就是Http Get,如今我们来学习在iOS项目中使用Get方式同server进行通信. [一]server端实 ...
- BZOJ 3041 水叮当的舞步
3041: 水叮当的舞步 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 120 Solved: 67[Submit][Status][Discuss ...
- python-----删除文件到回收站
python删除文件一般使用os.remove,但这样删是直接删除文件,不删到回收站的,那么想删除文件到回收站怎么办? 这时,就需要使用shell模块了 from win32com.shell imp ...
- 简述Python中的break和continue的区别
众所周知在Python中,break是结束整个循环体,而continue则是结束本次循环再继续循环. 但是作为一个新手的你,还是不明白它们的区别,这里用一个生动的例子说明它们的区别,如下: 1.con ...
- 词典(一) 跳转表(Skip table)
词典,顾名思义,就是通过关键码来查询的结构.二叉搜索树也可以作为词典,不过各种BST,如AVL树.B-树.红黑树.伸展树,结构和操作比较复杂,而且理论上插入和删除都需要O(logn)的复杂度. 在词典 ...