图⽚轮播（左右切换）--JS原⽣和jQuery实现图⽚轮播(左右切换)--js原⽣和jquery实现
左右切换的做法基本步骤跟上⼀篇⽂章类似，只不过修改了⼀些特定的部分
（1）⾸先是页⾯的结构部分
对于我这种左右切换式
1.⾸先是个外围部分（其实也就是最外边的整体wrapper)
2.接着就是你设置图⽚轮播的地⽅（也就是⼀个banner吧）
3.然后是⼀个图⽚组（可以⽤新的div 也可以直接使⽤ ul-->li形式）
4.然后是图⽚两端的左箭头和右箭头
5.然后是⼀个透明背景层，放在图⽚底部
6.然后是⼀个图⽚描述info层，放在透明背景层的左下⾓（div 或 ul-->li)
7.然后是⼀个按钮层，⽤来定位图⽚组的index吧，放在透明背景层的右下⾓(div 或 ul-->li)
由此，可以先构造出html结构
<div id="wrapper"><!-- 最外层部分 -->
<div id="banner"><!-- 轮播部分 -->
<ul class="imgList"><!-- 图⽚部分 -->
<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
</ul>
<img src="./img/prev.png" width="20px" height="40px" id="prev">
<img src="./img/next.png" width="20px" height="40px" 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>
<li>puss in boots4</li>
<li>puss in boots5</li>
</ul>
<ul class="indexList"><!-- 图⽚右下⾓序号部分 -->
<li class="indexOn">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
相对于之前，知识增多了两个箭头img标签
（2）CSS样式部分（图⽚组的处理）跟淡⼊淡出式就不⼀样了
淡⼊淡出只需要显⽰或者隐藏对应序号的图⽚就⾏了，直接通过display来设定
左右切换式则是采⽤图⽚li 浮动，⽗层元素ul 总宽为总图⽚宽，并设定为有限banner宽度下隐藏超出宽度的部分
然后当想切换到某序号的图⽚时，则采⽤其ul 定位 left样式设定相应属性值实现
⽐如显⽰第⼀张图⽚初始定位left为0px, 要想显⽰第⼆张图⽚则需要left:-400px 处理
<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: 400px;height: 200px;}
#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
.imgList li{float:left;display: inline;}
#prev,
#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
.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>
（3）页⾯基本已经构建好久可以进⾏js的处理了
⼀、jQuery⽅式
照常先说jq处理
1.全局变量等
var curIndex = 0, //当前index
imgLen = $(".imgList li").length; //图⽚总数
2.⾃动切换定时器处理
// 定时器⾃动变换2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//调⽤变换处理函数
changeTo(curIndex);
},2500);
3.为左右箭头添加事件处理
左箭头
//左箭头滑⼊滑出事件处理
$("#prev").hover(function(){
//滑⼊清除定时器
clearInterval(autoChange);
},function(){
//滑出则重置定时器
autoChangeAgain();
});
//左箭头点击处理
$("#prev").click(function(){
//根据curIndex进⾏上⼀个图⽚处理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
});
右箭头
//右箭头滑⼊滑出事件处理
$("#next").hover(function(){
//滑⼊清除定时器
clearInterval(autoChange);jquery在线图片
},function(){
/
/滑出则重置定时器
autoChangeAgain();
});
//右箭头点击处理
$("#next").click(function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
});
其中autoChangeAgain()就是⼀个重置定时器函数
//清除定时器时候的重置定时器--封装
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//调⽤变换处理函数
changeTo(curIndex);
},2500);
}
其中changeTo()就是⼀个图⽚切换的处理函数
function changeTo(num){
var goLeft = num * 400;
$(".imgList").animate({left: "-" + goLeft + "px"},500);
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
每传⼊⼀个图⽚序号，则按理进⾏goLeft
4.为右下⾓的那⼏个li 按钮绑定事件处理
//对右下⾓按钮index进⾏事件绑定处理等
$(".indexList").find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
changeTo(item);
curIndex = item;
},function(){
autoChangeAgain();
});
});
jq就是这样，简便，原⽣代码量就有些多了
完整代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml
1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<title>图⽚轮播 jq(左右切换)</title>
6<style type="text/css">
7 body,div,ul,li,a,img{margin: 0;padding: 0;}
8 ul,li{list-style: none;}
9 a{text-decoration: none;}
10
11 #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
12 #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
13 .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
14 .imgList li{float:left;display: inline;}
15 #prev,
16 #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
17 #prev{left: 10px;}
18 #next{right: 10px;}
19 #prev:hover,
20 #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
21 .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
22 .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
23 .infoList li{display: none;}
24 .infoList .infoOn{display: inline;color: white;}
25 .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
26 .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
27 .indexList .indexOn{background: red;font-weight: bold;color: white;}
28</style>
29</head>
30<body>
31<div id="wrapper"><!-- 最外层部分 -->
32<div id="banner"><!-- 轮播部分 -->
33<ul class="imgList"><!-- 图⽚部分 -->
34<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
35<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
36<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
37<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
38<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
39</ul>
40<img src="./img/prev.png" width="20px" height="40px" id="prev"> 41<img src="./img/next.png" width="20px" height="40px" id="next"> 42<div class="bg"></div><!-- 图⽚底部背景层部分-->
43<ul class="infoList"><!-- 图⽚左下⾓⽂字信息部分 -->
44<li class="infoOn">puss in boots1</li>
45<li>puss in boots2</li>
46<li>puss in boots3</li>
47<li>puss in boots4</li>
48<li>puss in boots5</li>
49</ul>
50<ul class="indexList"><!-- 图⽚右下⾓序号部分 -->
51<li class="indexOn">1</li>
52<li>2</li>
53<li>3</li>
54<li>4</li>
55<li>5</li>
56</ul>
57</div>
58</div>
59<script type="text/javascript" src="./js/jquery.min.js"></script>
60<script type="text/javascript">
61var curIndex = 0, //当前index
62 imgLen = $(".imgList li").length; //图⽚总数
63// 定时器⾃动变换2.5秒每次
64var autoChange = setInterval(function(){
65if(curIndex < imgLen-1){
66 curIndex ++;
67 }else{
68 curIndex = 0;
69 }
70//调⽤变换处理函数
71 changeTo(curIndex);
72 },2500);
73
74//左箭头滑⼊滑出事件处理
75 $("#prev").hover(function(){
76//滑⼊清除定时器
77 clearInterval(autoChange);
78 },function(){
79//滑出则重置定时器
80 autoChangeAgain();
81 });
82//左箭头点击处理
83 $("#prev").click(function(){
84//根据curIndex进⾏上⼀个图⽚处理
85 curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
86 changeTo(curIndex);
87 });
88
89//右箭头滑⼊滑出事件处理
90 $("#next").hover(function(){
91//滑⼊清除定时器
92 clearInterval(autoChange);
93 },function(){
94//滑出则重置定时器
95 autoChangeAgain();
96 });
97//右箭头点击处理
98 $("#next").click(function(){
99 curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
100 changeTo(curIndex);
101 });
102
103//对右下⾓按钮index进⾏事件绑定处理等
104 $(".indexList").find("li").each(function(item){
105 $(this).hover(function(){
106 clearInterval(autoChange);
107 changeTo(item);
108 curIndex = item;
109 },function(){
110 autoChangeAgain();
111 });
112 });
113
114//清除定时器时候的重置定时器--封装
115function autoChangeAgain(){
116 autoChange = setInterval(function(){
117if(curIndex < imgLen-1){
118 curIndex ++;
119 }else{
120 curIndex = 0;
121 }
122//调⽤变换处理函数
123 changeTo(curIndex);
124 },2500);
125 }
126
127function changeTo(num){
128var goLeft = num * 400;
129 $(".imgList").animate({left: "-" + goLeft + "px"},500);
130 $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
131 $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
132 }
133</script>
134</body>
135</html>
View Code
⼆、js 原⽣实现
js原⽣⼤概也就是模拟jq的实现思路
1.全局变量等
var curIndex = 0, //当前index
imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图⽚组
imgLen = imgArr.length,
infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图⽚info组
indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组2.⾃动切换定时器处理
// 定时器⾃动变换2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//调⽤变换处理函数
changeTo(curIndex);
},2500);
同样的，有⼀个重置定时器的函数
//清除定时器时候的重置定时器--封装
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//调⽤变换处理函数
changeTo(curIndex);
},2500);
}
3.因为有⼀些class呀，所以来⼏个class函数的模拟也是需要的
//通过class获取节点
function getElementsByClassName(className){
var classArr = [];
var tags = ElementsByTagName('*');
for(var item in tags){
if(tags[item].nodeType == 1){
if(tags[item].getAttribute('class') == className){
classArr.push(tags[item]);
}
}
}
return classArr; //返回
}
// 判断obj是否有此class
function hasClass(obj,cls){ //class位于单词边界
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//给 obj添加class
function addClass(obj,cls){
if(!this.hasClass(obj,cls)){
obj.className += cls;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论