编程 Javascript

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>

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

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

- Author -

Lasy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript自动设置IFrame高度的小例子

Jun 08 Javascript

js 去除字符串第一位逗号的方法

Jun 07 Javascript

JavaScript检测鼠标移动方向的方法

May 22 Javascript

WordPress中利用AJAX异步获取评论用户头像的方法

Jan 08 Javascript

js实现prototype扩展的方法(字符串,日期,数组扩展)

Jan 14 Javascript

BooStrap对导航条的改造实践小结

Sep 21 Javascript

js实现旋转木马效果

Mar 17 Javascript

React学习之事件绑定的几种方法对比

Sep 24 Javascript

js 毫秒转天时分秒的实例

Nov 17 Javascript

js实现二级菜单点击显示当前内容效果

Apr 28 Javascript

Postman的下载及安装教程详解

Oct 16 Javascript

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

Mar 14 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