带有缩略图的图片切换效果

来源：互联网发布：对比度算法编辑：程序博客网时间：2024/06/15 03:40

效果预览：

html部分：

<div id="box">    <div id="left"><</div>    <div id="right">></div>    <img src="img/美女1.jpg" alt="MM" id="bigpic"/></div><ul id="nav"></ul>

css部分：

   <style>        ul,li{            margin: 0;            padding: 0;}        li{            list-style: none;}        body{            background: #c8ce3b;}        #box{            height: 600px;            width: 400px;            background:url("img/加载-008.gif") no-repeat center;            -webkit-background-size: 50px;            background-size: 50px;            margin: 200px auto 0 auto;            position: relative;}        #left,#right{            height: 50px;            width: 50px;            font-size: 40px;            font-weight:bold;            line-height: 50px;            background: #888888;            opacity: .2;            position: absolute;            top: 300px;            -webkit-border-radius: 50%;            -moz-border-radius: 50%;            border-radius: 50%;            cursor: pointer;            transition: .5s;}        #left:hover,#right:hover{            opacity: .6;            transform: scale(1.3);}        #left{            left: 20px;}        #right{            right: 20px;}        #bigpic{            height: 600px;            width: 400px;}        #nav{            height: 50px;            width: 400px;            line-height: 50px;            text-align: center;            margin: 0 auto;}        #nav li{            display: inline-block;            width: 20px;            height: 20px;            background: #575757;            border-radius: 50%;            margin-right: 5px;            cursor: pointer;            transition: .3s;            position: relative;}        #nav li img{            height: 60px;            width: 40px;            border: 1px solid #575757;            position: absolute;            top: -65px;            left: -10px;}        #nav .active{            background: #e4b43e;}

JavaScript部分：

<script>        window.onload = function () {            var oLeft = document.getElementById('left');            var oRight = document.getElementById('right');            var oImg = document.getElementById('bigpic');            var oUl = document.getElementsByTagName('ul')[0];            var aLi = oUl.getElementsByTagName('li');            var arr = ['img/美女1.jpg','img/美女2.jpg','img/美女3.jpg','img/美女4.jpg','img/美女5.jpg','img/美女6.jpg']            var str = '';            var num = 0;            //初始化            for (var i=0;i<arr.length;i++){                str += '<li></li>';            }            oUl.innerHTML = str;            imgGo(num);            //向右切换            oRight.onclick = function () {                clearClass();                num++;                imgGo(num%arr.length);            }            //向左切换            oLeft.onclick = function () {                clearClass();                num--;                if (num < 0 ){                    num = arr.length;                }                imgGo(num%arr.length);            }            //点击导航栏切换            for (var j=0; j<aLi.length;j++) {                aLi[j].index = j;                aLi[j].onmouseover = function () {                aLi[this.index].innerHTML = '<img src="' + arr[this.index] + '"/>';                }                aLi[j].onmouseout = function () {                    aLi[this.index].innerHTML = '';                }                aLi[j].onclick = function () {                    clearClass();                    imgGo(this.index);                    num = this.index;                }            }            function imgGo(number) {                aLi[number].className = 'active';                oImg.src = arr[number];            }            function clearClass() {                for (var i=0;i<aLi.length;i++) {                    aLi[i].className = '';                }            }        }    </script>

阅读全文

1 0