html中利用js实现简单图片轮换效果

最新推荐文章于 2024-05-28 19:26:08 发布

「已注销」

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量1.1w

点赞数 6

分类专栏： html 文章标签： html js 图片轮播

本文链接：https://blog.csdn.net/fang0609/article/details/47319705

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<script type="text/javascript">
     window.onload = function() {
         flag = 0;
         obj1 = document.getElementById("slider");
         obj2 = document.getElementsByTagName("li");
         obj2[0].style.backgroundColor = "#666666";
            
            //设置图片自动转换的时间间隔
	 time = setInterval("turn();", 1000);
            //当鼠标移到目标上
         obj1.onmouseover = function () {
                //清除时间间隔 
                clearInterval(time);
            }
            //当鼠标滑出，鼠标从图片上经过之后，图片的转换时间
         obj1.onmouseout = function () {
                time = setInterval("turn();", 2000);
            }

          for (var num = 0; num < obj2.length; num++) {
                obj2[num].onmouseover = function () {
                    turn(this.innerHTML);
                    clearInterval(time);
                }
				//当鼠标仅在数字上停留，然后拿开后的图片轮换时间
                obj2[num].onmouseout = function () {
                    time = setInterval("turn();", 8000);
                }
            }
     
            document.getElementById("second").src = "image/1.jpg";
            document.getElementById("third").src = "image/4.jpg";

     }

        function turn(value) {
            if (value != null) {
                flag = value - 2;
            }
            if (flag < obj2.length - 1)
                flag++;
            else
                flag = 0;
            obj1.style.top = flag * (-768) + "px";/*768为图片的高度*/
            for (var j = 0; j < obj2.length; j++) {
                obj2[j].style.backgroundColor = "#0000ff";
            }
            obj2[flag].style.backgroundColor = "#666666";
        }
	
</script>

<style>
	body{
		font-family:"楷体"; 
		font-size:18px;
		text-align:center;
	}
	.right {
	    height:500px;
	    width:700px;
	    overflow:hidden;
	    position:relative;   
	}
	.right ul {
	    list-style:none;
	    position: absolute;
	    align:center;
	    top:90%;
	    left:30%;
	}
	.right li {
	    opacity: .3;
	    /*设置透明度*/
            filter: alpha(opacity=30); 
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            height: 30px;
            width: 30px;
            background-color: #ffffff;
            float: left;
	}
	#slider {
	    position:absolute;
	    top: 0px;
            left: 0px;
	}
	#slider img{
	    float: left;
            border: none;
       }	
</style>
</head>

<body>
<header>
  <h1> 图片轮播</h1>
</header>
   <div class = right > 
      <div id="slider">
            <a target="_blank" href="#"><img src="image/6.jpg" /></a>
            <a target="_blank" href="#"><img id="second" /></a>
            <a target="_blank" href="#"><img id="third" /></a>
        </div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
  </div>
</body>
</html>

「已注销」

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
html中利用js实现简单图片轮换效果

图片轮播 window.onload = function() { flag = 0; obj1 = document.getElementById("slider"); obj2 = document.getElementsByTagName("li"); obj2[0].style.backgroundColo
复制链接

扫一扫