轮播图js实现
html代码
css代码
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
width: 1349px;
}
ul{
list-style: none;
}
a{
text-decoration:none;
color: #a6a6a6;
font-size: 14px;
}
.main{
width: 100%;
height: 550px;
margin: 0px auto;
position: relative;
}
/* 焦点图 */
.banner{
width: 100%;
height: 550px;
overflow: hidden;
}
.banner-slide{
width: 100%;
height: 550px;
background-repeat: no-repeat;
background-position: center;
display: none;
}
.slide1{
background-image: url('./img/1.jpg');
display: block;
}
.slide2{
background-image: url('./img/2.jpg');
}
.slide3{
background-image: url('./img/3.jpg');
}
/* 下一页按钮 */
.button{
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(2, 14, 10, 0.1);
top: 275px;
margin-top: -30px;
right: 1003px;
text-align: center;
line-height: 65px;
}
.prev{
transform:rotate(180deg);
margin-bottom: -30px;
}
.next{
right: 75px;
}
.button-img{
width: 20px;
height: 20px;
}
.button:hover{
background-color: rgba(2, 14, 10, 0.5);
}
/* 下标图 */
.button2{
position: absolute;
bottom: 70px;
right: 80px;
}
.button2 span{
display: inline-block;
margin-left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #fff;
}
.button2 :nth-child(1){
background-color: #fff;
}
/* 菜单一级 */
.meua{
position: absolute;
top: 18px;
left: 77px;
background-color:rgb(255,255,255,0.95);
border-radius: 10px;
width: 197px;
height: 443px;
}
.meua li{
margin:0 20px;
height: 48px;
padding: 13px 0 12px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.meua > li:nth-child(6){
border-bottom: 0px;
}
.meua-head{
margin-bottom: 2px;
}
.meua-head >a{
font-size: 16px ;
color: #848484;
}
.meua a{
display: inline-block;
padding-right: 5px;
}
/* 二级菜单 */
.meua-second{
position: absolute;
width: 200px;
height: 443px;
background-color: #fff;
border-radius: 0 10px 10px 0;
left:197px;
top: 0px;
display: none;
}
.meua-second li{
height: 70px;
width: 160px;
margin: 20px;
}
.meua-second img{
width: 56px;
height: 56px;
float: left;
}
/* 点击变化 */
.meua >li:nth-child(1):hover .meua-second{
display: block;
}
js代码
window.onload =function(){
var index = 0, //当前图片的索引
button_next = byId("button-next"),
button_prev = byId("button-prev"),
pics = byId("banner").getElementsByTagName("div"),//这里是个数组
size = pics.length,
spans = byId("button2").getElementsByTagName("span");
//封装getElementById()
function byId(id){
return typeof(id) === "string" ? document.getElementById(id):id;
}
//封装通用事件绑定方法
function addHandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}
else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}
else{
element["on" + type] = handler;
}
}
//图片变化
var qie = function(index){
for(var i = 0;i
spans[i].style.backgroundColor = 'transparent' ;
}
pics[index].style.display = 'block';
spans[index].style.backgroundColor = '#fff';
}
//点击下一张显示下一张图片,以及下标小圆点的变化
addHandler(button_next,"click",function(){
index++;
if(index>=size) index = 0;
qie(index);
});
//点击prev按钮显示上一张图片,以及下标小圆点的变化
addHandler(button_prev,"click",function(){
index--;
if(index<0)index = size-1;
qie(index);
});
//鼠标滑动到小圆点图片就会变化
for(var j = 0;j
addHandler(spans[j],"mouseover",function(){
switch (this.id) {
case "0":
qie(0);
break;
case "1":
qie(1);
break;
case "2":
qie(2);
break;
}
})
}
}
----------------------------------------------------------------------------------------------------------------
总结：
这可以算是第一个js代码练习了。看了很多遍知识点，不如动手敲几遍代码。
没有教学视频的帮助下我可能想不到要怎么利用dom那些操作
我是先写下一页功能按钮，然后再写上一页功能按钮，再写下标点随着图片变化的功能，最后再写鼠标移到下标小圆点就会发生图片变化的功能。
再写按钮跳转背景图的思路大概是：
因为我的背景图是直接放在div的ccs background-image中，所以每按一下个的案件，下一个的display就要显示出来，其他的设置为不显示。
问题：怎么去设计每按一下按钮，我的会按顺序显示下一个呢？
A：先设置一个图片索引（index）变量，每按一次next按键，我的index就加一。如果我的索引大于图片数就变为第一张图的索引值。
Q：怎么知道我有多少张图片？
A：由于图片都是在div中的，所以可以获取div元素的来知道我们的图片数。获取getElementByTagName。.length来知道有多少图。
Q：然后呢？
A：现在可以操控我们每一个图片了。由于我们已经获取到我们的div了。
先把所有的图片都显示为none，然后当按下一个是，就可以通过div数组【index】.display去控制block
相同的方法去写上一页和点的变化。
（中间有练到这些属性的应用，函数的封装，以及跨浏览器的封装函数，虽然现在应该没什么人会用ie8以下的。学到最重要的是一个设计思路的流程，这是最难想到的。）
（哪些东西是变化的，这个功能会通过什么在变化。）
第一个第二个功能算是完成，接着就开始第三个功能：鼠标移到小圆点上，小圆点就会变化图片。
A：同样的方法为每个小圆点添加事件。这里就不说了。遇到最大的问题就是作用域的问题和this的运用。一个是问题的关键。解决办法就是给每一个小圆点添加一个id，然后在事件function中去判断我【当前点（this）的运用】的这个小圆点的id就是多少，然后就是我的图片的索引值。