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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
JS 网站性能优化笔记
2011/05/24 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
vue实现弹幕功能
2019/10/25 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
实例详解Python模块decimal
2019/06/26 Python
python 初始化一个定长的数组实例
2019/12/02 Python
pandas参数设置的实用小技巧
2020/08/23 Python
Django url 路由匹配过程详解
2021/01/22 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
Linux如何压缩可执行文件
2013/10/21 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
大四毕业生自荐书
2014/07/05 职场文书
单位活动策划方案
2014/08/17 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年材料员工作总结
2015/04/30 职场文书
七年级作文之环保作文
2019/10/17 职场文书