轮播图（2018-08-09）

作者: 小本YuDL | 来源:发表于2018-08-09 20:56 被阅读18次

轮播图（2018-08-09）
无标题文章
轮播图
现金红包
day7_作业
[iOS]定制性强的广告轮播图--SCAdView
普通奖品
轮播图心得
第五周学习内容
三种样式的轮播图

轮播图在生活中很常见，比如网页的广告宣传什么的。轮播图的写法也有很多种，有手动点击轮播的，还有自动轮播的，当然也有两者结合的。那今天就介绍一下简单的点击轮播图，和自动轮播图吧。

使用的方法：

注册点击事件
利用图片的透明度实现切换
计时器的使用

1.自动轮播
首先要给图片定位，使其重叠，就可以通过透明度的改变使其轮播。
外层的ul设置相对定位relative。内层的li设置绝对定位absolute，就可使图片重叠，其中还设置了transition,让其产生渐变的效果。然后通过设置计时器，改变图片的透明度，就可实现自动轮播了。
那来看下代码吧

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            position: absolute;
            top:25%;
            left:35%;
            width: 600px;
            height: 400px;
            border: 1px solid #949595;
            box-shadow: 0 0 8px #cccccc;

        }
        ul{
            position:relative;
            list-style-type: none;
        }
        li{
            position: absolute;
            padding: 20px;
            overflow: hidden;
            opacity: 1;
            transition: 1s;  
        }
        img{
            width: 560px;
            height: 350px;
            box-shadow: 0 0 8px #cccccc;
        }
</style>
</head>
<body>
<div id="container">
    <ul>
        <li><img src="image/99.jpg"></li>
        <li><img src="image/2.jpg"></li>
        <li><img src="image/3.jpg"></li>
        <li><img src="image/4.jpg"></li>
        <li><img src="image/1.jpg"></li>
        <li><img src="image/38.jpg"></li>
        <li><img src="image/7.jpg"></li>
        <li><img src="image/8.jpg"></li>
        <li><img src="image/53%20(2).jpg"></li>
        <li><img src="image/10.jpg"></li>
        <li><img src="image/18.jpg"></li>
        <li><img src="image/11.jpg"></li>
        <li><img src="image/98.jpg"></li>
        <li><img src="image/47.jpg"></li>
        <li><img src="image/14.jpg"></li>
    </ul>
</div>
<script>
    var i=0;
    var lis = document.getElementsByTagName("li");
    function  settime() {
        i++;
        if(i == lis.length){    //实现图片循环播放
            i = 0;
        }
        for(var j=0;j<lis.length;j++){
            lis[j].style.opacity = 0;
        }
        lis[i].style.opacity = 1;
    }
    var time = setInterval("settime()",1000);  //每隔一秒换一张图片
</script>

看下效果图：

图不能看出动态，但是可以看其样式

图片在改变

2.点击轮播
与自动轮播的区别，就是设置按钮注册点击事件。前进和后退，主要是通过
index来计算点击的次数，然后将其他的图片通过循环都隐藏，将点击的图片lis[index]显示。这个方法很简单，也很容易理解，但是也存在问题。
比如：每点击一次都要循环隐藏所有图片，效率太低，还需要改进。
来看下代码：

（在自动轮播的基础上，加上左右点击的按钮样式）
<style>
 .btn{
            width: 50px;
            height: 80px;
            top:180px;
            position: absolute;
            text-align: center;
            line-height: 60px;
            background-color: transparent;
        }
        .btn:hover{
            background-color: rgba(0,0,0,0.2);
        }
        .mycss{
            font-size: 30px;
            color: #949595;
            line-height: 80px;
        }
        #next{
            right: 15px;
        }
</style>

<body>
<div id="prev" class="btn" onclick="prev()">
    <i class="iconfont icon-houtui1 mycss"></i>
</div>
<div id="next" class="btn" onclick="next()">
    <i class="iconfont icon-qianjin1 mycss"></i>
</div>
<script>
   var index= 0；
   function  next() {
        index++;
        if(index == lis.length){
            index = 0;     //这样点击到最后一张，又可以回到第一张
        }
        for(var i =0;i<lis.length;i++){ //将所有的图片都隐藏
            lis[i].style.opacity = 0; 
        }
        lis[index].style.opacity = 1; //将点击的相应次数的图片显示
    }
    function  prev() {
        index--;
        if(index == -1){
             index = lis.length -1;  //后退到第一张，又回到最后一张
        }
        for(var i=0;i<lis.length;i++){
            lis[i].style.opacity = 0;
        }
        lis[index].style.opacity = 1;
    }
</script>
<body>

看下效果图：