javascript 实现图片轮播和点击切换功能

图片轮播是网页上一个比较常见的功能,下面我们来实现他吧

原理很简单:

1:固定的区域,所有的图片重叠,一次只能显示一张图片

2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了


DOCTYPE html>
<html>
<head>
    <title>cycle_pictitle>
    <meta charset="utf-8">
    <meta content="text/html" http-equiv="Content-Type">
    <style type="text/css">
        #slideshow_wrapper {
            POSITION: relative;
            PADDING-BOTTOM: 0px;
            BACKGROUND-COLOR: #121212;
            PADDING-LEFT: 0px;
            WIDTH: 650px;
            PADDING-RIGHT: 0px;
            HEIGHT: 400px;
            OVERFLOW: hidden;
            PADDING-TOP: 0px
        }
        #slideshow_footbar {
            Z-INDEX: 5;
            POSITION: absolute;
            FILTER: alpha(opacity=50);
            WIDTH: 100%;
            BOTTOM: 0px;
            HEIGHT: 30px;
            background-color: black;
            opacity:0.5;
        }
        #slideshow_photo {
            POSITION: absolute;
            WIDTH: 100%;
            HEIGHT: 100%;
            CURSOR: pointer
        }
        #slideshow_photo A {
            Z-INDEX: 1;
            BORDER-BOTTOM: 0px;
            POSITION: absolute;
            BORDER-LEFT: 0px;
            MARGIN: 0px;
            DISPLAY: block;
            BORDER-TOP: 0px;
            TOP: 0px;
            BORDER-RIGHT: 0px;
            LEFT: 0px
        }
        #slideshow_footbar .slideshow-bt {
            BACKGROUND-COLOR: #d2d3d4;
            MARGIN: 10px 10px 0px 0px;
            WIDTH: 10px;
            DISPLAY: inline;
            FLOAT: right;
            HEIGHT: 10px;
            FONT-SIZE: 0px
        }
        #slideshow_footbar .bt-on {
            BACKGROUND-COLOR: red;
        }
style>
<script type="text/javascript" charset="utf-8">
    var curIndex=1;//初始换显示第一张
    function slideTo (index) {
        var index = parseInt(index);
        var pic = document.getElementById("slideshow_photo").childNodes;
        for(var i=0;i<pic.length;i++){//改变zIndex属性
            if(pic[i].attributes && pic[i].attributes['index'] && parseInt(pic[i].attributes['index'].value)==index){
                pic[i].style.zIndex=2;
                curIndex=index;
            }
            else if(pic[i].attributes && pic[i].attributes['index']) {
                pic[i].style.zIndex=1;
            }
        }
        var bts = document.getElementsByClassName("slideshow-bt");
        for(var i=0;i<bts.length;i++){//改变显示的效果
            if(parseInt(bts[i].attributes['index'].value)==index){
                bts[i].className="slideshow-bt bt-on";
            }
            else bts[i].className = "slideshow-bt";
        }
    }
    window.onload = function  () {    //为按钮初始化onclick事件
        var bts = document.getElementsByClassName("slideshow-bt");
        for(var i=0;i<bts.length;i++){
            bts[i].onclick = function  () {
                slideTo(this.attributes['index'].value);
            }
        }
    }
    setInterval(function  () {//循环切换
        if(curIndex+1>5) curIndex=0;
        slideTo(curIndex+1);
    },2000);
script>
head>
<body>
    <div id="slideshow_wrapper">
        <div id="slideshow_photo">
            <a href="#" title="" index="1"><img src="./num/1.jpg" width="650px;" alt="1" border="0px;">a>
            <a href="#" title="" index="2"><img src="./num/2.jpg" width="650px;" alt="2" border="0px;">a>
            <a href="#" title="" index="3"><img src="./num/3.jpg" width="650px;" alt="3" border="0px;">a>
            <a href="#" title="" index="4"><img src="./num/4.jpg" width="650px;" alt="4" border="0px;">a>
            <a href="#" title="" index="5"><img src="./num/5.jpg" width="650px;" alt="5" border="0px;">a>
        div>
        <div id="slideshow_footbar">    
            <div class="slideshow-bt" index="5">div>
            <div class="slideshow-bt" index="4">div>
            <div class="slideshow-bt" index="3">div>
            <div class="slideshow-bt" index="2">div>
            <div class="slideshow-bt" index="1">div>
        div>
    div>
body>
html>

 

转载于:https://www.cnblogs.com/qwj-sysu/p/4080797.html

你可能感兴趣的:(javascript 实现图片轮播和点击切换功能)