原生JavaScript Demo之图片滚动轮播

最新推荐文章于 2019-10-27 09:38:37 发布

小黄瓜要编程

最新推荐文章于 2019-10-27 09:38:37 发布

阅读量711

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/l1158513573/article/details/46992443

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原生JavaScript Demo之图片滚动轮播

（在Google下测试 ie可能不兼容其他未测试)

一次加载一张图片，通过路径的改变来改变图片（全部加载通过属性来显示在JavaScript jQuery之图片滚动轮中会实现）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #mainContent{
            margin: 0px auto;
            width:540px;
            height: 195px;
            background-color: yellowgreen;
        }
        #leftImg{
            height: 100%;
            width: 100%;
            background-color: red;
            z-index: 1;
        }
        #rightMenu{
            height: 22px;
            width: 100%;
            position: relative;
            bottom: 10px;
            z-index: 2;
            margin-left: 200px;
            margin-top: -28px;
        }
        .uimg{
            padding-left: 0px;
            margin-top: 0px;
            list-style: none;
            margin-bottom: 0px;
            width: 100%;
            height: 100%;
        }
        .uimg li{
            width: 100%;
            height: 100%;
        }
        .uimg li img{
            width: 100%;
            height: 100%;
        }
        #rightMenu ul{
            position: relative;
            list-style: none;
            height: 22px;
            width:538px;
            padding-left: 642px;
        }
        #rightMenu ul li{
            border-style: solid;
            border-color: #dbd9d9;
            border-width: 1px;
            border-radius: 3px;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            margin-left: 4px;
            float: left;
        }
    </style>
    <script type="text/javascript" language="JavaScript">       
        var jiansini=1;//用来监视是否有鼠标移入 监视变量
        var indexs=0;//显示的索引
        var sLi=document.getElementsByName("lname");//小列表的集合
		//自动切换方法
        function changeMenu(){
            if(jiansini==1){
                for(var i=0;i<sLi.length;i++){
                    sLi[i].style.backgroundColor="";//清空背景色
                }
                if(indexs>=sLi.length)//如果超出列表长度就归零
                {
                    indexs=0
                }
				//循环给显示的列表框添加背景色
                sLi[indexs].style.backgroundColor="#FF5D24";
				//设置显示的图片
                document.getElementById("showimg").src="img/"+indexs+".jpg";
                indexs++;
            }
        }
		//鼠标移入方法
        function shownow(obj){
            jiansini=0;
            var indexs2=obj.innerHTML-1;
            document.getElementById("showimg").src="img/"+indexs2+".jpg";
            sLi[indexs2].style.cursor="hand";
            var indexs1=indexs-1;
            sLi[indexs1].style.backgroundColor="";
            window.setTimeout(10);
            sLi[indexs2].style.backgroundColor="#FF5D24";
        }
		//鼠标移出方法
        function hidenow(obj){
            jiansini=1;
            var indexs3=obj.innerHTML-1;
            sLi[indexs3].style.backgroundColor="";
        }
		//定时器循环调用切换方法
        window.οnlοad=function(){
            window.setInterval(changeMenu,1000);
        }
    </script>
</head>
<body>
<div id="mainContent">
    <div id="leftImg">
        <ul class="uimg">
            <li>
                <img id="showimg" src="img/1.jpg">
            </li>
        </ul>
    </div>
</div>
<div id="rightMenu">
        <ul>
            <li name="lname" οnmοusemοve="shownow(this)" οnmοuseοut="hidenow(this)">1</li>
            <li name="lname" οnmοusemοve="shownow(this)" οnmοuseοut="hidenow(this)">2</li>
            <li name="lname" οnmοusemοve="shownow(this)" οnmοuseοut="hidenow(this)">3</li>
            <li name="lname" οnmοusemοve="shownow(this)" οnmοuseοut="hidenow(this)">4</li>
        </ul>
</div>

</body>
</html>

效果

小黄瓜要编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript Demo之图片滚动轮播

原生JavaScript Demo之图片滚动轮播一次加载一张图片，通过路径的改变来改变图片（全部加载通过属性来显示在JavaScript jQuery之图片滚动轮中会实现） #mainContent{ margin: 0px auto; width:540px; he
复制链接

扫一扫