这两天写了个轮播图，我逻辑思维比较差，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() + 2
var 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); //点击左右做判断，都要看curIndex
changeTo(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); //点击左右做判断，都要看curIndex
changeTo(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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
