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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
Angular Renderer (渲染器)的具体使用
May 03 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 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
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
easy_install python包安装管理工具介绍
2013/02/10 Python
Python求解平方根的方法
2015/03/11 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
统计系教授推荐信
2014/02/28 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
广播体操口号
2014/06/18 职场文书
户籍证明格式
2014/09/15 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
继续教育个人总结
2015/03/03 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server