轮播图作业
来源:互联网 发布:2017淘宝买家秀男大jb 编辑:程序博客网 时间:2024/04/27 09:33
效果:
布局:js代码:
js部分:
var btn=$("#btn li");
var list = $("#pic_con img");
var pre = $("#pre");
var next = $("#next");
var pic_con = $("#pic_con");
btn.click(function () {
var cur = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
pic_con.animate({left: -646 * cur}, 2000);
});
pre.click(function () {
var cur = $(".on").index();
cur += 1;
if (cur > btn.length) {
cur = 0;
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
pic_con.animate({left: -646 * cur}, 2000);
if (cur !== btn.length) {
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
btn.eq(0).addClass("on").siblings().removeClass("on");
pic_con.animate({left: 0}, 0);
}
}
});
next.click(function () {
var cur = $(".on").index();
cur -= 1;
if (cur < -1) {
cur = $("#pic_con img").length;
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
pic_con.animate({left: -646 * cur}, 2000);
if (cur !== -1) {
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
cur=$("#pic_con img").length-3;
btn.eq(cur).addClass("on").siblings().removeClass("on");
pic_con.animate({left: -646 * cur}, 0);
}
}
});
//automatic carousel
var timer;
start();
function start(){
clearInterval(timer);
timer=setInterval(function(){
var cur = $(".on").index();
cur += 1;
//stop automatic carousel
stop();
if (cur > btn.length) {
cur = 0;
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
pic_con.animate({left: -646 * cur}, 1000);
if (cur !== btn.length) {
btn.eq(cur).addClass("on").siblings().removeClass("on");
}else {
btn.eq(0).addClass("on").siblings().removeClass("on");
pic_con.animate({left: 0}, 0);
}
}
},3500);
}
//stop automatic carousel when mouse move
function stop(){
$("#container").hover(function (){clearInterval(timer);},function(){ start();
});
}
- 轮播图作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业~~~~~~~~~~~~~
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- js笔记2
- 1.并发编程概述
- Understanding LSTM Networks
- 轻量级操作系统FreeRTOS的内存管理机制(二)
- job定时操作事务
- 轮播图作业
- JVM调优
- linux网卡绑定
- gii生成crud后访问出现的问题
- Android 5.0 到 Android 6.0 + 的深坑之一 之 .so 动态库的适配
- ASP.NET Core MVC压缩样式、脚本及总是复制文件到输出目录
- 深入理解JVM之JVM内存区域与内存分配
- 网站的SEO优化
- Java并发编程系列之四:happens-before原则