首页 > 代码库 > JS学习笔记--轮播图效果
JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点，进步一点点都是值得的，加油吧！！！
本章知识点：index this for if else
下边我分享下通过老师教的方式写的轮播图，基础知识实现：
1.css代码
<style>ul, ol { padding:0; margin:0; }li { list-style:none; }#box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:relative; background:url(img/loader_ico.gif) no-repeat center; overflow:hidden; }#box a { position:absolute; top:160px; z-index:1; width:30px; height:30px; line-height:30px; background:rgba(0,0,0, 0.4); color:#fff; text-align:center; text-decoration:none; font-size:14px; }#box a:hover { background:rgba(0,0,0, 1); }#box .prev { left:10px; }#box .next { right:10px; }#box img { width:600px; height:350px; }#box ul { position:absolute; top:0; left:0; width:3600px; transition:1s; }#box ul li { float:left; width:600px; height:350px; }#box ol { position:absolute; bottom:10px; left:240px; }#box ol li { float:left; width:30px; height:30px; margin-right:4px; background:#3CC; line-height:30px; text-align:center; font-size:14px; cursor:pointer;}#box .active { background:red; color:#fff; }</style>
2.html布局
<div id="box"> <a class="prev" href="javascript:;"><</a> <a class="next" href="javascript:;">></a> <ul> <!--<li><img src="http://www.mamicode.com/img/136.jpg" /></li> <li><img src="http://www.mamicode.com/img/138.jpg" /></li> <li><img src="http://www.mamicode.com/img/139.jpg" /></li> <li><img src="http://www.mamicode.com/img/150.jpg" /></li> <li><img src="http://www.mamicode.com/img/151.jpg" /></li> <li><img src="http://www.mamicode.com/img/152.jpg" /></li>--> </ul> <ol> <!--<li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>--> </ol></div>
3.JS交互
<script>var oDiv = document.getElementById(‘box‘);var aA = oDiv.getElementsByTagName(‘a‘);var oImg = oDiv.getElementsByTagName(‘img‘)[0];var oUl = oDiv.getElementsByTagName(‘ul‘)[0];var oOl = oDiv.getElementsByTagName(‘ol‘)[0];var aLi = oOl.getElementsByTagName(‘li‘);var arrUrl = [ ‘img/136.jpg‘, ‘img/138.jpg‘, ‘img/139.jpg‘, ‘img/150.jpg‘, ‘img/151.jpg‘, ‘img/152.jpg‘ ];var num = 0;// 初始化for (var i=0; i<arrUrl.length; i++) { oUl.innerHTML += ‘<li><img src="http://www.mamicode.com/‘ + arrUrl[i] + ‘" /></li>‘; oOl.innerHTML += ‘<li>‘ + (i+1) + ‘</li>‘;}aLi[num].className = ‘active‘; //默认点击第一个红色aA[0].onclick = function () { //按钮左 num-- if(num == -1){ num = arrUrl.length-1; //回到最后一张 } fnTab();}aA[1].onclick = function () { //按钮右 num++ if(num == arrUrl.length) { num = arrUrl.length-1 //最后一张 num = 0 //第一张 } fnTab();}// li 点击事件for (var i=0; i<arrUrl.length; i++) { aLi[i].index = i; aLi[i].onclick = function () { //alert( this.index*600 ); num = this.index; fnTab(); };}function fnTab() { for (var i=0; i<aLi.length; i++) { aLi[i].className = ‘‘; } aLi[num].className = ‘active‘; oUl.style.left = -num*600 + ‘px‘; //每点击一次600px}</script>
4.展示效果图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。