轮播图--原生js实现

来源：互联网发布：mysql中的sno是啥意思编辑：程序博客网时间：2024/06/05 08:23

今天抽空练习了一下轮播图的制作, 发现问题很多啊!

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="index.css"><title>Document</title></head><body><divid="wrapper"><divclass="items"><ulclass="banner"style="left: -200px"><li><a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FrN60ozLdKaIU0ks6u0G69ni5IIb.gif"alt=""></a></li><li><a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FmOZHFnDJUgOGFGbjs8fmPUDzV4K.gif"alt=""></a></li><li><a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FqcLkk-cP85-IOPrGSjcETb5y9sr.gif"alt=""></a></li><li><a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FqVnaFhpWu9DZqMp8HHpHqy4tWzk.gif"alt=""></a></li><li><a><imgsrc="http://owuatqkzy.bkt.clouddn.com/FqY_Gl5GIc-yK5SyuMZLTCBHoKp7.gif"alt=""></a></li></ul></div><divclass="clear"></div><divclass="change"><ulid="dots"><li><aclass="active">1</a></li><li><aclass="">2</a></li><li><aclass="">3</a></li><li><aclass="">4</a></li><li><aclass="">5</a></li></ul></div><divid="pre"class="hidden"><</div><divid="next"class="hidden">></div><scriptsrc="animate.js"type="text/javascript"></script></div></body></html>

首先是html, 要注意的是, 想要实现水平放置图片并留出展示窗口, 如果使用列表的话, 需要在图片列表的外面套一层div, 宽度设置为图片总宽度, position设置为relative, overflow设置为hidden, 这样就可以把不需要的部分遮起来, 而ul则设置为absolute, 以改变它的left来实现轮换.

* {padding:0;margin:0;}img {width:200px;height:200px;}ul li {list-style:none;float:left;}#wrapper{margin:0auto;width:200px;height:200px;position:relative;overflow:hidden;}.items{height:100%;float:left;}.items ul{position:absolute;z-index:1;width:1000px;height:200px;left: -200px;}.change{width:120px;height:20px;float:right;position:absolute;right:40px;bottom:5px;z-index:5;}.change ul{margin-left:10px;}.change ul li{width:20px;}.change .active {background:lightpink;color:lightpink;width:15px;}.change ul li a{width:10px;height:10px;display:inline-block;background:#fff;border-radius:10px;text-align:center;font-size:5px;line-height:10px;cursor:pointer;color:#fff;}#pre,#next {width:20px;height:20px;background:#fff;font-size:5px;font-weight:900;text-align:center;line-height:20px;position:absolute;top: 50%;z-index:3;cursor:pointer;opacity:0.5;}#pre {left: 0;}#next {right:0;}.hidden{display:none;}.change ul li a.hidden{background:#fff;color:#000;}

css这部分代码写得比较乱, 不过总体没有什么太大问题.

var next=document.getElementById("next");var prev=document.getElementById("pre");var item=document.getElementsByClassName("banner")[0];var wrapper=document.getElementById("wrapper");var index=0;var dots=document.getElementById("dots").getElementsByTagName("li");next.onclick=function(){next_pic();}prev.onclick=function(){prev_pic();}function next_pic(){var newLeft=parseInt(item.style.left)-200;if (newLeft===-1000){newLeft =0;}item.style.left=newLeft + "px";index++;if (index>dots.length-1) {index =0;}dotActive();}function prev_pic(){var newLeft=parseInt(item.style.left)+200;if (newLeft===200) {newLeft =-800;}item.style.left=newLeft + "px";index--;if (index<0) {index =dots.length;}}var timer=null;function autoPlay(){timer =setInterval(function(){next_pic();}, 3000);}autoPlay();wrapper.onmouseover=function(){clearInterval(timer);prev.className="";next.className="";}wrapper.onmouseleave=function(){autoPlay();prev.className="hidden";next.className="hidden";}function dotActive(){for (leti= 0;i< dots.length;i++){dots[i].firstChild.className="";}dots[index].firstChild.className="active";}function manuChange(){for (leti= 0;i< dots.length;i++){(function(i){dots[i].firstChild.onclick=function(){var newLeft=i * (-200);item.style.left=newLeft + "px";index =i;dotActive();}})(i)}}manuChange();

写js代码的时候卡了一下,忘了getElementsClassName获取的是一个对象数组, 需要[index]来选择所需的元素, 在此调试花费了好多时间; 还有就是在使用--.style.left时需要先在html代码中加入内联的left属性, style="left: --".

这次只是简单的实现的轮换效果, 优化和美观处理还没有做.(不过效果不错感兴趣的可以试试, 希望大家多多提意见)

阅读全文

0 0