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 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
iframe实用操作锦集
Apr 22 Javascript
创建一个类Person的简单实例
May 17 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 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
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP 断点续传实例详解
2017/11/11 PHP
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python深入学习之对象的属性
2014/08/31 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
百度吧主申请感言
2014/01/12 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
七一讲话心得体会
2014/09/05 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
小学教师教育随笔
2015/08/14 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android