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实现 RadioButton做必选校验功能
Jun 15 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
Jquery $.map使用方法实例详解
Sep 01 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP中的Memcache详解
2014/04/05 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
用客户端js实现带省略号的分页
2013/04/27 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python中的is和id用法分析
2015/01/26 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
详解python-图像处理(映射变换)
2019/03/22 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
小学优秀辅导员事迹材料
2014/05/11 职场文书
大学生应聘求职信
2014/05/26 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python