jQuery 案例
司徒志
- tab 切换
<body>
<div class="container">
<ul class="title">
<li class="active">蛋糕</li>
<li>冰淇淋</li>
<li>巧克力</li>
</ul>
<ul class="content">
<li style="display: block;">蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕</li>
<li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li>
<li>巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$('.title li').click(function () {
// 记录下标
let index = $(this).index()
// 当前的 li 添加高亮效果 其他的 li 删除 高亮效果
$(this).addClass('active').siblings('.active').removeClass('active')
// eq(index) 在 .content li 中 找下标与 .title li 下标相同的 li 显示 其他的 li 隐藏
$('.content li').eq(index).show().siblings().hide()
})
})
</script>
</body>
- 轮播图
<body>
<div class="container">
<button class="arrow arrowLeft"> < </button>
<button class="arrow arrowRight"> > </button>
<ul class="imgs">
<li>
<img src="http://p1.music.126.net/2rqzxg-DP-7Rt3Ak_l7Uog==/109951165097437479.jpg?imageView&quality=89">
</li>
<li>
<img src="http://p1.music.126.net/WDK1Xf03KHiwLEi_PWvgoQ==/109951165097312543.jpg?imageView&quality=89">
</li>
<li>
<img src="http://p1.music.126.net/uYEZk0fBieAsIU2jV7z_Tg==/109951165097321887.jpg?imageView&quality=89">
</li>
<li>
<img src="http://p1.music.126.net/5hQfNP2sLRrSmEAx1OGDdg==/109951165097421077.jpg?imageView&quality=89">
</li>
</ul>
<ul class="indexs">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
// 设置 i 记录 li 的下标 从 0 开始
let i = 0
let timer = null
function run() {
// 设置定时器 每隔 1s 改变一次 i
timer = setInterval(() => {
i++
// 当 i 为最后一张图片时 让 i = 0
if (i === 4) i = 0
// 显示当前图片
$('.imgs li').eq(i).show().siblings().hide()
// 轮播按钮 跟着 图片一起变动
$('.indexs li').eq(i).addClass('active').siblings('.active').removeClass('active')
}, 1000)
}
run()
// 鼠标点击 轮播按钮时 改变图片 即点击第几个轮播按钮 就显示第几张图片
$('.indexs li').click(function () {
// 清除定时器
clearInterval(timer)
// 当前对应下标
i = $(this).index()
$('.imgs li').eq(i).show().siblings().hide()
$('.indexs li').eq(i).addClass('active').siblings('.active').removeClass('active')
// 点击后 开启定时器 图片继续滚动
run()
})
// 后退按钮 每点击一次 向后滚动一张图片
$('.arrowLeft').click(function () {
// 清除定时器
clearInterval(timer)
i--
// 当点击到最前面一张时 再次点击时 显示最后一张图片
if (i < 0) i = 3
// 显示当前图片
$('.imgs li').eq(i).show().siblings().hide()
// 轮播按钮 跟着 图片一起变动
$('.indexs li').eq(i).addClass('active').siblings('.active').removeClass('active')
run()
})
// 前进按钮 每点击一次 向前滚动一张图片
$('.arrowRight').click(function () {
// 清除定时器
clearInterval(timer)
i++
// 当点击到最后面一张时 再次点击时 显示第一张图片
if (i > 3) i = 0
// 显示当前图片
$('.imgs li').eq(i).show().siblings().hide()
// 轮播按钮 跟着 图片一起变动
$('.indexs li').eq(i).addClass('active').siblings('.active').removeClass('active')
run()
})
})
</script>
</body>
- 评分效果
<body>
<div class="container">
<!-- <i class="iconfont star icon-star"></i>
<i class="iconfont star icon-star1"></i> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
let count = 10
let score = 5
// 初始状态
for(let i = 0;i<count;i++){
// 创建 i 标签
let star = $('<i/>').addClass('iconfont').addClass('star')
// 设置默认状态
if(i<score) star.addClass('icon-star')
else star.addClass('icon-star1')
// 将 i 标签添加至 .container 末尾
$('.container').append(star)
}
// 鼠标移入
$('.star').mouseenter(function(){
// 获取当前鼠标悬停对应的下标
let index = $(this).index()
// 循环所有的星星 此时 i 即为每个元素所对应的下表
$('.star').each(function(i){
if(i<=index){
$(this).addClass('icon-star').removeClass('icon-star1')
}else{
$(this).addClass('icon-star1').removeClass('icon-star')
}
})
})
// 鼠标离开 回到初始状态
$('.star').mouseleave(function(){
// 循环所有的星星 此时 i 即为每个元素所对应的下表
$('.star').each(function(i){
if(i<score){
$(this).addClass('icon-star').removeClass('icon-star1')
}else{
$(this).addClass('icon-star1').removeClass('icon-star')
}
})
})
// 鼠标点击时 评分不再改变
$('.star').click(function(){
score = $(this).index() + 1
})
})
</script>
</body>
类似资料：