轮播图--原生js实现
2017-11-14 22:57
330 查看
今天抽空练习了一下轮播图的制作, 发现问题很多啊!
<!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: --".
这次只是简单的实现的轮换效果, 优化和美观处理还没有做.(不过效果不错感兴趣的可以试试, 希望大家多多提意见)
<!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: --".
这次只是简单的实现的轮换效果, 优化和美观处理还没有做.(不过效果不错感兴趣的可以试试, 希望大家多多提意见)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS原生轮播图实现
- 原生JS改变透明度实现轮播效果
- 原生js实现图片层叠轮播切换效果
- 原生JS实现的简单轮播图功能【适合新手】
- 原生JS实现轮播图1---匀速动画
- 原生js实现网易轮播图效果
- 原生js实现无缝轮播图效果
- JS原生代码实现轮播图（无左右滑动，底下圆点按钮）
- 原生JS实现"旋转木马"效果的图片轮播插件
- 原生js实现轮播图
- 原生js实现焦点轮播图动态切换
- 原生js实现轮播图
- 原生js实现图片轮播特效
- 原生JS-实现无限图片轮播
- js实现轮播图效果(附源码)--原生js的应用
- 实现图片首尾平滑轮播(JS原生方法―节流)
- 原生JS实现焦点轮播图 完整代码
- 利用原生js实现轮播图效果
- 原生js实现图片轮播特效