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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
javascript实现移动端轮播图
Dec 09 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 google或baidu分页代码
2009/11/26 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python中sets模块的用法实例
2014/09/30 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python先序遍历二叉树问题
2017/11/10 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python通过链接抓取网站详解
2019/11/20 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
2014年大学生四年规划书范文
2014/04/03 职场文书
学校师德承诺书
2014/05/23 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
会议主持词通用版
2019/04/02 职场文书