更多>
最新下载
Vue记事本添加删除特效
使用vue制作简单的文本框输入关键词创建或删除计划事项记事本功能效果。可用于生活记事本备忘录特效。使用方法：参数介绍：新增（1、生成列表结构 v-for 和数组 2、获取用户输入 v-model 3、回车，新增数据 v-on .enter）--删除（数据改变和数据绑定的元素是同步变化的；时间的自定义参数；splice方法的应用）---计数（统计信息个数length）--清除(点击清除所有信息 v-
0
2026-01-28
24小时阅读排行榜
- 1 Go 中实现非阻塞通道发送前的状态预检：为何不可行及替代方案
- 2 如何筛选出包含指定车身类型的汽车品牌
- 3 函数索引（expression index）在 WHERE 函数包裹列时的应用
- 4 SQL Server CROSS APPLY / OUTER APPLY 的典型使用场景
- 5 MySQL GROUP BY 后 ORDER BY 字段未在 SELECT 中的排序失效原因
- 6 Type ‘Observable’ 错误的根源与修复方法
- 7 SQL 如何用临时表 + 索引加速复杂多表关联查询
- 8 SQL 中日期加减天/月/年的跨数据库兼容写法汇总
- 9 SQL 如何实现“增量同步”避免全量同步的方案
- 10 如何在 Go 中将指针解引用为值？
- 11 OFFSET 10万导致全表扫描的 seek 方法替代写法模板
- 12 如何在类中安全复用函数名变量以调用字符串内置方法
- 13 如何在类中安全复用外部循环变量作为方法调用名？
- 14 如何在带背景图的页脚中精准叠加内容（HTML/CSS 实现方案）
- 15 如何监控 MySQL Threads_connected 接近 max_connections 的告警
更多>
最新教程
-
- Node.js 教程
- 16291 2025-08-28
-
- CSS3 教程
- 1546950 2025-08-27
-
- Rust 教程
- 23418 2025-08-27
-
- Vue 教程
- 25859 2025-08-22
-
- PostgreSQL 教程
- 22356 2025-08-21
-
- Git 教程
- 9314 2025-08-21
jQuery Banner的图片旋转切换特效
js代码
<script>
$(function () {
/*图片位置数据*/
var datas = [
{'z-index': 6, opacity: 1, width: 760, height: 330, top: 40, left: 0},
{'z-index': 4, opacity: 0.6, width: 560, height: 243, top:80, left: -225},
{'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: -170},
{'z-index': 2, opacity: 0.2, width: 620, height: 269, top: -60, left: 110},
{'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: 430},
{'z-index': 4, opacity: 0.6, width: 560, height: 243, top: 80, left: 420},
]
move();
function move() {
/*图片分布*/
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
$('#slide ul li').eq(i).css('z-index',data['z-index']);
$('#slide ul li').eq(i).stop().animate(data, 1200);
}
}
/*左箭头事件*/
$('.prev').on('click', function () {
var last = datas.pop();
datas.unshift(last);
move();
})
/*右箭头事件处理函数*/
function nextYewu(){
var first = datas.shift();
datas.push(first);
move();
}
/*右箭头事件*/
$('.next').on('click', nextYewu);
/*自动播放*/
var timer = setInterval(function(){
nextYewu();
},5000);
/*鼠标进入slide显示箭头,清除自动播放*/
$('#slide').on({
mouseenter: function () {
$('.arrow').css('display', 'block');
clearInterval(timer);
}, mouseleave: function () {
$('.arrow').css('display', 'none');
/*鼠标离开时自动播放*/
clearInterval(timer);
timer = setInterval(function(){
nextYewu();
},5000)
}
})
})
<script>
$(function () {
/*图片位置数据*/
var datas = [
{'z-index': 6, opacity: 1, width: 760, height: 330, top: 40, left: 0},
{'z-index': 4, opacity: 0.6, width: 560, height: 243, top:80, left: -225},
{'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: -170},
{'z-index': 2, opacity: 0.2, width: 620, height: 269, top: -60, left: 110},
{'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: 430},
{'z-index': 4, opacity: 0.6, width: 560, height: 243, top: 80, left: 420},
]
move();
function move() {
/*图片分布*/
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
$('#slide ul li').eq(i).css('z-index',data['z-index']);
$('#slide ul li').eq(i).stop().animate(data, 1200);
}
}
/*左箭头事件*/
$('.prev').on('click', function () {
var last = datas.pop();
datas.unshift(last);
move();
})
/*右箭头事件处理函数*/
function nextYewu(){
var first = datas.shift();
datas.push(first);
move();
}
/*右箭头事件*/
$('.next').on('click', nextYewu);
/*自动播放*/
var timer = setInterval(function(){
nextYewu();
},5000);
/*鼠标进入slide显示箭头,清除自动播放*/
$('#slide').on({
mouseenter: function () {
$('.arrow').css('display', 'block');
clearInterval(timer);
}, mouseleave: function () {
$('.arrow').css('display', 'none');
/*鼠标离开时自动播放*/
clearInterval(timer);
timer = setInterval(function(){
nextYewu();
},5000)
}
})
})
</script>
这是一款仿海风教育的师资力量页面的网站banner图片切换特效，jQuery图片旋转切换代码。
本站所有资源都是由网友投搞发布，或转载各大下载站，请自行检测软件的完整性！本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架，联系方式：admin@php.cn
相关推荐
热门下载
canvas音谱可视化mp3音乐播放器代码
html5 canvas通过AudioContext对获取audio标签播放的音域和音高，调用js绘制相应高度的矩形或线条。
播放器特效
2021-03-10
