轮播图-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 ...
随机推荐
- Hive之Order,Sort,Cluster and Distribute By
测试数据 create table sort_test( id int, name string ) row format delimited fields terminated by '\t' li ...
- 系统无法安装 OfficeControl.ocx 控件如何解决
在OA上要直接查看word等公告文件,就必须安装office控件.要安装office控件,需要在IE浏览器中做相应的设置.如何设置呢,下面由小编具体介绍下. 工具/原料 OA IE浏览器 方法 ...
- 分享最近抽空写的一个代码生成器，集成EasyDBUtility数据库访问帮助类
一直想写一个自己的代码生成器,但是因为工作事情多,一直搁置下来,最近下决心终于利用下班时间写完了,现在分享给有需要的朋友,代码生成器集成EasyDBUtility数据库访问帮助类,暂时只支持sqlse ...
- CentOS firewall添加开放端口
添加 firewall-cmd --zone=public --add-port=80/tcp --permanent (–permanent永久生效,没有此参数重启后失效) 重新载入 firewal ...
- Apache2 Web 服务器
Apache2 Web 服务器的安装 sudo apt install apache2 -y 当安装Apache2包之后,Apache2相关的服务是启用的,并在重启后自动运行.在某些情况下如果你的Ap ...
- 华为AR1220
今天刚刚收到华为AR1220,以为直接就可以用web界面管理,结果开机后才知道web管理界面需要激活.下面简单分享这个过程:*** 用控制台线(一边RJ45,一边9针串)连接Router consol ...
- TCP_NODELAY和TCP_CORK nagle算法和cork算法
TCP_NODELAY 默认情况下,发送数据採用Nagle 算法.这样尽管提高了网络吞吐量,可是实时性却减少了,在一些交互性非常强的应用程序来说是不同意的.使用TCP_NODELAY选项能够禁止Nag ...
- [TypeScript] Define Custom Type Guard Functions in TypeScript
One aspect of control flow based type analysis is that the TypeScript compiler narrows the type of a ...
- c# Winform实现中国省份地图
1.利用raphael.js IE下的VML和SVG实现矢量地图 2.JS调用c# Winform代码,代码 [System.Runtime.InteropServices.ComVisibleAtt ...
- ssh服务常见问题及其解决办法
1 统一解决办法 执行sshd -t,这样就可以指出是哪里出问题了. 所有的服务都应该有这个测试选项,否则出错了都不知道在哪里出的问题. 2 root用户登录,密码是对的,但是报“Permission ...