换一批内容

时间：2020-07-14 10:40:53 阅读：69 评论：0 收藏：0 [点我收藏+]

//静态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;

box-sizing: border-box;
}
ul li{
list-style: none;
}
a,a:active,a:hover {
color: black;
text-decoration: none;

}
.changeone{
width: 100%;
height: 140px;
border-bottom:8px solid #eeeeee;
font-size: 14px;
}

.changeone ul{
width: 100%;
display: flex;
flex-wrap: wrap;
height: 80px;
}

.changeone ul li{
flex: 1;
width: 25%;
min-width: 25%;
padding: 5px;
text-align: center;
margin-top: 10px;
}
.changeone ul li span{
padding: 4px 5px;
border: 1px solid #fe7702;
border-radius: 6px;
}

.huan{
text-align:center;
font-family:"微软雅黑";
color:gray;
font-size: 16px;
font-weight: bold;
}

.huanbox{
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>

<div class="changeone">
<ul>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>

element.className="change"+changeindex;
}else{
changeindex++;
element.className="change"+changeindex;
}
})
$(".change1").siblings().css("display","none");
$(".change1").show();
$(".huan").click(function(){
if(clickindex<=changeindex){
$(".change"+clickindex).siblings().css("display","none");
$(".change"+clickindex).show();
clickindex++;
}else{
clickindex=1;
$(".change"+clickindex).siblings().css("display","none");
$(".change"+clickindex).show();
}

});
</script>
</body>
</html>

//动态

<div class="new-q-t-list">\

　　<div class="q-t-list-01" title="">‘

　　　　+ renderList2(item.qlist.list) +

　　‘</div>\

<p class="huan huanYiPi">换一批</p>\

</div>\

//鼠标悬停时显示多条问题

$(".title-name").hover(function(){

var that=this

//给名字为2个字的设置间距

$(‘.nickname-sp2‘).each(function(){

var that=this

var nickSize=$(that).children(".nickname-l2").text().length

if(nickSize==2){

$(that).children(".nickname-l2").css({"letter-spacing":"1em","margin-right":"-1em"})

}

})

//隔行换色偶数行

$(".q-t-list-01").each(function(){

var that=this

$(that).children(‘.q-t-list-01 a:odd‘).css( ‘background-color‘, ‘#f6f6f6‘)

})

//换一批内容

var changeindex=1;

var clickindex=2;

//寻找鼠标悬停时里面的内容再循环

$(that).parent().parent().siblings(".new-q-t-list").children(".q-t-list-01").find("a").each(function(index,element){

var that=this

if(index/10<changeindex){

$(that).addClass("change"+changeindex)

}else{

changeindex++;

$(that).addClass("change"+changeindex)

}

})

$(".change1").siblings().css("display","none");

$(".change1").show();

$(".huan").click(function(){

if(clickindex<=changeindex){

$(".change"+clickindex).siblings().css("display","none");

$(".change"+clickindex).show();

clickindex++;

}else{

clickindex=1;

$(".change"+clickindex).siblings().css("display","none");

$(".change"+clickindex).show();

}

});

$(that).parent().parent().siblings(".new-q-t-list").show()

$(".new-q-t-list").hover(function(){

var that=this

$(that).css("display","block")

},function(){

$(".new-q-t-list").hide()

})

},function(){

// var that = this;

// setTimeout(()=>{

// $(that).parent().siblings(".new-q-t-list").hide();

$(".new-q-t-list").hide()

// },500)

})

//效果图

技术分享图片

换一批内容

原文：https://www.cnblogs.com/chenshaoxiong/p/13297213.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)