js实现适合新闻类图片的轮播效果


Posted in Javascript onFebruary 05, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Picture carousel</title>
<style>
*
{
 margin: 0;
 padding: 0;
}
.carousel-container
{
 overflow: hidden;
 width: 405px;/* 130*3+5*3 = 405 */
 height: 150px;
 margin: 50px auto;
 background-color: #2c2c2c;
}
.carousel-area
{
 width: 1350px;/* 675*2 = 1350 */
 height: 150px;
}
.carousel-ul
{
 float: left;
 overflow: hidden;
 width: 675px;/* 130*5+5*5 = 675 */
 height: 150px;
}
.carousel-ul li
{
 float: left;
 overflow: hidden;
 width: 130px;
 height: 130px;
 margin: 10px 5px 10px 0;
 list-style-type: none;
}
 </style>
</head>
<body>
 <div class="carousel-container">
 <div class="carousel-area">
 <ul class="carousel-ul" id="carousel-ul-1">
 <li><img src="img/1.gif" alt=""></li>
 <li><img src="img/2.jpg" alt=""></li>
 <li><img src="img/3.jpg" alt=""></li>
 <li><img src="img/4.jpg" alt=""></li>
 <li><img src="img/5.gif" alt=""></li>
 </ul>
 </div>
 </div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
 var carousel_interval_id, //interval ID
 start_carousel_flag = false, //是否开始interval
 carousel_speed = 50, //滚动速度(px/s),carousel_speed=1000/interval时间间隔。
 start_interval = function() { //执行interval
  start_carousel_flag = true;
  carousel_interval_id = setInterval(function() {
  var margin_left = $('.carousel-area').css('margin-left');
  $('.carousel-area').css('margin-left', (parseInt(margin_left) - 1) + 'px'); //不断左移1px
  if (parseInt($('.carousel-area').css('margin-left')) <= -($('.carousel-ul').width())) { //轮播部分超出容器后复位
   $('.carousel-area').css('margin-left', 0);
  }
  }, 1000 / carousel_speed)
 },
 end_interval = function() { //停止interval
  start_carousel_flag = false;
  carousel_interval_id = clearInterval(carousel_interval_id);
 }
 $('.carousel-area').append('<ul class="carousel-ul">' + $('.carousel-ul').html() + '</ul>'); //复制carousel-ul,填补左移后出现的无内容区域,以此完成循环
 start_interval();
 $('.carousel-area').hover(
 function() { //鼠标悬停事件
  if (start_carousel_flag) { //已经开始interval
  end_interval();
  }
 },
 function() { //鼠标离开事件
  if (!start_carousel_flag) { //没有开始interval
  start_interval();
  }
 }
 )
})
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
js中this对象用法分析
Jan 05 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
js实现验证码功能
Jul 24 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 #Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 #Javascript
thinkjs之页面跳转同步异步操作
Feb 05 #Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 #Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 #Javascript
js仿小米手机上下滑动效果
Feb 05 #Javascript
简单实现js无缝滚动效果
Feb 05 #Javascript
You might like
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
php strftime函数的详细用法
2018/06/21 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
在Python中使用第三方模块的教程
2015/04/27 Python
python实现批量监控网站
2016/09/09 Python
详解python 发送邮件实例代码
2016/12/22 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python模拟斗地主发牌
2020/04/22 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
实习生个人的自我评价
2013/12/08 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
德语专业求职信
2014/03/12 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
小学家长意见怎么写
2015/06/03 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL