<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>原生js實(shí)現(xiàn)幻燈片</title>
</head>
<style>
? ? .container{
? ? ? ? width: 100%;
? ? ? ? height: 500px;
? ? ? ? position: relative;
? ? }
? ? .content{
? ? ? ? width: 900px;
? ? ? ? height: 450px;
? ? ? ? position: relative;
? ? ? ? overflow: hidden;
? ? ? ? border: 1px solid seagreen;
? ? ? ? margin: 0 auto;
? ? }
? ? .slider-img{
? ? ? ? width: 900px;
? ? ? ? height: 450px;
? ? ? ? margin: 10px auto;
? ? }
? ? .slider-img img{
? ? ? ? vertical-align: top;
? ? ? ? width: 800px;
? ? ? ? height: 400px;
? ? ? ? margin: 10px 50px;
? ? ? ? display: block;
? ? }
.left{
? ? ? ? margin-top: -300px;
? ? ? ? margin-left: 50px;
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? }
? ? .left img,.right img{
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? }
? ? .right{
? ? ? ? margin-top: -100px;
? ? ? ? margin-right: 50px;
? ? ? ? float: right;
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? }
? ? .dot{
? ? ? ? position: relative;
? ? ? ? top: 23%;
? ? ? ? left: 43%;
? ? ? ? width: 50%;
? ? }
? ? .dotul{
? ? ? ? width: 450px;
? ? }
? ? .dotul li{
? ? ? ? width: 20px;
? ? ? ? height: 20px;
? ? ? ? background-color: seagreen;
? ? ? ? list-style: none;
? ? ? ? float: left;
? ? ? ? border-radius: 20px;
? ? ? ? margin-left: 15px;
? ? ? ? z-index: 999;
? ? ? ? cursor: pointer;
? ? }
.active{
? ? ? ? background-color: orangered !important;
? ? }
</style>
<body>
? ? <div class="container" id="contaner">
? ? ? ? <div class="content" id="content">
? ? ? ? ? ? <div class="slider-img" id="slider" >
? ? ? ? ? ? ? ? <a href="javascript:;">
? ? ? ? ? ? ? ? ? ? <img src="../img/1.jpg" alt="1.jpg" id="img">
? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="btn">
? ? ? ? ? ? <div class="left" id="left">
? ? ? ? ? ? ? ? <a href=" ###"><img src="../img/left.png"></a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="right" id="right">
? ? ? ? ? ? ? ? <a href=" ###"><img src="../img/right.png"></a>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="dot">
? ? ? ? ? ? <ul id="ul" class="dotul">
? ? ? ? ? ? ? ? <li class="active"></li>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
<script>
? //首先要獲取元素
? ? var container = document.getElementById("container");
? ? var content = document.getElementById("content");
? ? var slider = document.getElementById("slider");
? ? var img = document.getElementById("img");
? ? var ul = document.getElementById("ul");
? ? var li = document.getElementsByTagName("li");
? ? var left = document.getElementById("left");
? ? var right = document.getElementById("right");
? ? var num = 0;
? ? var timer = null;
? ? //圖片位置
? ? var arrUrl = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
? ? left.onclick = function (ev) {
? ? ? ? num--;
? ? ? ? if (num == -1){
? ? ? ? ? ? num = arrUrl.length-1;//如果到了第一張，返回最后一張
? ? ? ? }
? ? ? ? changeImg();
? ? };
right.onclick = function (ev) {
? ? ? ? num++;
? ? ? ? if (num == arrUrl.length){
? ? ? ? ? ? num = 0;//如果是最后一張，則返回第一張
? ? ? ? }
? ? ? ? changeImg();
? ? };
? ? //點(diǎn)擊小圓點(diǎn)跳轉(zhuǎn)到對(duì)應(yīng)的圖片
? ? for (var i=0;i<arrUrl.length;i++){
? ? ? ? ? li[i].index = i;
? ? ? ? ? li[i].onclick = function (ev) {
? ? ? ? ? ? ? num = this.index;
? ? ? ? ? ? ? changeImg();
? ? ? ? ? }
? ? }
? ? setTimeout(autoPlay(),1000);//延遲1秒執(zhí)行自動(dòng)切換
? //鼠標(biāo)移入清除定時(shí)器，鼠標(biāo)移出恢復(fù)
? ? content.onmouseover = function (ev) {
? ? ? ? clearInterval(timer);
? ? };
? ? content.onmouseout = autoPlay;
? //圖片切換函數(shù)
? ? function changeImg() {
? ? ? ? img.src = arrUrl[num];//改變圖片src位置
? ? ? ? for (var i = 0;i< li.length;i++){//改變?cè)c(diǎn)樣式
? ? ? ? ? ? li[i].className = "";
? ? ? ? }
? ? ? ? li[num].className = "active";
? ? }
? ? //設(shè)置定時(shí)器
? ? function autoPlay() {
? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? num++;
? ? ? ? ? ? num %= arrUrl.length;
? ? ? ? ? ? changeImg();
? ? ? ? },2000);
? ? }
</script>
</body>
</html >
