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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现本地存储
Dec 22 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之第七天
2006/10/09 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
西式婚礼证婚词
2014/01/12 职场文书
校园文化建设方案
2014/02/03 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
教师求职自荐信
2015/03/26 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server