首页 > 代码库 > JS学习笔记--轮播图效果

JS学习笔记--轮播图效果

2024-07-13 15:35:04   222人阅读

希望通过自己的学习收获哪怕收获一点点，进步一点点都是值得的，加油吧！！！

本章知识点：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.展示效果图


联系
我们