基于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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现购物车基本功能
Oct 25 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
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
PHP xpath()函数讲解
2019/02/11 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
浅谈Python的文件类型
2016/05/30 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
QML实现钟表效果
2020/06/02 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
土木工程专业大学毕业生求职信
2013/10/13 职场文书
难忘的一课教学反思
2014/04/30 职场文书
优秀毕业生求职信
2014/06/05 职场文书
工伤私了协议书范本
2014/11/24 职场文书
小学运动会开幕词
2016/03/04 职场文书