1.图片淡入淡出自动轮播.
2.可以用按钮控制轮播.
效果图:
代码如下:
html+scc:
*{margin: 0;padding: 0;}html,body{width: 100%;}.container{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 800px;height: 500px;overflow: hidden;}.list img{position: absolute;left: 0;top: 0;width: 800px;height: 500px;opacity: 0;z-index: 1;transition: all 1s;}.list img:first-child{opacity: 1;z-index: 2;}.buttons{position: absolute;left: 50%;bottom: 20px;margin-left: -90px;width: 180px;text-align: center;cursor: pointer;z-index: 2;}.buttons span{display: inline-block;width: 20px;height: 20px;margin-right: 5px;border-radius: 50%;background: #aaa;border: 1px solid #fff;}.buttons span:last-child{margin-right: 0;}.buttons .on{background: #000;}.arrow{display: none;position: absolute;top: 230px;width: 40px;height: 40px;background: rgba(0,0,0,0.4);font-size: 40px;font-weight: bold;text-align: center;cursor: pointer;color: #fff;z-index: 2;}.container:hover .arrow{display: block;}#pre{left: 0;}#next{right: 0;}</style>
</head>
<body>
<div id="container" class="container"><div id="list" class="list" ><img src="i/8绣春刀.jpg" alt="绣春刀"><img src="i/1当幸福来敲门.jpg" alt="当幸福来敲门"><img src="i/2蝙蝠侠黑暗骑士.jpg" alt="蝙蝠侠黑暗骑士"><img src="i/3后天.jpg" alt="后天"><img src="i/7无间道.jpg" alt="无间道"></div><div id="buttonGroup" class="buttons"><span index="0" class="on"></span><span index="1"></span><span index="2"></span><span index="3"></span><span index="4"></span></div>
</div>js:
function $(id) {return document.getElementById(id);}var buttonGroup=$("buttonGroup"),buttons=buttonGroup.getElementsByTagName('span'),list=$("list"),imgs=list.getElementsByTagName('img'),flag=0,container=$("container"),timer;function render(index){for(var i=0;i<imgs.length;i++){imgs[i].style.opacity="0";imgs[i].style.zindex="1";}imgs[index].style.zindex="2";imgs[index].style.opacity="1";}function bt_listen(event){if (event.target&&event.target.tagName.toLowerCase()=='span') {var index=event.target.getAttribute('index');flag=index;render(flag);showButton();}}function showButton(){for(var i=0;i<buttons.length;i++){buttons[i].className=buttons[i].className.replace(/\s*on/,"");}buttons[flag].className+=" on";}function play(){timer=setInterval(function(){if (flag==4) {flag=0;}else{flag++;}render(flag);showButton();},3000);}function stop(){clearInterval(timer);} function start(){buttonGroup.addEventListener('click',bt_listen,false);container.addEventListener('mouseenter',stop,false);container.addEventListener('mouseleave',play,false);play();} start();思路:
让所有的图片都position:absolute,显示在一个容器内,设置除了第一张图片之外的所有图片opcity:0;将要显示的图片z-index设置为2,其他都设置为1.flag用来记录当前的索引值。
render(index)将索引为index的图片显示.
showButton()通过flag值来渲染当前图片对应的按钮.
bt_listen()为按钮的监听函数,取出当前被点击按钮的index属性,然后用render()函数来渲染图片,再调用showButton()渲染按钮.
play()为自动轮播函数,设置setInterval,当flag=4时,重置为0,否则flag++，然后调用render和showButton.
