如何制造滑动图片公告的效果

最新推荐文章于 2021-06-05 11:38:04 发布

奋斗的金鱼

最新推荐文章于 2021-06-05 11:38:04 发布

阅读量377

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/qq_15379219/article/details/42347715

版权

PHP 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在网上找了个代码自己修改了一下，但是不知道为什么在修改的时候调用这个文件时总是显示中文乱码。这个下次再详细说，先来说说滑动图片效果是怎么实现的吧。

先定义好style，使用.imgview块来定义好图片以及边框的样字。放在head里面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" href="css/1.css" type = "text/css">
    <style>
        .imgview {
            width: 640px;
            height: 472px;
            margin: 5px auto;
            border: 3px solid #f6f6f6;
            overflow: hidden;
        }
        .imgview img {
            width: 640px;
            height: 472px;
        }
        .imgview-nav {
            width: 640px;
            margin: 10px auto;
            border: 2px solid #f6f6f6;
            list-style-type: none;
        }
        .imgview-nav li {
            float: left;
            width: 15px;
            height: 15px;
			 background: #b4d0eb;
            border:  1px solid #f6f6f6;
            margin: 7px;
        }
        span {
            display: inline-block;
			//内联元素,简单来说就是在同一行显示。
            width: 30px;
            height: 30px;
            background: #b4d0eb;
            border-radius: 50%;
        }
</style>
</head>

将图片已建表格形式（一行n列）插入到表格中，定义图片的编号，进行移动。注意使用function先定义好方法再调用。

<body>
<div class="wrap">
        <div class="imgview" id="imgView">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td><a href="bookstory1.php"><img src="pic1.jpg" alt=""></a></td>
                    <td><a href="bookstory2.php"><img src="pic2.jpg" alt=""></a></td>
                    <td><img src="pic3.jpg" alt=""></td>
                </tr>
            </table>
       </div>
      <ul class="imgview-nav" id="imgviewNav">  
            <li> 1</li>
            <li> 2</li>
            <li> 3</li> 
        </ul>
        <span>  Left  </span>
        <span> Right </span>
     
</div> 
<script>
        var imgView = document.getElementById('imgView'),
             imgWidth = imgView.getElementsByTagName('img'),
             btn = document.getElementsByTagName('li'),
              len = btn.length,
              imgNum = 0,
              endPos = 0,
              timer = null,
              timer2 = null,
              conSpan = document.getElementsByTagName('span');

        conSpan[0].onclick = function (){
            if (timer) {
                clearInterval(timer);
            };
            if (timer2) {
                clearInterval(timer2);
            };
            imgNum--;
            if (imgNum < 0 ) {
                imgNum = len;
            };
            timer = setInterval(move, 16);
            timer2 = setInterval(autoMove, 3000);        
        }
        conSpan[1].onclick = function (){
            if (timer) {
                clearInterval(timer);
            };
            if (timer2) {
                clearInterval(timer2);
            };
            imgNum++;
            if (imgNum == len ) {
                imgNum = 0;
            };
            timer = setInterval(move, 16);
            timer2 = setInterval(autoMove, 3000);            
        }
        //绑定事件。添加移动效果
        for (var i = 0; i < len; i++) {
            btn[i].index = i;
            btn[i].onmouseover = function(){
                clearInterval(timer2);
                imgNum = this.index; 
                if (timer) {
                    clearInterval(timer);
                };
                timer = setInterval(move, 16);                
            }
            btn[i].onmouseout = function(){
                timer2 = setInterval(autoMove, 2000);
            }
        };
        //图片缓动效果，原理是保持步数不变，改变距离的同时改变速度
        function move(){
            var starPos = imgView.scrollLeft,
                speed;
            endPos = imgNum * imgWidth[0].offsetWidth;
            speed = (endPos - starPos) / 20;
            if (speed == 0) {
                clearInterval(timer);
            } else if(speed > 0){
                speed = Math.ceil(speed);
            } else {
                speed = Math.floor(speed);
            }
            imgView.scrollLeft = starPos + speed;

        }
        //控制图片的自动滚动，通过控制索引值来控制图片的自动滚动
        function autoMove(){
            imgNum++;
            if(imgNum == len) {
                imgNum = 0;
            };
            timer = setInterval(move, 20);
        }timer2 = setInterval(autoMove, 2000);
    </script>
</body>

主界面有一个滑动感觉比以前酷炫多了。如下图：

奋斗的金鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何制造滑动图片公告的效果

在网上找了个代码自己修改了一下，但是不知道为什么在修改的时候调用这个文件时总是显示中文乱码。这个下次再详细说，先来说说滑动图片效果是怎么实现的吧。先定义好style，使用.imgview块来定义好图片以及边框的样字。放在head里面。 .imgview { width: 640px; height: 47
复制链接

扫一扫