基于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解析获取JSON数据
Apr 08 jQuery
jquery replace方法去空格
May 08 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery自定义组件实例详解
Dec 31 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
Yii清理缓存的方法
2016/01/06 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
JS 判断代码全收集
2009/04/28 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
擅自离岗检讨书
2014/02/11 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
档案信息化建设方案
2014/05/16 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书