热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:用jQuery手写轮播图

篇首语:本文由编程笔记#小编为大家整理,主要介绍了用jQuery手写轮播图相关的知识,希望对你有一定的参考价值。先上个效果截图:

篇首语:本文由编程笔记#小编为大家整理,主要介绍了用 jQuery 手写轮播图相关的知识,希望对你有一定的参考价值。


先上个效果截图:

技术分享图片

主要包含以下功能点:

* 1、页面加载完,自动循环翻页
* 2、翻页按钮,翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入,停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)

主要包含以下功能点:

* 1、页面加载完,自动循环翻页
* 2、翻页按钮,翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入,停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)

上代码:


DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 - jQuery 版本title>
<style>
*
{
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;
}
style>
<script src="jquery-1.12.4.js" type="text/Javascript" charset="utf-8">script>
head>
<body>

<div id="container">

<ul id="imgs">
<li>
<div class="img">5div>
li>
<li>
<div class="img">1div>
li>
<li>
<div class="img">2div>
li>
<li>
<div class="img">3div>
li>
<li>
<div class="img">4div>
li>
<li>
<div class="img">5div>
li>
<li>
<div class="img">1div>
li>
ul>
<button id="prev"><button>
<button id="next">>button>
<ul id="index">
<li class="active">li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
<script type="text/Javascript">
/**
* 事件绑定
* 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 = (curIndex + 5) % 5
left
= - curIndex * PAGE_WIDTH
$(
"#imgs").css("left",left)
}
//清除正在翻页标志
isPaging = false
})

//3 同步点的状态
$("#index li").eq(tempIndex -1).removeClass("active")
$(
"#index li").eq(curIndex -1).addClass("active")
}
script>
body>
html>

 












推荐阅读
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 全面解析JavaScript代码注释技巧与标准规范
    在Web前端开发中,JavaScript代码的可读性和维护性至关重要。本文将详细介绍如何有效地使用注释来提高代码的可读性,并探讨JavaScript代码注释的最佳实践和标准规范。通过合理的注释,开发者可以更好地理解和维护复杂的代码逻辑,提升团队协作效率。 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • 本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求,并使用动态Form来优化开发流程,确保代码的简洁性和可维护性。同时,系统提供了用户友好的错误提示,以增强用户体验。 ... [详细]
  • 深入剖析Java中SimpleDateFormat在多线程环境下的潜在风险与解决方案
    深入剖析Java中SimpleDateFormat在多线程环境下的潜在风险与解决方案 ... [详细]
  • 本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术,用户无需输入传统的登录ID即可完成身份验证,从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能,确保系统的稳定性和可靠性。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
  • 在使用 Qt 进行 YUV420 图像渲染时,由于 Qt 本身不支持直接绘制 YUV 数据,因此需要借助 QOpenGLWidget 和 OpenGL 技术来实现。通过继承 QOpenGLWidget 类并重写其绘图方法,可以利用 GPU 的高效渲染能力,实现高质量的 YUV420 图像显示。此外,这种方法还能显著提高图像处理的性能和流畅性。 ... [详细]
  • 【问题】在Android开发中,当为EditText添加TextWatcher并实现onTextChanged方法时,会遇到一个问题:即使只对EditText进行一次修改(例如使用删除键删除一个字符),该方法也会被频繁触发。这不仅影响性能,还可能导致逻辑错误。本文将探讨这一问题的原因,并提供有效的解决方案,包括使用Handler或计时器来限制方法的调用频率,以及通过自定义TextWatcher来优化事件处理,从而提高应用的稳定性和用户体验。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • 该大学网站采用PHP和MySQL技术,在校内可免费访问某些外部收费资料数据库。为了方便学生校外访问,建议通过学校账号登录实现免费访问。具体方案可包括利用学校服务器作为代理,结合身份验证机制,确保合法用户在校外也能享受免费资源。 ... [详细]
  • 在Cisco IOS XR系统中,存在提供服务的服务器和使用这些服务的客户端。本文深入探讨了进程与线程状态转换机制,分析了其在系统性能优化中的关键作用,并提出了改进措施,以提高系统的响应速度和资源利用率。通过详细研究状态转换的各个环节,本文为开发人员和系统管理员提供了实用的指导,旨在提升整体系统效率和稳定性。 ... [详细]
  • 在本文中,我们将详细介绍如何构建一个用于自动回复消息的XML类。当微信服务器接收到用户消息时,该类将生成相应的自动回复消息。以下是具体的代码实现:```phpclass We_Xml { // 代码内容}```通过这个类,开发者可以轻松地处理各种消息类型,并实现高效的自动回复功能。我们将深入探讨类的各个方法和属性,帮助读者更好地理解和应用这一技术。 ... [详细]
  • Python 程序转换为 EXE 文件:详细解析 .py 脚本打包成独立可执行文件的方法与技巧
    在开发了几个简单的爬虫 Python 程序后,我决定将其封装成独立的可执行文件以便于分发和使用。为了实现这一目标,首先需要解决的是如何将 Python 脚本转换为 EXE 文件。在这个过程中,我选择了 Qt 作为 GUI 框架,因为之前对此并不熟悉,希望通过这个项目进一步学习和掌握 Qt 的基本用法。本文将详细介绍从 .py 脚本到 EXE 文件的整个过程,包括所需工具、具体步骤以及常见问题的解决方案。 ... [详细]
author-avatar
诸葛二蛋
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有