zoukankan      html  css  js  c++  java
  • jQuery实现简单的图片淡入淡出效果

    整体思路:

    1.实现页面布局,设置css样式

    2.用jQuery获取需要用到的变量

    3.用jQuery为两个按钮绑定事件

    一.页面布局:

    <div class="d1">
       //随便在网上找一张图片放入img中//
        <img src="https://dummyimage.com/900x400/0000ff/ff" alt="" class="c1 c2">
        <div class="d2">
        <input type="button" value="<-" id="b1">
        <input type="button" value="->" id="b2">
        </div>
    </div>
     <style>
            body{
                margin: 0 0 0 0;
                height: 1000px;
                 100%;
    
            }
            .d1{
                position: absolute;
                 100%;
                height: 500px;
                top: 50%;
                margin-top: -250px;
            }
            .d2{
                 margin-left: 950px;
            }
            .d1 img{
                margin-left: 50px;
                position: relative;
            }
            .c1{
    
                display: block;
                padding-left: 500px;
            }
        </style>
    css布局

    我的css布局仅仅做了居中,各位可以做的更加美观性

    二.jQuery获取需要用到的变量

     //imgList中放入你要加入的图片,记得要加入在div中定义的起始图片//
    var imgList=['https://dummyimage.com/900x400/0000ff/ff','https://dummyimage.com/900x400/00/ff','https://dummyimage.com/900x400/ff0000/ff'];
        var $imgEle=$('img');//获取div中的img
        var nowSrc=imgList.indexOf($imgEle[0].src);//获取起始图片的索引值,后面函数要用到
    //获取两个按钮
        var $b1Ele=$('#b1');
        var $b2Ele=$('#b2');

    三.用jQuery为两个按钮绑定事件

    首先写$b1El1的函数:

    function f1(){
           //先让当前图片淡出,时间为0.5毫秒
           $imgEle.fadeOut(500);
           //进行判断,如果索引值为0,让索引变成列表的最大值
           if(nowSrc===0){
               nowSrc=imgList.length-1;
           }
           //索引值不为0,进行--
           else {
               nowSrc--;
           }
          //因为我淡出的时间设置为0.5毫秒,所以我设置计时器,让下面的代码0.5毫秒后启动
           t=setTimeout(function () {
            //更换图片的src
               $imgEle.attr('src',imgList[nowSrc]);
            //图片淡入,时间为0.5毫秒
               $imgEle.fadeIn(500);
           },500);
        }

    为$b1El1绑定函数:

    $b1Ele.on('click',f1);

    同理可以写出按钮2的函数,并进行绑定

     function f2(){
           $imgEle.fadeOut(500);
           console.log(nowSrc);
           if(nowSrc===imgList.length-1){
               nowSrc=0;
           }
           else {
               nowSrc++;
           }
           t2=setTimeout(function () {
               $imgEle.attr('src',imgList[nowSrc]);
           $imgEle.fadeIn(500);
           },500);
            t2=null
        }
        $b2Ele.on('click',f2);

    下面是整体代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--设置css样式-->
        <style>
            body{
                margin: 0 0 0 0;
                height: 1000px;
                 100%;
    
            }
            .d1{
                position: absolute;
                 100%;
                height: 500px;
                top: 50%;
                margin-top: -250px;
            }
            .d2{
                 margin-left: 950px;
            }
            .d1 img{
                margin-left: 50px;
                position: relative;
            }
            .c1{
    
                display: block;
                padding-left: 500px;
            }
        </style>
    
        <script src="jQuery.js"></script>
    </head>
    <body>
    <div class="d1">
        <img src="https://dummyimage.com/900x400/0000ff/ff" alt="" class="c1 c2">
        <div class="d2">
        <input type="button" value="<-" id="b1">
        <input type="button" value="->" id="b2">
        </div>
    </div>
    <script>
        var imgList=['https://dummyimage.com/900x400/0000ff/ff','https://dummyimage.com/900x400/00/ff','https://dummyimage.com/900x400/ff0000/ff'];
        var $imgEle=$('img');
        var nowSrc=imgList.indexOf($imgEle[0].src);
        var $b1Ele=$('#b1');
        var $b2Ele=$('#b2');
    
        function f1(){
           $imgEle.fadeOut(500);
           console.log(nowSrc);
           if(nowSrc===0){
               nowSrc=imgList.length-1;
           }
           else {
               nowSrc--;
           }
           t=setTimeout(function () {
               $imgEle.attr('src',imgList[nowSrc]);
           $imgEle.fadeIn(500);
           },500);
    
        }
        function f2(){
           $imgEle.fadeOut(500);
           console.log(nowSrc);
           if(nowSrc===imgList.length-1){
               nowSrc=0;
           }
           else {
               nowSrc++;
           }
           t2=setTimeout(function () {
               $imgEle.attr('src',imgList[nowSrc]);
           $imgEle.fadeIn(500);
           },500);
            t2=null
        }
        $b1Ele.on('click',f1);
        $b2Ele.on('click',f2);
    </script>
    </body>
    </html>
    全部代码
  • 相关阅读:
    Java基础第十四天总结——面向对象(下)
    Java基础第十三天总结——面向对象(中)
    Java基础第十二天总结——面向对象(中)
    Java基础第十一天总结——面向对象(中)
    Java基础第十天总结——面向对象(上)
    Java基础第九天总结——面向对象(上)——再谈方法
    Java基础第八天总结——面向对象(上)——属性和方法
    Java基础第七天总结——数组
    python shelve 模块
    python正则表达式
  • 原文地址:https://www.cnblogs.com/98WDJ/p/10679228.html
Copyright © 2011-2022 走看看