自从 上午把上传之后、就觉得纠结的很 所以呢 我就重新写了 JS 运用了2种方式 来混合写的 { each(index) 和方法调用 }
可以看我 上一篇写的 HTML 和CSS 。
JS 更加易懂
<script type="text/javascript">
$(function(){
var aSlides = $("#slideBox .slide");
/* 获取每一个img */
var aBtns = $("#slideBox .btns li");
/*获取 每个li*/
var num = 0; /* 下标 */
var timers = setInterval(time,2000);
function time(){
num++;
if (num >= aBtns.length) {
num = 0;
}
ulAnimation();
}
/*动画效果*/
function ulAnimation(){
for (var i = 0, j = 0; i < aBtns.length, j < aSlides.length; i++, j++) {
aBtns[i].className = "";
aSlides[j].style.zIndex = 0;
}
aBtns[num].className = "current";
aSlides[num].style.zIndex = 1;
}
//鼠标移入移出 id 为 main 的 div 显示或隐藏 button ,同时清除 或 重新调用 timers
$('#slideBox').mouseover(function(){
$('#slideBox .btn').show();
clearInterval(timers);
}).mouseout(function(){
$('#slideBox .btn').hide();
timers = setInterval(time,2000);
});
//鼠标移入 ul li 时 ul 在 #slideBox 里面所有 在鼠标离开时 已经执行了上面的 鼠标离开 方法
aBtns.each(function(index){
aBtns[index].onmouseover = function () {
/* 循环 全部 zIndex 为 0 没有css */
for (var j = 0; j < aSlides.length; j++) {
aSlides[j].style.zIndex = 0;
aBtns[j].className = "";
}
/* 给鼠标移入时 添加 zIndex和css */
aBtns[index].className = "current";
aSlides[index].style.zIndex = 1;
num = index;
}
});
/* 上一张 */
$("#slideBox .left").on("click",function(){
num --;
if (num < 0) {
num = aBtns.length -1;
}
clearInterval(timers);
ulAnimation();
});
/*下一张*/
$("#slideBox .right").on("click",function(){
num ++;
if (num >= aBtns.length) {
num = 0;
}
clearInterval(timers);
ulAnimation();});
});
</script>
还有一句css .slideBox .btn {display: none} 随你们加不加。
优点就是 图片可以无限大 不在受大小限制
还有不足之处就是 (没有动画效果)