轮播图-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 ...
随机推荐
- Serv-u 10.3 的图文安装教程及使用方法
现在很多windows服务器都是使用serv_u作为ftp服务器,一般情况下我们使用Serv-U FTP Server v6.4.0.6,这里以serv_u 10.3为例介绍下,方便需要的朋友 一 ...
- 002 static and default route
r2(config)#ip route 192.168.1.0 255.255.255.0 192.168.2.1 r1(config)#ip route 192.168.3.0 255.255.25 ...
- ubuntu10.04 建V
ubuntu10.04架设vpn服 vpn 安装: pptpd:apt-get install pptpd 1. 配置网络IP地址,编辑 vim /etc/pptpd.conf ,去掉下面两行前面# ...
- Codeforces Round #324 (Div. 2)C. Marina and Vasya set
C. Marina and Vasya Marina loves strings of ...
- Codeforces Round #240 (Div. 1) B. Mashmokh and ACM DP
B. Mashmokh and ACM ...
- HDU 4850 Wow! Such String!(欧拉道路)
HDU 4850 Wow! Such String! 题目链接 题意:求50W内的字符串.要求长度大于等于4的子串,仅仅出现一次 思路:须要推理.考虑4个字母的字符串,一共同拥有26^4种,这些由这些 ...
- YTU 2500: 二元表达式计算
2500: 二元表达式计算 时间限制: 1 Sec 内存限制: 128 MB 提交: 38 解决: 23 题目描述 根据输入的含有两个二元运算的表达式,编程计算并输出表达式的值.如输入: 2+9 ...
- [2017SEERC]Divide and Conquer
https://www.zybuluo.com/ysner/note/1308834 题面 一个有\(n\)个点的图,上面有有两棵不同的生成树.问至少切断几条边,可以使原图不联通.并输出方案数. \( ...
- SQL Server 添加描述
添加描述的格式 exec sys.sp_addextendedproperty @name = N'MS_Description' ,@value = 'value',@level0type=N'SC ...
- Java properties配置文件
Java中的配置文件常为properties文件,格式为文本文件,文件内容的格式是“键=值”格式.注释信息使用“#”来注释. Properties类的常用方法 String getProperty(S ...