您的位置：首页 > 其它

轮播图的编写

2016-04-01 09:56 176 查看

这两天写了个轮播图，我逻辑思维比较差，jQuery也使用没多久，看了很多别人写的，才慢慢理解的

首先来理清思绪：

轮播图肯定要有放图片的ul 和下面的数字 ul ，这边我们来提个醒，我犯的错误，ul的overflow 设为hidden

我们来分个类

（1）单纯的点击轮播图，不自动轮换

这边的图片li是排序层叠的，

这个只要点击到那个数字，让其外观变颜色，获取它的index，让对应的图片上移一层，别的都下移一层，下面是完整代码，

<!DOCTYPE html><html><head><title>图片切换</title><script type="text/javascript" src="jquery.js"></script><script>var num=0;$(function(){$("div ol li").mouseover(function(e){$(this).attr("class","current");$(this).siblings().attr("class","");num = $('ul').index() + 2var index = $(this).index();$("div ul li").eq(index).css({"left":"650px","z-index":2})$("div ul li").eq(index).siblings().css({"z-index":1});$("div ul li").eq(index).animate({left:"0"}, 500)});});</script><style type="text/css">*{margin: 0;padding: 0;border: 0;}ul,ol{list-style: none;}.all{width: 650px;height: 250px;margin: 100px auto;position: relative;overflow: hidden;}.all ul{position: relative;z-index: 1;}.all ul li{position: absolute;left:0;top:0;}.all ol{position:absolute;z-index: 2;right: 10px;bottom: 10px;}.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight: bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top:10px;}.all ol .current{width: 30px;height: 30px;line-height: 30px;border:1px solid red;margin-top: 0px;cursor: pointer;}</style></head><body><div class="all"><ul><li><img src="15.jpg" ></li><li><img src="16.jpg" ></li><li><img src="82.jpg" ></li></ul><ol><li class="current">1</li><li>2</li><li>3</li></ol></div></body></html>

（2）带左右按钮的自动切换图片，然后还能有字的轮播图

这边我是仿照一位网友写的，自己来理一下思绪

这边的图片ul中的li .是横向排列的，所有的变化都是图片ul从右往左变化，只要变化ul的left就行了

因为要自动切图片，那就用一个定时器，每隔一段时间，index就加一位，这边要判断，如果index到达了最大值要跳转到第一幅图

var curIndex=0,imgLen=$(".imgList li").length;//定时器自动变换2.5秒一次var autoChange=setInterval(function(){if(curIndex<imgLen-1){curIndex++;}else{curIndex=0;}//调用变换处理函数changeTo(curIndex);},2500);

但按到左右按钮的时候，我们就要清除定时器，显示按到的那图，离开了我们就开始新的定时器，首先判断index的是否到达最大限度，到了就变成0，

//左箭头滑入滑出事件处理$("#prev,#next").hover(function(){//滑入清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//左箭头点击处理$("#prev").click(function(){curIndex=(curIndex>0) ? (--curIndex) : (imgLen-1); //点击左右做判断，都要看curIndexchangeTo(curIndex);});//右箭头点击处理$("#next").click(function(){curIndex=(curIndex<imgLen-1) ? (++curIndex) : 0;changeTo(curIndex);});

按到下面1234按钮的时候一样，也要清除定时器，显示对应图片

//对右下角按钮index进行事件绑定处理等$(".indexList").find("li").each(function(item){$(this).hover(function(){clearInterval(autoChange);changeTo(item);curIndex = item;},function(){autoChangeAgain();});});

完整代码

<!DOCTYPE html><html><head><title>图片切换</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" ></script><style type="text/css">body,div,ul,li,a,img{margin:0;padding: 0;}ul,li{list-style: none;}a{text-decoration: none;}#wrapper{position: relative;margin: 30px auto;width: 500px;height: 400px;}#banner{position:relative;width: 500px;height: 400px;overflow: hidden;}.imgList{position:relative;width:2000px;height:400px;z-index: 10;overflow: hidden;}.imgList li{float:left;display: inline;}.imgList li img{width: 500px;height: 400px;}#prev,#next{position: absolute;top:120px;z-index: 20;cursor: pointer;opacity: 0.5;filter:alpha(opacity=50);}#prev{left: 10px;}#next{right: 10px;}#prev:hover,#next:hover{opacity: 0.8;filter:alpha(opacity=80);}.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}.infoList li{display: none;}.infoList .infoOn{display: inline;color: white;}.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}.indexList .indexOn{background: red;font-weight: bold;color: white;}</style><script type="text/javascript">$(function(){var curIndex=0,imgLen=$(".imgList li").length;//定时器自动变换2.5秒一次var autoChange=setInterval(function(){if(curIndex<imgLen-1){curIndex++;}else{curIndex=0;}//调用变换处理函数changeTo(curIndex);},2500);//左箭头滑入滑出事件处理$("#prev,#next").hover(function(){//滑入清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//左箭头点击处理$("#prev").click(function(){curIndex=(curIndex>0) ? (--curIndex) : (imgLen-1); //点击左右做判断，都要看curIndexchangeTo(curIndex);});//右箭头点击处理$("#next").click(function(){curIndex=(curIndex<imgLen-1) ? (++curIndex) : 0;changeTo(curIndex);});//对右下角按钮index进行事件绑定处理等$(".indexList").find("li").each(function(item){$(this).hover(function(){clearInterval(autoChange);changeTo(item);curIndex = item;},function(){autoChangeAgain();});});//清除定时器时候的重置定时器--封装function autoChangeAgain(){autoChange=setInterval(function(){if(curIndex<imgLen-1){curIndex++;}else{curIndex=0;}changeTo(curIndex);},2500);}function changeTo(num){   //num是上面传下来的参数var goLeft=num*500;$(".imgList").animate({ left: "-"+goLeft+"px"},500);$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");}})</script></head><body><div id="wrapper">    <!-- 最外层的部分 --><div id="banner">    <!-- 轮播的部分 --><ul class="imgList">    <!-- 图片部分 --><li><img src="15.jpg" ></li><li><img src="16.jpg" ></li><li><img src="82.jpg" ></li></ul><!--  左右按钮 --><img src="prev.png" id="prev"><img src="next.png" id="next"><div class="bg"></div>  <!-- 图片底部背景层 --><ul class="infoList"> <!--  左下角 文字描述 --><li class="infoOn">puss in boots1</li><li>puss in boots2</li><li>puss in boots3</li></ul><ul class="indexList">  <!-- 右下角序号部分 --><li class="indexOn">1</li><li>2</li><li>3</li></ul></div></div></body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航