轮播图
一、是用js实现轮播图功能
通过for循环为所有图片和控制点添加class选择器变得不可见，为当前图片和控制点添加class选择器变得可见。
HTML文件：
main.css:
*{padding: 0;margin: 0;}
ul li{
list-style: none;
}
#container{
width: 1240px;
height: 388px;
background-color: green;
margin: 0 auto; /*水平居中*/
}
#banner{
width: 1240px;
height: 388px;
overflow: hidden; /*将容器之外的隐藏*/
/*因为接下来的要相对于banner布局,所以父容器banner要相对定位*/
position: relative;
}
/**
* 图片列表
*/
#banner ul.picList{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#banner ul.picList li{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#banner ul.picList li img{
width: 100%;
height: 100%;
}
.show{
display: block;
}
.hide{
display: none;
}
/**
* 控制点列表
*/
#banner ul.pointList{
position: absolute;
bottom: 30px;
/*
* 接下来两句话是让容器水平居中
* 因为left: 50%;是从父容器左边缘距离子容器左边缘的50%
* 所以子容器还要向左移动自身的50%
*/
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index: 9999;
}
#banner ul.pointList li{
display: inline-block;
width: 12px;
height: 12px;
/*设置点的颜色*/
background-color: #f66;
/*将一个有宽高的容器变为圆的*/
border-radius: 50%;
/*设置两个点之间的距离*/
margin-right: 10px;
/*添加手势*/
cursor: pointer;
}
#banner ul.pointList li.active{
background-color: white;
}
/**
* 左右控制按钮
*/
.prevBtn{
width: 42px;
height: 125px;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: url(../img/prev.png) no-repeat center;
z-index: 999;
}
.nextBtn{
width: 42px;
height: 125px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: url(../img/next.png) no-repeat center;
z-index: 999;
}
jsmain.js:
window.onload = function(){
var banner = document.getElementById("banner");
var picList = document.getElementById("picList");
var picLis = picList.getElementsByTagName("li");
var pointList = document.getElementById("pointList");
var pointLis = pointList.getElementsByTagName("li");
var len = picLis.length;
var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");
/**
* 点击控制点切换图片
*/
for (var i = 0; i < len;i++) {
pointLis[i].index = i;
pointLis[i].onclick = function(){
factory(this.index);
// picLis[i].className = "show";
// pointLis[i].className = "active";
}
activeIndex = this.index;
}
/**
* 点击左右按钮切换图片
*/
// 表示当前是哪一张图片,默认的是第一张显示
var activeIndex = 0;
nextBtn.onclick = function(){
activeIndex++;
if(activeIndex >= len){
// return; 如果达到最后一张后不想要图片进行切换,就跳出这段代码,(点击事件就此完成)
activeIndex = 0;
}
factory(activeIndex);
}
prevBtn.onclick = function(){
activeIndex--;
if(activeIndex < 0){
activeIndex = len-1;
}
factory(activeIndex);
}
/**
* 工厂方法，避免代码重复
* @param {Number} index
*/
function factory(index){
for(var j = 0; j < len;j++){
picLis[j].className = "hide";//通过循环将所有图片变得不可见
pointLis[j].className = ""; //将所有的点的样式清空
}
picLis[index].className = "show"; //只显示当前图片
pointLis[index].className = "active"; //只让当前点显示样式
}
/**
* 添加定时器
*/
var timer = "";
// 第一个参数为匿名函数，表名每隔两秒执行的代码，可以通过每隔2秒让代码点击一次下一个按钮来实现
timer = setInterval(function(){
nextBtn.onclick();
},1000);
/**
* 鼠标滑进滑出
*/
// onmouseenter:当鼠标滑进banner图中时,触发事件
banner.onmouseenter = function(){
// 清除计时器,停留在当前图片
clearInterval(timer);
}
banner.onmouseleave = function(){
// 重新启动计时器
timer = setInterval(function(){
nextBtn.onclick();
},1000);
}
}
2.jquery淡入淡出：
图片堆叠排放，需要通过z-index设置层级关系来调整图片的上下位置
通过将当前节点图片淡入、它的兄弟节点淡出让当前图片显示。为当前控制点节点添加名为active的class选择器、为它的兄弟节点移除class选择器来只让当前节点显示
HTML文件：
js文件：
$(function(){
var $banner = $("#banner");
var $picList = $("#picList");
var $picLis = $("#picList li");
var $pointList = $("#pointList");
var $pointLis = $("#pointList li");
var len = $pointLis.length;
var $prevBtn = $("#prevBtn");
var $nextBtn = $("#nextBtn");
var activeIndex = 0;
var timer = "";
/**
* 先设置层级关xi，改变图片的上下顺序
*/
for (var i = 0;i < len;i++) {
/**
* eq表示当前是di几个图片所在的li
* z-index表示我们设置每一个图片所在li的层级关xi(谁在谁的上面)
*/
$picLis.eq(i).css("z-index",len-i);
}
/**
* 点击控制点切换图片
*/
$pointLis.click(function(){
var $index = $(this).index();
activeIndex = $index;
fadeFn($index);
})
/**
* 点击左右按钮切换图片
*/
$nextBtn.click(function(){
activeIndex++;
if(activeIndex >= len){
activeIndex = 0;
}
fadeFn(activeIndex);
})
$prevBtn.click(function(){
activeIndex--;
if(activeIndex == 0 ){
activeIndex = len-1;
}
fadeFn(activeIndex);
})
/**
*
* @param {Number} num
*/
function fadeFn(num){
$pointLis.eq(num).addClass("active").siblings().removeClass("active");
$picLis.eq(num).fadeIn(1000).siblings().fadeOut(1000);
}
autoPlay()
/**
* 定时器
*/
function autoPlay(){
timer = setInterval(function(){
$nextBtn.click();
},1000);
}
$banner.mouseenter(function(){
clearInterval(timer);
$prevBtn.fadeIn();
$nextBtn.fadeIn();
})
$banner.mouseleave(function(){
autoPlay();
$prevBtn.fadeOut();
$nextBtn.fadeOut();
})
});
3.jQuery动画实现：
图片左右排列
通过设置CSS属性来设置要点击图片和当前图片的位置，通过animate动画设置图片移动到的位置
HTML文件：
-
js文件：
$(function(){
var $banner = $("#banner");
var $picList = $("#picList");
var $picLis = $("#picList li");
var $pointList = $("#pointList");
var $pointLis = $("#pointList li");
var len = $pointLis.length;
var $prevBtn = $("#prevBtn");
var $nextBtn = $("#nextBtn");
var activeIndex = 0;
var prevIndex = 0;
var timer = "";
$pointLis.click(function(){
var $index = $(this).index();
activeIndex = $index;
if(activeIndex > prevIndex){
// 将所点击的那张图片先移除掉hide，变得可见，并且同时把他放到di一张的最右边
// 然后他们一起向左滚动
$picLis.eq(activeIndex).css("left","100%").removeClass("hide");
// {}里面去写多个属性时，不能使用，隔开，要使用：
// 设置了两个图片所在li的运动轨迹、
// 使用了animate自定义动画
$picLis.eq(prevIndex).animate({"left":"-100%"},400);
$picLis.eq(activeIndex).animate({"left":"0%"},400);
// 设置控制点的样式
$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
}else if(activeIndex < prevIndex){
$picLis.eq(activeIndex).css("left","-100%").removeClass("hide");
$picLis.eq(prevIndex).animate({"left":"100%"},400);
$picLis.eq(activeIndex).animate({"left":"0%"},400);
$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
}
// 点击完成之后，上一次的那张图片的activeIndex就已经成为了prevIndex
prevIndex = activeIndex;
})
$nextBtn.click(function(){
activeIndex++;
if(activeIndex == len){
activeIndex = 0;
}
$picLis.eq(activeIndex).css("left","100%").removeClass("hide");
$picLis.eq(prevIndex).animate({"left":"-100%"},400);
$picLis.eq(activeIndex).animate({"left":"0%"},400);
$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
prevIndex = activeIndex;
})
$prevBtn.click(function(){
activeIndex--;
if(activeIndex == -1){
activeIndex = len-1;
}
$picLis.eq(activeIndex).css("left","-100%").removeClass("hide");
$picLis.eq(prevIndex).animate({"left":"100%"},400);
$picLis.eq(activeIndex).animate({"left":"0%"},400);
$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
prevIndex = activeIndex;
})
autoplay();
function autoplay(){
timer = setInterval(function(){
$nextBtn.click();
},2000)
}
$banner.mouseenter(function(){
clearInterval(timer);
$prevBtn.fadeIn();
$nextBtn.fadeIn();
})
$banner.mouseleave(function(){
autoplay();
$prevBtn.fadeOut();
$nextBtn.fadeOut();
})
})