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 相关文章推荐
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
React实现动效弹窗组件
Jun 21 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 随机生成10位字符代码
2009/03/26 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
js实现登录拖拽窗口
2020/02/10 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
总结python中pass的作用
2019/02/27 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
小学生演讲稿大全
2014/04/25 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
设备收款委托书范本
2014/10/02 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle