基于jQuery实现无缝轮播与左右点击效果


Posted in jQuery onMay 13, 2018

在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见。

这个是我要的效果

基于jQuery实现无缝轮播与左右点击效果

进入正题,首先是布局,布局的原理就是在DIV中创建ul标签,ul中插入li标签,在里插入图片,你想要几个图片轮播,插入几个li。布局上主要的点在于div设置大小,加上overflow:hidden;让超出部分隐藏,ul的长度是所有图片的总长度,li浮动。

html代码

<div id="djlb">
        <div id="bigul">
          <ul>
            <li>
              <img src="../images/djlb1.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb3.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
        </div>
      </div>
      <div id="aniu">
        <div id="bleft"></div>
        <div id="bright"></div>
      </div>  
    </div>

css代码

#djlb {
  width: 1200px;
  height: 600px;
  overflow: hidden;
}
#bigul {
  width: 1800px;
  height: 560px;
}
#bigul > ul {
  position: relative;
  width: 300px;
  height: 560px;
  float: left;
}
#bigul > ul > li:nth-child(even) {
  position: absolute;
  display: none;
}
#bigul > ul > li {
  width: 300px;
  height: 560px;
  float: left;  
}
#aniu {
  position: relative;
}
#aniu > div {
  position: absolute;
}
#aniu > div:first-child{
  left:-55px;
  top: -290px;
  display: inline-block;
  border-left: 6px solid #c2c2c2;
  border-top: 6px solid #c2c2c2;
  width: 37px;
  height: 37px;
  transform: rotate(-45deg);
}
#aniu > div:last-child{
  left: 1210px;
  top: -290px;
  display: inline-block;
  border-right: 6px solid #c2c2c2;
  border-bottom: 6px solid #c2c2c2;
  width: 37px;
  height: 37px;
  transform: rotate(-45deg);
}
#aniu > div:first-child:hover{
  border-left: 6px solid #ffcc00;
  border-top: 6px solid #ffcc00;
}
#aniu > div:last-child:hover {
  border-right: 6px solid #ffcc00;
  border-bottom: 6px solid #ffcc00;
}

主要说明一下我js的思路;

$(function () {
 var i = 0, tick, list, ul = $("#bigul");
 $("#bright").click(function () {
 $("#bigul").animate({ "margin-left": -300 }, 30000, function () {//当你执行完了后发生的事件
   list =ul.find("ul");  //正常的话ul就是li,因为我这个需要鼠标浮动显示隐藏,结构一样  
   ul.append(list.first()); //ul追加到最后一个
   ul.css("margin-left",0); //在每一次点击过后,margin-left初始化为零,为什么嘛要初始化呢? 思考一下?
  });//这样就向右无限循环了,就像队列一样
 if (tick) {
  clearTimeout(tick);
 } //清除上一次定时器
 tick = setTimeout(function () {
   $("#bright").click();
 }, 30000); 定时器自动的部分
 });
 $("#bleft").click(function(){
   list = ul.find("ul"); 
   list.last().insertBefore(list.first()); // 当第一次点击时,把最后的搬到前面来,
   ul.css("margin-left",-300);
   ul.animate({ "margin-left": 0 }, 3000); //同样这个问题?? 
 if (tick) {
   clearTimeout(tick);
 }
 tick = setTimeout(function () {
   $("#bleft").click();
 }, 3000);
 });
 $("#bright").click(); //自动向右事件
});

 现在和你说为什么,如果不初始化,你点击右边的时候,他会重第一张到第三张,因为当你把第一个搬到后面一个时,ul父盒子左边是0,下一次移动他会自动补全他的位置,也就是两个位置,所以直接就是第三张图了,我是画图才想明白的嘻嘻!

整个思路:

运用animate让li移动,

当向右点击时,运用append()方法把第一个张追加到最后一张,而且要每次移动要清除一下子。

向左点击时,运用insertBefore()把最后一张插入第一张,也要清除一下

tick是我们定义的定时器settimeout

最后一句就是自动向右事件了

鼠标移动显示隐藏就是用到了mouseout() 和show(),hide()就ok了

总结

以上所述是小编给大家介绍的基于jQuery实现无缝轮播与左右点击效果 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现模糊查询的方法分析
May 10 #jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
You might like
ftp类(myftp.php)
2006/10/09 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
javascript工具库代码
2012/03/29 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
微信小程序多张图片上传功能
2017/06/07 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
JavaScript中Dom操作实例详解
2019/07/08 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
详解python的变量缓存机制
2021/01/24 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
餐厅总经理岗位职责
2013/12/31 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
工作推荐信范文
2014/05/10 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书