最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现适合新闻类图片的轮播效果
时间:2022-11-14 22:03:01 编辑:袖梨 来源:一聚教程网
代码如下 | 复制代码 |
* { 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; }
$(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(' start_interval(); $('.carousel-area').hover( function() { //鼠标悬停事件 if (start_carousel_flag) { //已经开始interval end_interval(); } }, function() { //鼠标离开事件 if (!start_carousel_flag) { //没有开始interval start_interval(); } } ) }) |