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;
}
扫一扫
1609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
