轮播图

来源：互联网发布：淘宝购物付款流程图编辑：程序博客网时间：2024/05/22 00:05

一、是用js实现轮播图功能

通过for循环为所有图片和控制点添加class选择器变得不可见，为当前图片和控制点添加class选择器变得可见。

HTML文件：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/main.css"/><script src="js/jsmain.js" type="text/javascript" charset="utf-8"></script></head><body><div id="container"><div id="banner" class="banner"><ul class="picList" id="picList"><li class="show"><img src="img/indexjingxuan.jpg"/></li><li class="hide"><img src="img/jijin.jpg"/></li><li class="hide"><img src="img/top10.jpg"/></li></ul><!--快捷写法ul.pointList>li*3--><ul class="pointList" id="pointList"><li class="active"></li><li></li><li></li></ul><a href="javascript:void(0)" class="prevBtn " id="prevBtn"></a><a href="javascript:void(0)" class="nextBtn " id="nextBtn"></a></div></div></body></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文件：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/main.css"/><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery淡入.js" type="text/javascript" charset="utf-8"></script></head><body><div id="container"><div id="banner" class="banner"><ul class="picList" id="picList"><li><img src="img/indexjingxuan.jpg"/></li><li><img src="img/jijin.jpg"/></li><li><img src="img/top10.jpg"/></li></ul><!--快捷写法ul.pointList>li*3--><ul class="pointList" id="pointList"><li class="active"></li><li></li><li></li></ul><!--href="javascript:void(0)" >禁用了a链接的默认事件，但是有可点手势--><a href="javascript:void(0)" class="prevBtn hide" id="prevBtn"></a><a href="javascript:void(0)" class="nextBtn hide" id="nextBtn"></a></div></div></body></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文件：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/main.css"/><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script src="js/jQuery动画.js" type="text/javascript" charset="utf-8"></script></head><body><div id="container"><div id="banner" class="banner"><ul class="picList" id="picList"><li class="show"> <img src="img/indexjingxuan.jpg"/></li><li class="hide"><img src="img/jijin.jpg"/></li><li class="hide"><img src="img/top10.jpg"/></li></ul><!--快捷写法ul.pointList>li*3--><ul class="pointList" id="pointList"><li class="active"></li><li></li><li></li></ul><!--href="javascript:void(0)" >禁用了a链接的默认事件，但是有可点手势--><a href="javascript:void(0)" class="prevBtn hide" id="prevBtn"></a><a href="javascript:void(0)" class="nextBtn hide" id="nextBtn"></a></div></div></body></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就已经成为了prevIndexprevIndex = 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();})})

0 0