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中的location用法简单介绍
Mar 07 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python 检测图片是否有马赛克
2020/12/01 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
国企干部对照检查材料
2014/08/22 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
2014年售票员工作总结
2014/11/19 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书