jquery 实现类似淘宝换一换功能

2019-08-29    标签:jquery    阅读:228    评论:0


类似淘宝换一换功能在工作中我们经常会遇到,以下是一个简单的案例,仅供大家参考。

实现效果图:

GIF.gif

实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换一换</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<style>
*{margin:0;padding: 0px;}
.hsow{width: 400px; height: 400px; margin: 0 auto; background-color: #fff;}
.news-sub{ width: 400px; height: 266px; float: left; position: relative; }
.news-list-v{  width: 400px; height: 266px; position: absolute; left: 0px; top: 0px;visibility: hidden;opacity: 0;transition: 0s 0.2s;}
.news-list-v li{ list-style: none; width: 133px; height: 133px; float: left; text-align: center;}
.news-list-v li a{ color: #fff;list-style: none; font-size: 50px; text-decoration: none; margin:0 auto; line-height: 133px}

.news-list-v li:nth-of-type(odd){  background-color: #55cbc4;}
.news-list-v li:nth-of-type(even){ background-color: #f45a8d;}
.news-change{ width: 133px; height: 133px; background-color: #f04124;  color: #fff; font-size: 34px; text-align: center; line-height: 133px; cursor: pointer; display: inline-block; float: left; margin-left: 133px;}
.news-list-v.show{z-index: 1;visibility: visible;opacity: 1;transition: 0.2s;}
</style>
<div>
<div>
<ul class="news-list-v show">
<li><a href="#" >1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
<li><a href="#" >4</a></li>
<li><a href="#" >5</a></li>
<li><a href="#" >6</a></li></ul>
<ul>
<li><a href="#" >7</a></li>
<li><a href="#" >8</a></li>
<li><a href="#" >9</a></li>
<li><a href="#" >10</a></li>
<li><a href="#" >11</a></li>
<li><a href="#" >12</a></li>
</ul>
<ul>
<li><a href="#" >13</a></li>
<li><a href="#" >14</a></li>
<li><a href="#" >15</a></li>
<li><a href="#" >16</a></li>
<li><a href="#" >17</a></li>
<li><a href="#" >18</a></li>
</ul>
</div>
<a>
<span>换一换</span>
</a>
</div>

<script type="text/javascript">
//换一换
var $newsLists = $('.news-sub').find('.news-list-v');

function changeNews() {
var $currentNews = $newsLists.filter('.show');
var $nextNews = $currentNews.next();

if($nextNews.length === 0) {
$nextNews = $newsLists.eq(0);
}

$newsLists.removeClass('show');
$nextNews.addClass('show');
}
$('.news-change').on('click', function() {
changeNews();
});
</script>

</body>
</html>


助力产业智慧升级,云服务器首年88元起,更有千元代金券礼包免费领!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/202.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

今天努力一点,知识一点点积累,谢谢那个曾经努力的自己!

职业:Web工程师

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

935运行天数

291文章数量

主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×
×
×