jquery实现左右轮播切换效果


Posted in jQuery onJanuary 01, 2018

本文实例为大家分享了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)); 
?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
You might like
php截取后台登陆密码的代码
2012/05/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
python中的lambda表达式用法详解
2016/06/22 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
社区安全检查制度
2014/02/03 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
企业党员个人自我评价
2014/09/20 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
学雷锋倡议书
2015/01/19 职场文书
教师党员自我评价2015
2015/03/04 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android