基于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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jquery插件懒加载的示例
Oct 24 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错误和异长常处理总结
2014/03/06 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
小学优秀班集体申报材料
2014/05/25 职场文书
小学运动会口号
2014/06/07 职场文书
商务英语专业求职信
2014/06/26 职场文书
物理学专业求职信
2014/07/04 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
信息技术研修心得体会
2016/01/08 职场文书
java代码实现空间切割
2022/01/18 Java/Android