jquery实现左右轮播切换效果
时间:2019-04-12
本文章向大家介绍jquery实现左右轮播切换效果,主要包括jquery实现左右轮播切换效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码,供大家参考,具体内容如下
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/banner.css" rel="external nofollow" > </head> <body> <div id="banner"> <!-- 图片区域 --> <ul class="banner-img" data-load="bannerImgs"> <!-- <li> <a href="${product-details.html?lid=28}" rel="external nofollow" > <img src="${img/index/banner1.png}"> </a> </li> --> <li style="left:50%;"> <img src="img/index/banner1.png"> </li> </ul> <!--左右方向按钮--> <a href="javascript:;" class="ck-slide ck-left" data-move="left"></a> <a href="javascript:;" class="ck-slide ck-right" data-move="right"></a> <!--导航小圆点--> <ul class="indicators" data-load="bannerInds"> <!-- <li></li> --> </ul> </div> <script src="js/jquery.min.js"></script> <script src="js/banner.js"></script> </body> </html>
css:
/*banner部分*/ #banner{ width:960px; height:384px; overflow:hidden; position:relative; } #banner ul.banner-img{ position:absolute; left:0; } #banner ul.banner-img>li{float:left;width:960px;} #banner ul.banner-img img{ width:960px; height:384px; } #banner a.ck-slide{ position:absolute; top:150px; width:35px; height:70px; border-radius:3px; background:#000; opacity:0.15; transition:all .3s linear; } #banner a.ck-left{ left:40px; background: #000 url(../img/index/arrow-left.png) no-repeat center center; } #banner a.ck-right{ right:0px; background:#000 url(../img/index/arrow-right.png) no-repeat center center; } #banner a.ck-slide:hover{ opacity:0.3; } #banner ul.indicators{ position:absolute; bottom:10px; left:50%; margin-left:-34px; list-style: none; } #banner ul.indicators li{ width:12px; height:12px; background:#fff; border-radius:50%; float:left; margin-right:5px; transition:all .2s linear; } #banner ul.indicators li:hover,#banner ul.indicators li.hover{ cursor:pointer; background-color:#0AA1ED; }
js:
$(()=>{ $.ajax({ type:"get", url:"php/xz.php", dataType:"json" }).then(data=>{ console.log(data); var html=""; const LIWIDTH=960; for(var item of data){ html+=`<li> <a href="${item.href}" rel="external nofollow" title="${item.title}"> <img src="${item.img}"> </a> </li>`; } html+=`<li> <a href="${data[0].href}" rel="external nofollow" title="${data[0].title}"> <img src="${data[0].img}"> </a> </li>`; console.log(html); var $ulImg=$(".banner-img"); $ulImg.html(html).css("width",LIWIDTH*(data.length+1)); var $ids=$(".indicators"); $ids.html("<li></li>".repeat(data.length)).children().first().addClass("hover"); const WAIT=2000,DURA=1000; var moved=0,timer=null; function move(dir=1){ moved+=dir; console.log("moved="+moved); $ulImg.animate({ left:-LIWIDTH*moved },DURA,()=>{ if(moved%data.length==0){ moved=0; $ulImg.css("left",0); } $ids.children(`li:eq(${moved})`).addClass("hover").siblings().removeClass("hover"); }) } var timer=setInterval(move,WAIT); $('#banner').hover( ()=>{ //这个是什么? clearInterval(timer), timer=null; }, ()=>{ timer=setInterval(move,WAIT); } ); $("[data-move=right]").click(()=>{ //防止动画叠加 /*clearInterval(timer); timer=null; move(); timer=setInterval(move,WAIT);*/ if(!$ulImg.is(":animated")) move(); }); $("[data-move=left]").click(()=>{ if(!$ulImg.is(":animated")){ if(moved==0){ $ulImg.css("left",-LIWIDTH*data.length); moved=data.length; } move(-1); } }); $ids.on("mouseover","li",function(){ var $li=$(this); var i=$li.index(); moved=i; $ulImg.stop(true).animate({ left:-LIWIDTH*moved },DURA,()=>{ $ids.children(":eq("+i+")") .addClass("hover") .siblings().removeClass("hover"); }) }); }) })
php:
<?php header("Content-type:application/json"); require_once("init.php"); $sql="SELECT img,title,href FROM xz_index_carousel"; $result=mysqli_query($conn,$sql); echo json_encode(mysqli_fetch_all($result,1)); ?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 用python基于2015-2016年的NBA常规赛及季后赛的统计数据分析
- 数值信息的机器级存储
- ABAP和Java里关于DEFAULT(默认)机制的一些语言特性
- Golang语言社区--golang 进度下载文件
- Golang语言社区--Go语言基础第七节函数调用等
- Hyperledger也能实现Token代币
- 经典Java面试题收集(二)
- 关于表联结方法(一)(r3笔记第57天)
- Go 语言读写 Excel 文档
- 关于索引的使用模式(r3笔记56天)
- 关于oracle中的半连接(r3笔记55天)
- 关于正则表达式第三篇(r3笔记第52天)
- 关于正则表达式第四篇(r3笔记第53天)
- 外部表简单总结(r3笔记第51天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
- Yii2处理密码加密及验证的方法
- PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
- python如何输出反斜杠
- 在Laravel5中正确设置文件权限的方法
- asp函数split()对应php函数explode()
- php获取目录下所有文件及目录(多种方法)(推荐)
- Python基于Twilio及腾讯云实现国际国内短信接口
- PHP __call()方法实现委托示例
- PHP中rename()函数的妙用讲解
- php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
- php实现小程序支付完整版
- Yii2框架视图(View)操作及Layout的使用方法分析
- php实现单笔转账到支付宝功能
- PHP使用Redis实现Session共享的实现示例