轮播图-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 ...
随机推荐
- centos7grub2 引导win10
centos7+win10安装完成之后,使用gurb2引导win10系统 方式:使用ntfs-3g 步骤: 1.加源 wget -O /etc/yum.repos.d/epel.repo http: ...
- Windows Server 2012关机的几种方法
综合使用方法如下: 1.shutdown -r –f 強制重新启动 2.shutdown –s –f 強制关闭 方法/步骤 1 首先把鼠标移到任务栏右下角,时间往右一点小空位,稍微停留一 ...
- day03-hdfs的客户端操作\hdfs的java客户端编程
5.hdfs的客户端操作 客户端的理解 hdfs的客户端有多种形式: 1.网页形式 2.命令行形式 3.客户端在哪里运行,没有约束,只要运行客户端的机器能够跟hdfs集群联网 文件的切块大小和存储的副 ...
- quick-cocos2d-x游戏开发【1】——引擎结构总览和创建项目
好吧,我还是忍不住想写点关于quick的学习笔记,确实网上关于它的教程太少太少了,简单把自己的所学所得分享一下,有不正确之处还请拍砖. 首先下载引擎包.触控收购quick之后.如今cocos中文站的主 ...
- C语言++a与a++的实现机制与操作符结合优先级
看到一道"经典Linux C"面试题,关于左值和右值的. 华为笔试题 1.写出推断ABCD四个表达式的是否正确, 若正确, 写出经过表达式中 a的值(3分) int a = 4; ...
- Python3 读取和写入excel
https://blog.csdn.net/weixin_43094965/article/details/82226263一.Excel 1.Excel文件三个对象 workbook: 工作簿,一个 ...
- WEB端应该使用DataTable/DataSet吗？
有一次和同事讨论起具体的技术细节,同事说不要用什么实体类,从数据库访问到的数据,直接用DataTable.DataSet 就好.理由是,从获取到的数据集转换成实体类,有一定的性能损耗. 呵呵,性能.我 ...
- 2016/2/22 1、Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
- HDU 4445 数学-抛物运动
D - Crazy Tank ...
- 千万数据条 用户特征数据 写入mysql
from mysql_tool import * import copy s = ''' INSERT INTO `qqzone`.`myu` (`id`, `uid`, `age`, `gender ...