脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现适合新闻类图片的轮播效果

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

 更新时间：2017年02月05日 16:39:40   作者：Lasy  
本文主要分享了js实现适合新闻类图片轮播效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧

话不多说，请看代码：

<!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实现选项卡实例详解

    JS实现选项卡实例详解

    这篇文章主要介绍了JS实现选项卡的方法,结合实例形式详细讲述了JavaScript实现选项卡的布局与功能实现的完整步骤及相关技巧,需要的朋友可以参考下
    2015-11-11
  • JS获取复选框的值,并传递到后台的实现方法

    JS获取复选框的值,并传递到后台的实现方法

    下面小编就为大家带来一篇JS获取复选框的值,并传递到后台的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度空间的弹出窗口和拖拽效果(也就是popup.js),代码精简，效果也很好，我们可以在很多大型网站上见到这种效果，在我的项目中也使用了该js。
    2010-04-04
  • javascript基础知识之html5轮播图实例讲解（44）

    javascript基础知识之html5轮播图实例讲解（44）

    这篇文章主要为大家详细介绍了javascript基础知识之html5轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • ES6新语法之解构实践指南

    ES6新语法之解构实践指南

    所谓解构就是解构聚合数据,下面这篇文章主要给大家介绍了关于ES6新语法之解构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • js中取得变量绝对值的方法

    js中取得变量绝对值的方法

    这篇文章主要介绍了js中取得变量绝对值的方法,较为详细的分析了js中abs方法取绝对值的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • BootStrap中Tab页签切换实例代码

    BootStrap中Tab页签切换实例代码

    这篇文章主要介绍了BootStrap中Tab页签切换实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-05-05
  • JS删除字符串中重复字符方法

    JS删除字符串中重复字符方法

    这篇文章主要介绍了JS如何删除字符串中重复字符,需要的朋友可以参考下
    2014-03-03
  • Bootstrap模态框案例解析

    Bootstrap模态框案例解析

    这篇文章主要介绍了Bootstrap模态框案例解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • JavaScript 中“...” 的多种用途及代码实例

    JavaScript 中“...” 的多种用途及代码实例

    扩展运算符（Spread Operator）和剩余参数（Rest Parameters）是JavaScript中的两个非常有用的特性,实际应用中,这些功能可以用于合并数组、复制对象属性等操作,极大地提高了JavaScript编程的便利性和功能性,感兴趣的朋友跟随小编一起看看吧
    2024-09-09

最新评论