<!DOCTYPE html><html><head>?? ?<meta charset="UTF-8">?? ?<title>焦點輪播圖</title>?? ?<style type="text/css">?? ??? ?*{margin: 0;padding: 0;text-decoration: none;}?? ??? ?body{padding: 20px;}?? ??? ?#container{?? ??? ??? ?width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative;?? ??? ?}?? ??? ?#list{width: 4200px;height: 400px;z-index: 1;position: absolute;}?? ??? ?#list img{float:left;}?? ??? ?#buttons{height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;position: absolute;}?? ??? ?#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}?? ??? ?#buttons .on {? background: orangered;}?? ??? ?.arrow{cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px; font-weight: bold; width: 40px; height: 40px;? position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}?? ??? ?.arrow:hover{background-color: RGBA(0,0,0,.7);}?? ??? ?#container:hover .arrow { display: block;}?? ??? ?#prev { left: 20px;}??????? #next { right: 20px;}?? ?</style>?? ?<script type="text/javascript">?? ?window.onload = function(){?? ??? ?var container = document.getElementById('container');?? ??? ?var list = document.getElementById('list');?? ??? ?var buttons = document.getElementById('buttons').getElementsByTagName('span');?? ??? ?var prev = document.getElementById('prev');?? ??? ?var next = document.getElementById('next');?? ??? ??? ??? ??? ?next.onclick = function(){?? ??? ??? ?list.style.left = parseInt(list.style.left) - 600 + 'px';?? ??? ?}?? ??? ?prev.onclick = function(){?? ??? ??? ?list.style.left = parseInt(list.style.left) + 600+'px';?? ??? ?}?? ?}?? ?</script></head><body>?? ?<div id="container">??? <div id="list">??????? <img src="images/5.jpg" alt="1"/>??????? <img src="images/1.jpg" alt="1"/>??????? <img src="images/2.jpg" alt="2"/>??????? <img src="images/3.jpg" alt="3"/>??????? <img src="images/4.jpg" alt="4"/>??????? <img src="images/5.jpg" alt="5"/>??????? <img src="images/1.jpg" alt="5"/>??? </div>??? <div id="buttons" style="left: -600px;">??????? <span index="1"></span>??????? <span index="2"></span>??????? <span index="3"></span>??????? <span index="4"></span>??????? <span index="5"></span>??? </div>??? <a href="javascript:;" id="prev"><</a>??? <a href="javascript:;" id="next">></a></body></html>
為什么箭頭不起作用？急急急！在線等
qq_眉黛青山_0
2016-05-10 17:59:51