<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? }
? ? ? ? .wrap{
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 800px;
? ? ? ? ? ? background: url(img/bg.jpg) no-repeat;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? margin-left: -500px;
? ? ? ? ? ? margin-top: -400px;
? ? ? ? }
? ? ? ? #prev,#next{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 25px;
? ? ? ? ? ? height: 45px;
? ? ? ? ? ? background: url(img/ar.png) no-repeat;
? ? ? ? ? ? top: 155px;
? ? ? ? }
? ? ? ? #prev{
? ? ? ? ? ? left: 13px;
? ? ? ? }
? ? ? ? #next{
? ? ? ? ? ? transform: rotate(180deg);
? ? ? ? ? ? right: 13px;
? ? ? ? }
? ? ? ? .pic{
? ? ? ? ? ? width: 536px;
? ? ? ? ? ? height: 356px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 170px;
? ? ? ? ? ? left: 297px;
? ? ? ? }
? ? ? ? img{
? ? ? ? ? ? vertical-align: top;
? ? ? ? ? ? width: 536px;
? ? ? ? ? ? height: 356px;
? ? ? ? }
? ? ? ? #txt{
? ? ? ? ? ? width: 536px;
? ? ? ? ? ? height: 71px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 297px;
? ? ? ? ? ? bottom: 185px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font: 20px/71px "微軟雅黑";
? ? ? ? ? ? color: #666;
? ? ? ? }
? ? </style>
</head>
<body>
? <div class="wrap">
? ? ? <div class="pic">
? ? ? ? ? ? <a id="prev" href="javascript:;"></a>
? ? ? ? ? ? <img id="img" src="img/img1.jpg" alt="">
? ? ? ? ? ? <a id="next" href="javascript:;"></a>
? ? ? </div>
? ? ? <p id="txt">這是第 <span>1</span> 張圖片</p>
? </div>
? <script>
? ? //? ? 1. 獲取元素? 左右按鈕 圖片本身 img標(biāo)簽? span標(biāo)簽
? ? //? ? 2. 右邊按鈕添加點(diǎn)擊事件?
? ? //? ? 3. 修改 img標(biāo)準(zhǔn)中 src屬性
? ? //? ? 4. 修改 span中的數(shù)值
? ? // a標(biāo)簽本身不是用來加js的 本職工作 - > 跳轉(zhuǎn)頁面
? ? // 如果 你需要讓 a加js事件 那 就給href屬性 加上 JavaScript:;
? ? var prev=document.getElementById('prev');
? ? var img=document.getElementById('img');
? ? var next=document.getElementById('next');
? ? var span=document.getElementById('txt').querySelector('span');
? ? var arr = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg']
? ? // 改變位置可改變順序
? ? var num=0;
? ? // 添加點(diǎn)擊事件
? ? next.onclick=function(){
? ? ? ? // 自己加1
? ? ? ? // num+=1;
? ? ? ? // num=num+1;
? ? ? ? num++
? ? ? ? // 區(qū)間控制? 范圍限制 1-5
? ? ? ? // if(num==5){
? ? ? ? if(num==arr.length){
? ? ? ? ? ? // 跳出了范圍
? ? ? ? ? ? num=0;
? ? ? ? }
? ? ? ? img.src=arr[num];
? ? ? ? // 改變數(shù)值
? ? ? ? span.innerHTML=num + 1;
? ? }
? ? // 自己完成 上一張的切換
? ? prev.onclick=function(){
? ? ? ? // num-=1;
? ? ? ? // num=num-1;
? ? ? ? num--
? ? ? ? if(num<0){
? ? ? ? ? ? num=arr.length-1;
? ? ? ? }
? ? ? ? img.src=arr[num];
? ? ? ? // 改變數(shù)值
? ? ? ? span.innerHTML=num + 1;
? ? }
? </script>
</body>
</html>
