js轮播图

最新推荐文章于 2024-05-30 11:27:58 发布

黄大帅@lz

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量82

点赞数

分类专栏：前端（html+css+js）文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/gua_Piter/article/details/128708855

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、要求

1.鼠标不在图片上方时，进行自动轮播，并目左右箭头不会显示当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;
3点击左右箭头可以进行左右图片的切换
4.图片上需有介绍的文字，会随图片切换一起进行切换

二、实验原理

通过利用计时器，让图片一直向左边移动，到达临界点的时候，返回到第一张的位置即可完成
还利用鼠标事件，当鼠标移入的时候，显示左右左右跳转按键
再次利用for循环找到图片所在位置，从而进一步找到位置

三、效果图

轮播图

四、代码

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <style>
	        *{
	            padding: 0%;
	            margin: 0;
	            list-style: none;
	            text-decoration: none;
	        }
	        .box{
	            width: 1440px;
	            height: 1080px;
	            margin: 100px auto;
	            box-shadow: 0 2px 10px rgba(0,0,0,.15);
	            overflow: hidden;
	            position: relative;
	        }
	        #imglist{
	            width: 14400px;
	            height: 1080px;
	        }
	        #imglist li{
	            height: 1080px;
	            width: 1440px;
	            float: left;
	            
	        }
	        
	        #btnlist{
	            position: absolute;
	            left: 1000px;
	            top: 1030px;
	        }
	        #btnlist>li{
	            float: left;
	            width: 40px;
	            height: 40px;
	            border-radius: 50%;
	            color: aqua;
	            font-size: 15px;
	            text-align: center;
	            background-color: #fff;
	            line-height: 40px;
	            margin-left: 8px;
	            cursor: pointer;
	        }
	        #piner button{
	            width: 150px;
	            height: 150px;
	            background-color: #999;
	            color: black;
	            position: absolute;
	            top: 48%;
	            opacity: 50%;
	            font-size: 35px;
	            cursor: pointer;
	            display: none;
	        }
	        #piner button:hover{
	            background-color: rgba(4, 195, 248, 0.906);
	        }
	        button:first-child{
	            left: -10px;
	            border-radius: 0 50% 50% 0;
	        }
	        button:nth-child(2) {
	            left: 1300px;
	            border-radius: 50% 0 0 50%;
	        }
	        
	    </style>
	</head>
	<body>
	    <div class="box">
	        <ul id="imglist">
	            <li><img src="./微信图片.1.jpg" alt=""></li>
	            <li><img src="./微信图片.2.jpg" alt=""></li>
	            <li><img src="./微信图片.3.jpg" alt=""></li>
	            <li><img src="./微信图片.4.jpg" alt=""></li>
	            <li><img src="./微信图片.5.jpg" alt=""></li>
	            <li><img src="./微信图片.6.jpg" alt=""></li>
	            <li><img src="./微信图片.7.jpg" alt=""></li>
	            <li><img src="./微信图片.8.jpg" alt=""></li>
	            <li><img src="./微信图片.9.jpg" alt=""></li>
	            <li><img src="./微信图片.1.jpg" alt=""></li>
	        </ul>
	        <ul id="btnlist">
	            <li>1</li>
	            <li>2</li>
	            <li>3</li>
	            <li>4</li>
	            <li>5</li>
	            <li>6</li>
	            <li>7</li>
	            <li>8</li>
	            <li>9</li>
	        </ul>
	        <ul id="piner">
	            <button id="btnL"><</button>
	            <button id="btnR">></button>
	        </ul>
	    </div>
	    <script>
	        var opiner = document.querySelector("#piner")
	        var oimglist = document.getElementById('imglist').getElementsByTagName("li")
	        var obtnlist = document.getElementById('btnlist').getElementsByTagName("li")
	        //初始化图片的位置于左侧顶端
	        var left = 0;
	        var timer;
	        imglist.style.marginLeft = left+"px"
	        //定一个函数让图片动起来
	        run()
	        function run(){
	            //设这条件让图片滚动不停
	            if(left <= -12960){
	                left=0;
	                imglist.style.marginLeft = left+"px"
	            }
	            //调用函数让其图片位置发生改变交换图片
	            changeImg()
	            left -= 10;
	             //当交换一张图片的时候就停止一秒
	             var n = (left % 1440 ==0)? 1000 : 10
	            
	             var m=Math.floor(-left/1440);
	            changeicon(m)
	            
	            timer = setTimeout(run,n)
	        }
	        function changeImg(){
	            imglist.style.marginLeft = left+"px"
	        }
	        function changeicon(m){
	            for(var i = 0; i<obtnlist.length;i++){
	                obtnlist[i].style.backgroundColor = ""
	            }
	            obtnlist[m].style.backgroundColor = "red"
	        }
	        for(var i = 0 ; i<oimglist.length; i++){
	            (function(i){
	                oimglist[i].onmousemove = function(){
	                    clearTimeout(timer);
	                    left = i*-1440
	                    changeImg()
	                    changeicon(i)
	                    btnL.style.display = "block"
	                    btnR.style.display = "block"
	                }
	                oimglist[i].onmouseout = function(){
	                    run()
	                    btnL.style.display = "none"
	                    btnR.style.display = "none"
	                }
	                
	            })(i)
	        }
	        for(var i = 0 ; i<obtnlist.length; i++){
	            (function(i){
	                obtnlist[i].onmousemove = function(){
	                    clearTimeout(timer);
	                    left = i*-1440
	                    changeImg()
	                    changeicon(i)
	                }
	                obtnlist[i].onmouseout = function(){
	                    run()
	                }
	            })(i)
	        }    
	    </script>
	</body>
	</html>

黄大帅@lz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js轮播图

1.鼠标不在图片上方时，进行自动轮播，并目左右箭头不会显示当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;3点击左右箭头可以进行左右图片的切换4.图片上需有介绍的文字，会随图片切换一起进行切换。
复制链接

扫一扫