图片轮换-jQuery

7个展示位，每次向左移动1位

<div class="user-box"><div id="user1" class="user-item"></div><div id="user2" class="user-item"></div><div id="user3" class="user-item"></div><div class="right-box"><div id="user4"></div><div id="user5"></div><div id="user6"></div><div id="user7"></div><div class="shadow"></div></div>
</div>

var speed = 5000;
var playTimer = setInterval(runPlay, speed);
var a = 0, b = 1, c = 2, d = 3, e = 4, f = 5, g = 6;
var user_url = '/api/comment/getCommentList';
var userDataLeft  = [];
var userDataRight = [];
var userLastIndex = 0;
$.ajax({type : "get",url : user_url,success : function(data){if (data.data.length > 0) {userLastIndex = data.data.length - 1;$.each(data.data,function(i,item){var _html = '<a href="'+item.url+'">' +'<div class="head"><img src="'+item.user.avatar+'" />' +'<h5>'+item.user.name+'</h5></div>' +'<div class="intro">'+item.content+'</div>' +'<div class="purchasedAt">Purchased At: '+item.ll_time+'</div></a>';var _avatar = '<img src="'+item.user.avatar+'"/>';userDataLeft.push(_html);userDataRight.push(_avatar);})showUsers();}}
});
function runPlay() {if (a > userLastIndex) a = 0;if (b > userLastIndex) b = 0;if (c > userLastIndex) c = 0;if (d > userLastIndex) d = 0;if (e > userLastIndex) e = 0;if (f > userLastIndex) f = 0;if (g > userLastIndex) g = 0;showUsers();a++;b++;c++;d++;e++;f++;g++;
}
function showUsers() {$("#user1").html(userDataLeft[a]);$("#user2").html(userDataLeft[b]);$("#user3").html(userDataLeft[c]);$("#user4").html(userDataRight[d]);$("#user5").html(userDataRight[e]);$("#user6").html(userDataRight[f]);$("#user7").html(userDataRight[g]);
}$(".user-box").mouseenter(function() {clearInterval(playTimer);
}).mouseleave(function() {playTimer = setInterval(runPlay, speed);
});

.user-box {position: relative;margin-top: 100px;
}
.user-box .user-item {width: 27.5%;display: inline-block;padding: 24px;box-sizing: border-box;border-radius: 10px;margin-right: 3%;background: #FAFAFA;color: #333;text-align: center;
}
.user-box .user-item:hover {box-shadow: 0px 3px 12px 0px rgba(153, 153, 153, 0.2);
}
.user-box .user-item a {text-decoration: none;
}
.user-box .user-item .head {margin-top: -60px;color: #333;
}
.user-box img {width: 68px;height: 68px;border-radius: 68px;
}
.user-box .user-item h5 {font-size: 20px;margin: 20px;
}
.user-box .user-item .intro {font-size: 16px;height: 118px;overflow: hidden;line-height: 24px;
}
.user-box .user-item .purchasedAt {margin: 32px auto 26px;font-size: 14px;color: #666;
}
.user-box .right-box {position: absolute;top: -38px;right: 0;text-align: right;
}
.user-box .right-box div {margin-bottom: 26px;
}
.user-box .right-box div:last-child {margin-bottom: 0;
}
.user-box .right-box .shadow {width: 100%;height: 70px;position: absolute;bottom: 30px;background-image: linear-gradient(180deg, transparent, #FFF);
}

3个展示位，每次更换3张

<div class="editor-Box"></div>

var speed = 5000;
var playTimer = setInterval(runPlay, speed);
var x = 0;
var editor_url = '/api/author/getAuthorList';
var resData = [{"id":1,"name":"Veronica Hope","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/08\/da54735bbe4651db8ae66df0a8ffc1059971.png","user_id":70,"instagram":"","twitter":"","lives_in":"Ohio, USA","education":"University of Alabama","intro":"Veronica Hope is our contracted writer. She always points out the pros and cons of products sharply, so as to help everyone quickly find the most suitable one. Veronica specializes in personal care products, and also has an understanding of various fields such as fashion and beauty. She always starts from the most essential features of the product and puts forward truly meaningful recommendations.","experience":"Veronica began to research beauty & care products during university, and read many fashion magazines. She has three years of guides writing experience and has always valued readers' feedback.","expertise":"[\"Beauty\"]","education_intro":"Veronica graduated from the University of Alabama with a Bachelor of Advertising. She is knowledgeable in advertising and marketing and is keen to share her life experience.","deleted_at":null,"created_at":"2021-08-03T07:24:49.000000Z","updated_at":"2021-08-03T07:31:06.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/veronica-hope-1"},{"id":4,"name":"Grace Hannigan","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/e5f56356591c7de73ea22c1167a23dd46544.png","user_id":67,"instagram":"","twitter":"","lives_in":"San Diego, California","education":"Santa Clara University","intro":"Grace Hannigan is a freelance writer. Before that, she used her love for writing about fashion, and beauty that shared her expertise. As a beauty and fashion enthusiast, Grace also enjoys trying new products and catching up to fashion shows.","experience":"Previously Grace Hannigan was the fashion assistant. \nShe has been freelance journalist who writes about skincare, makeup and fashion since 2018.","expertise":"[\"Beauty\",\"Skincare\",\"Fashion\"]","education_intro":"Grace graduated from the Santa Clara University with a sociology degree.","deleted_at":null,"created_at":"2021-08-13T09:01:22.000000Z","updated_at":"2021-09-03T03:48:58.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/grace-hannigan-4"},{"id":5,"name":"Laurel Hanson","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/21847f60571e42e54cecdcaddcf5b1695097.png","user_id":72,"instagram":"","twitter":"","lives_in":"Wellington, New Zealand","education":"University of Otago","intro":"Lucia graduated from the University of Otago, majoring in Tourism, Languages and Culture. \nWriter with over three years of experience in traveling, fashion, and beauty.","experience":"Lucia has been working in a small-sized tourism-related company for several years and then she became a freelance writer and content producer. She writes articles about all things traveling, fashion, and beauty.","expertise":"[\"Beauty\",\"Fashion\",\"Traveling\"]","education_intro":"Lucia received a Bachelor of Arts in Tourism, Languages and Cultures from the University of Otago. She knows well of the language and culture of other countries and always learns new things as well as travels to other countries to broaden her horizon.","deleted_at":null,"created_at":"2021-08-13T09:36:50.000000Z","updated_at":"2021-09-03T11:58:31.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/laurel-hanson-5"},{"id":8,"name":"Evelyn Davis","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/c64823ca955a11519bebb9c7b720636e4132.png","user_id":73,"instagram":"","twitter":"","lives_in":"Chicago, USA","education":"Pennsylvania State University","intro":"Evelyn is a fashion and beauty editor in Chicago. She is avid for clothing designing and sharing some versatile outfits. In her spare time, she always looks through magazines and videos about fashion and makeup to capture the latest fashion trends.","experience":"During her high school, she began to be interested in fashion and participate in some contests with many awards. And she has been an editor on fashion and beauty for three years.","expertise":"[\"clothing designing\",\"fashion\"]","education_intro":"Evelyn graduated from Pennsylvania State University with a Bachelor of Art Designing.","deleted_at":null,"created_at":"2021-08-13T12:11:20.000000Z","updated_at":"2021-12-22T11:52:38.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/evelyn-davis-8"},{"id":9,"name":"Lucia Hansley","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/b119af6fbe7728a0f464f4f7cb3849233751.png","user_id":62,"instagram":"","twitter":"","lives_in":"City of New Haven","education":"The University of New Haven","intro":"Professional product reviewer, loving to share good stuff with people. She’s doing funny and useful articles for readers and recommend them after her own test.","experience":"She has been a copy writer for 12 years. She has completed articles for a variety of site pages ranging from products to travel.","expertise":"[\"Fashion\",\"beauty and travel\"]","education_intro":"Master of The University of New Haven. Good knowledge of English writing","deleted_at":null,"created_at":"2021-08-19T09:32:44.000000Z","updated_at":"2021-09-03T09:41:21.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/lucia-hansley-9"},{"id":13,"name":"Lecea Hudson","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/4ec4bc7615ace0f4912c1b4ce059085d1727.png","user_id":75,"instagram":"","twitter":"","lives_in":"Chicago","education":"Boston College","intro":"Lecea Hudson is our contracted writer. She is willing to share her life, her loving stuff and help everyone find the most suitable things quickly.","experience":"Lecea Hudson has been a freelance writer since she was in college. Her understanding of beauty and fashion has earned a lot of praise and fans.","expertise":"[\"Beauty\",\"Fashion\"]","education_intro":"BA in English and Advertising","deleted_at":null,"created_at":"2021-08-20T02:01:26.000000Z","updated_at":"2021-12-22T10:19:54.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/lecea-hudson-13"},{"id":14,"name":"Mandy Franklin","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/bdcfd48925866ebe1088c04373fa0a022026.png","user_id":63,"instagram":"mandyfranklin777","twitter":"","lives_in":"New York","education":"Cornell University","intro":"Mandy Franklin is a freelance fashion, health, beauty writer and blogger based in New York. Mandy, an avid internet shopper, is the first to share money-saving and time-saving tips with the rest of the crew. She enjoys attending live music, keeping firness, catching up on Netflix shows in holiday. \nShe also has a penchant for athleisure and makeup.","experience":"Her love of fashion began in middle school, and she was captivated from the moment she received her first bag (a Coach bag, of course). During her undergraduate career, she researched how clothing fits to maximize athletic performance. She also evaluates bags, shoes, liquid foundations and other personal care products. She is a member of some industry committees, has served as an expert judge for a number of award programs, and is frequently the first to learn about new product launches.","expertise":"[\"Fashion\",\"Beauty\"]","education_intro":"BA in Journalism and English","deleted_at":null,"created_at":"2021-08-20T02:01:32.000000Z","updated_at":"2021-11-24T03:59:59.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/mandy-franklin-14"},{"id":15,"name":"Maia Carter","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/496a3a4e04edf2b7fca802309b04caa38275.png","user_id":66,"instagram":"","twitter":"","lives_in":"New York City","education":"The University of Chicago","intro":"Passionate copy writer, dedicating to producing eye-catching contents. She is good at product reviews in the fields of fashion, beauty and travel. Her writing works are so professional and logical.","experience":"Content writing expert, 11 years of copy writing","expertise":"[\"Fashion\"]","education_intro":"Master of English Literature in The University of Chicago. Good knowledge of English writing skills and focusing on reader friendly content.","deleted_at":null,"created_at":"2021-08-20T02:03:02.000000Z","updated_at":"2021-11-10T08:47:27.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/maia-carter-15"},{"id":16,"name":"Carrie Kathleen","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/c3694f7fe9929676b62e4ca1a643fe714691.png","user_id":68,"instagram":"","twitter":"","lives_in":"Atlanta, Georgia","education":"Emory University","intro":"Carrie Kathleen is a professional content writer. She is good at analyzing fashion products, cosmetics, and travel gadgets for specific use and targeted people. For each item, she has her own ideas and is very fast to catch product highlights. Her works are really brilliant. Our page viewers really like reading her collections.","experience":"As a copywriter with over 10 years of experience, Carrie Kathleen creates high-quality content for us at the very beginning. With her cooperation, we can easily go up with the trend. She's really fast and productive.","expertise":"[\"Fashion Column Writer\",\"Beauty Product Blogger\",\"Travel Gadget Expert\"]","education_intro":"Emory University","deleted_at":null,"created_at":"2021-08-20T02:21:12.000000Z","updated_at":"2021-11-17T10:18:09.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/carrie-kathleen-16"},{"id":17,"name":"Sophie Willis","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/09\/e293ec07d5e44025c9af1b2625d866239933.png","user_id":64,"instagram":"","twitter":"","lives_in":"Brooklyn, NY","education":"Emerson College","intro":"Sophie Willis is a freelance editor with us, who splits time between NYC and LA, covering skincare, makeup, and fashion products and trends.","experience":"Prior to working with us, Sophie has been creating editorial content in fashion, beauty, lifestyle, and related consumer topics for five years, and has gained an extensive understanding of shopping and engaging customers in a digital space.","expertise":"[\"Fashion\",\"Beauty\",\"Pop culture\"]","education_intro":"Graduated from Emerson College with a Bachelor's Degree in Journalism, Sophie is a creative content writer with passion for life and culture.","deleted_at":null,"created_at":"2021-08-20T02:32:46.000000Z","updated_at":"2021-09-04T07:13:25.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/sophie-willis-17"},{"id":18,"name":"Daisy Walker","avatar":"https:\/\/d2nofxwfjyc39o.cloudfront.net\/goods\/2021\/12\/c1145340121b3131d629efa7a3e34968422.jpg","user_id":81,"instagram":"","twitter":"","lives_in":"Phoenix, Arizona","education":"University of Iowa","intro":"Daisy Walker loves to share reviews of fantastic product. She specializes in fashion, jewelry and home decoration, and offers lots of useful suggestions about how to choose the right product.","experience":"As an experienced copywriter, Daisy Walker has been committed to writing for over 5 years, and her articles are favored by many customers.","expertise":"[\"Fashion\",\"Jewelry\",\"Home Decoration\"]","education_intro":"University of Iowa","deleted_at":null,"created_at":"2021-12-17T06:11:29.000000Z","updated_at":"2021-12-22T10:38:24.000000Z","url":"https:\/\/www.guidemaster.org\/editor\/daisy-walker-18"}
];
var editorData = [];
var editorLastIndex = resData.length - 1
$.each(resData, function (v, val) {var _avatar = val.avatar != undefined ? val.avatar : '/images/home/nav_avatar.jpg';var _editor = '<div class="editor-item"><a href="' + val.url + '"><img src="' + _avatar + '"  οnerrοr="javascript:this.src=\'/images/home/nav_avatar.jpg\';"/><h5>' + val.name + '</h5></a><div class="intro">' + val.intro + '</div></div>';$(".editor-Box").append(_editor);
})
$(".editor-Box .editor-item:nth-child(-n+3)").css("display", "inline-block");function runPlay() {x += 3;$(".editor-Box .editor-item").hide();if (x > editorLastIndex) x = 0;$(".editor-Box .editor-item:eq(" + x + ")").css("display", "inline-block");if ((x + 1) <= editorLastIndex) {$(".editor-Box .editor-item:eq(" + (x+1) + ")").css("display", "inline-block");if ((x + 2) <= editorLastIndex) {$(".editor-Box .editor-item:eq(" + (x+2) + ")").css("display", "inline-block");}else {x = -2;$(".editor-Box .editor-item:eq(0)").css("display", "inline-block");}}else {x = -1;$(".editor-Box .editor-item:eq(0)").css("display", "inline-block");if ((x + 2) <= editorLastIndex) {$(".editor-Box .editor-item:eq(" + (x+2) + ")").css("display", "inline-block");}}
}$(".editor-Box").mouseenter(function () {clearInterval(playTimer);
}).mouseleave(function () {playTimer = setInterval(runPlay, speed);
});

.editor-Box {text-align: center;
}
.editor-Box .editor-item {width: 389px;display: none;padding: 0 50px;box-sizing: border-box;text-align: center;
}
.editor-Box .editor-item a {text-decoration: none;
}
.editor-Box .editor-item a:hover {text-decoration: underline;
}
.editor-Box img {width: 150px;height: 150px;border-radius: 150px;
}
.editor-Box .editor-item h5 {color: #121212;font-size: 24px;font-weight: 500;margin: 24px 0 16px;
}
.editor-Box .editor-item .intro {font-size: 16px;height: 72px;overflow: hidden;line-height: 24px;
}

图片轮换-jQuery相关推荐

推荐一款图片轮换jQuery插件
效果图: 此款插件看图即明白是什么玩意. DEMO or Download
js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
43个多图片轮转jquery插件
在网页设计中,在一个有限的空间中让用户可以通过左右滚动的方式来浏览多张图片,是我们常用到的一种控件.下面我们将为您介绍43个多图片轮换播放jQuery教程和插件. 1. rCarousel 2. Ag ...
php中轮转图片js代码,js实现图片轮换效果代码
var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++; if (numb % 2 == 0) { docum ...
Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器 ...
分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
为什么80%的码农都做不了架构师?>>> 日期:2012-5-6 来源:GBin1.com 在线演示本地下载触摸设备越来越流行了,很多互联网用户都使用ipad等平板电脑 ...
Flash 图片轮换效果
Flash全站的技术应用系列: (一)AS+JS的Flash网站无刷新定位技术 (二)Flash网站的SEO (三)Flash网站的流量统计 (四)让Flash网站具有IE前进后退的功能 (五)图片 ...
Lazy Load, 延迟加载图片的 jQuery 插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
javascript图片轮换
先完成结构层与表现层部分,做一个纯CSS相册,好让JS不能动弹时,相册还能运作.过程见<纯CSS相册>,只不过是在它的基础再做了一些优化,更符合人的思路走向,好让下面JS顺产而已. < ...
xml+javascript实现简单图片轮换
最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东. xml文件:test.xml 1<?xml version=" ...

图片轮换-jQuery

图片轮换-jQuery相关推荐

最新文章

热门文章