基于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实现图片轮播效果
May 08 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
python虚拟环境virualenv的安装与使用
2016/12/18 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python 的AES加密与解密实现
2019/07/09 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python使用贪婪算法解决问题
2019/10/22 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
教师辞职报告范文
2014/01/20 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB