jquery手写轮播图_用jQuery如何手写一个简单的轮播图?(附代码)
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
用 jQuery 手写轮播图
先上个效果截图:
主要包含以下功能点:
* 1、页面加载完,自动循环翻页
* 2、翻页按钮,翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入,停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)
主要包含以下功能点:
* 1、页面加载完,自动循环翻页
* 2、翻页按钮,翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入,停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)
好了,直接上代码:
轮播图 - jQuery 版本
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
/**
* 轮播图布局样式
*/
/**
* 0、轮播图容器
*/
#container{
position: relative;
width: 600px;
height: 400px;
margin: 50px auto;
overflow: hidden;
}
/**
* 1、图片(模拟)
*/
ul#imgs{
position: absolute;
width: calc(600px * 7);
left: -600px;
}
ul#imgs li{
float: left;
width: 600px;
height: 400px;
background-color: #42B983;
color: white;
text-align: center;
line-height: 400px;
font-size: 100px;
}
#imgs li:nth-child(odd){
/* 模拟图片 */
/*background-color: #9ACD32;*/
}
/**
* 2、前后翻页按钮
*/
#prev,#next{
position: absolute;
top: calc(50% - 15px);;
width: 40px;
height: 30px;
background-color: yellow;
border: none;
font-weight: bold;
font-size: 16px;
cursor: pointer;
opacity: .6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#prev,#next:focus{
outline: none;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
/**
* 3、小圆点定点翻页
*/
ul#index{
position: absolute;
top: 360px;
left: calc(50% - 55px);
height: 12px;
}
ul#index li{
float: left;
height: 12px;
width: 12px;
margin: 0 5px;
border-radius:50%;
background-color: #800080;
opacity: .4;
cursor: pointer;
}
ul#index li.active{
opacity: 1;
}
- 5
- 1
- 2
- 3
- 4
- 5
- 1
<
>
/**
* 事件绑定
* 1、页面加载完,自动循环翻页
* 2、翻页按钮,翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入,停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)
*/
/**
* 0、自动轮播
*/
/**
* 一些可以设置的参数
*/
var PAGE_WIDTH = 600,
PAGE_SLIDE_TIME = 600, //单页滑动时间
PAGE_INTERVAL = 1200 + PAGE_SLIDE_TIME, //换页间隔时间
curIndex = 1, //合法取值 1 ~ 5(0 表示左边假的,6表示右边假的)
isPaging = false //是否正在翻页(用来处理连续点击翻页产生的bug)
var intervalId;
$(function(){
intervalId = setInterval(next,PAGE_INTERVAL)
})
/**
* 1、页面按钮
*/
$("#next").click(function(){
next()
})
$("#prev").click(function(){
next(false)
})
$("#index li").click(function(){
next($(this).index() + 1)
})
/**
* 2、鼠标出入
*/
$("#container").hover(function(){
clearInterval(intervalId)
},function(){
intervalId = setInterval(next,PAGE_INTERVAL)
})
/**
* 翻页核心功能
* next(boolean|number])
*
* boolean: 表示前后翻页
* number: 表示定点翻页
*/
function next(flag=true){
if(isPaging){
return
}
isPaging = true;
var tempIndex = curIndex;
//1 确定要翻过去的页码,计算 left 值
typeof flag === "boolean" && (curIndex += flag ? 1 : -1)
typeof flag === "number" && (curIndex = flag)
left = - curIndex * PAGE_WIDTH
//2 执行翻页动画
$("#imgs").animate({"left":left},PAGE_SLIDE_TIME,function(){
if(curIndex == 0 || curIndex == 6){
//页码校正
curIndex == 0 && (curIndex = 5);
curIndex == 6 && (curIndex = 1)
left = - curIndex * PAGE_WIDTH
$("#imgs").css("left",left)
}
//清除正在翻页标志
isPaging = false
})
//3 同步点的状态
if(curIndex == 0 || curIndex == 6){
curIndex == 0 && updateIdxState(0,4);
curIndex == 6 && updateIdxState(4,0);
}else{
updateIdxState(tempIndex -1,curIndex -1)
}
function updateIdxState(oldIdx,newIdx){
$("#index li").eq(oldIdx).removeClass("active")
$("#index li").eq(newIdx).addClass("active")
}
}
更多web前端知识,请查阅 HTML中文网 !!
jquery手写轮播图_用jQuery如何手写一个简单的轮播图?(附代码)相关推荐
- pandas 多折线图_干货:使用pandas和seaborn制作炫酷图表(附代码)
原标题:干货:使用pandas和seaborn制作炫酷图表(附代码) 我们介绍过用matplotlib制作图表的一些tips,感兴趣的同学可以戳→纯干货:手把手教你用Python做数据可视化(附代码) ...
- 自己写php模板引擎,如何用php编写一个简单的模板引擎(附代码)
php web开发中广泛采取mvc的设计模式,controller传递给view层的数据,必须通过模板引擎才能解析出来.实现一个简单的仅仅包含if,foreach标签,解析$foo变量的模板引擎. 编 ...
- 制作一个简单的轮播图(详解新手教学)
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础 本文使用技术: H ...
- 制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
- python画k线图_小白学Python(14)——pyecharts 绘制K线图 Kline/Candlestick
Kline-基本示例 from pyecharts import options as opts from pyecharts.charts import Kline data = [ [2320.2 ...
- puml绘制思维导图_强推:9款超好用思维导图APP
思维导图是由英国著名教育学家东尼·博赞发明的一种思维利器,被誉为大脑的"瑞士军刀".运用思维导图,我们可以便捷地整理笔记.收集想法和统筹事项. 一. MindMaster 说起思维 ...
- 用html+css+jQuery制作一个简单的流程图/步骤图
首先在页面内需要呈现的区域创建一个容器,用来之后append新元素. <body><div class="container"></div>&l ...
- wps图表中如何插入甘特图_如何通过使用D3可视化数据集来构建类似甘特图的图表...
wps图表中如何插入甘特图 by Déborah Mesquita 由DéborahMesquita 如何通过使用D3可视化数据集来构建类似甘特图的图表 (How to build a Gantt-l ...
- python双柱状图与双折线图_双坐标实现图标中同时存在柱状图和折线图
工作中经常会遇到在处理数据的时候,需要将柱状图和折线图同时放到一张表中,这怎么实现的呢,下面将讲述. 工具/原料 excel表 方法/步骤 1 以上表为例,将不良品重量和不良品率同时做到一张表上为目标 ...
最新文章
- ARM系列处理器和架构
- 用shell脚本监控进程是否存在 不存在则启动的实例
- 以下哪个不是迭代算法的缺点_海量数据分库分表方案(一)算法方案
- hs300 quant
- LeetCode Algorithm 700. 二叉搜索树中的搜索
- (56)zabbix Screens视图配置
- 用计算机计算电力系统故障,用计算机计算电力系统故障的方法.ppt
- jsp 页面刷新,EasyUI刷新、加载
- Java 性能测试的四项原则
- 在linux下如何修改DNS地址
- 如何在SSD和HDD VPS主机之间进行选择
- 利用计算机建立动画中的 画面 由,计算机图形术在三维动画中的应用.doc
- 修改tomcat的临时文件夹_解决:tomcat重新部署会删除临时文件以及临时文件夹
- php怎么实现网页切图,CSS_网站页面切图与CSS注意事项,一、Web页面切图
1) Web页面的 - phpStudy...
- 总结一下m3u8格式相关问题
- php微信卡包代码,微信卡券,在卡包中跳转到小程序的字段怎么填写
- php数据库操作类库doctrine使用全攻略
- visual studio code打开预览.md文件
- 计算机键盘按键失灵,电脑键盘失灵怎么办?4个小技巧解决电脑键盘失灵问题...
- Intellij IDEA使用(一)—— 安装Intellij IDEA(ideaIU-2017.2.3)并完成Intellij IDEA的简单配置
热门文章
- MIUI发布会PPT模板
- 这几年进厂基本都是通过劳务
- hyper-v无法连接本地计算机,Win10内置虚拟机Hyper-V如何联网 Hyper-V显示连接错误是无效操作的解决方法...
- 数列科技宣布开源Takin:性能测试3.0时代来临
- Java Poi Word 添加页眉文字和图片
- ps给图片加钢印方法
- c语言中123e,【单选题】以下选项中合法的常量是
A. 2.7e B. 9 9 9 C. 123E 0.2 D. 0Xab
- ping命令加时间显示
- 包管理器作用及特点:conda pip dnf vcpkg
- 环保数采仪是什么_环保数采仪类型