轮播图

最新推荐文章于 2024-05-17 14:37:34 发布
最新推荐文章于 2024-05-17 14:37:34 发布
阅读量169 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43776742/article/details/103528986
版权

轮播图1

轮播图2

轮播图3

轮播图4

轮播图


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片轮播的两种方式</title>
	<style>
		#controls {
			width:400px;
			margin: auto;
			text-align: center;
		}
		#container {
			width: 400px;
			height:400px;
			border: 10px solid #eee;
			position: relative;
			background: gray;
			margin: 10px auto 0;
		}
		#prev, #next {
			position: absolute;
			background: black;
			filter:alpha(opacity:40);
			opacity: 0.4;
			font-size: 20px;
			color: white;
			width: 40px;
			height: 40px;
			border: 2px solid white;
			line-height: 40px;
			text-align: center;
			top: 180px;
			pointer: cursor;
			text-decoration: none;
		}
		#prev:hover, #next:hover {
			filter:alpha(opacity:80);
			opacity: 0.8;
		}
		#order, #info {
			position: absolute;
			width:100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: black;
			filter:alpha(opacity:60);
			opacity: 0.6;
			font-size: 20px;
			color: white;
		}
		#prev {
			left: 0;
		}
		#next {
			right: 0;
		}
		#picture {
			height: 400px;
			width: 400px;
		}
		#order {
			top: 0;
		}
		#info {
			bottom: 0;
		}
	</style>
	
		
</head>
<body>
	<div id="controls">
		<input id="round" type="button" value = "循环播放">
		<input id="single" type="button" value = "顺序播放">
	</div>
	<div id="container">
        <a href='javascript:' id="prev">&lt;</a>
        <a href='javascript:' id="next">&gt;</a>
        <div id="order">图片加载中……</div>
        <div id="info">图片加载中……</div>
        <img id="picture">
	</div>
	<script type="text/javascript">
	    // 封装一个函数  根据id找元素
	    function $(id) {
	    	return document.getElementById(id);
	    }
	    // 定义一个数组 存放图片路径
	    var imgsArr = ["6.jpg","7.jpg","8.jpg","9.jpg"];
	    var imgsText = ["图片一","图片二","图片三","图片四"];
	    var index = 0;
        var flag = true;// 值为true 默认为顺序播放 
        // 定义显示信息
        function showInfo() {
        	$("picture").src = imgsArr[index];
        	$("order").innerHTML = (index+1)+"/4";
        	$("info").innerHTML = imgsText[index];
        }
        showInfo();

	    // 给左箭头绑定事件
        $("prev").onclick = function() {
              index--;
              // 是顺序播放 并且index为-1
              if (flag && index === -1) {
              	   alert("已经是第一张了");
              	   index = 0;
              } else if( !flag && index === -1) {
                   index = imgsArr.length - 1;
              }
              showInfo();
        } 

        // 给右箭头绑定事件
        $("next").onclick = function() {
        	index++;
        	// 顺序播放
        	if (flag && index === imgsArr.length) {
        		alert("已经是最后一张了");
        		index = imgsArr.length - 1;
        	} else if (!flag && index === imgsArr.length) {// 循环播放
                index = 0;
        	}
        	showInfo();
        }

        $("round").onclick = function() {
        	alert("开始循环播放了");
        	flag = false;
        }

        $("single").onclick = function() {
        	alert("开始顺序播放了");
        	flag = true;
        }
	</script>
</body>
</html>
返回顶层目录

轮播图二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <img src="img/6.jpg" alt="">
	 <script type="text/javascript">
	    var oImg = document.getElementsByTagName("img")[0];
	    var imgArr = ["6.jpg","7.jpg","8.jpg","9.jpg"];
	    var index = 0;
	    setInterval(function() {
    		index++;
    		if (index == imgArr.length) {
    			index = 0;
    		}
    		oImg.src = "img/"+imgArr[index];
	    }, 1000);
	 </script>
</body>
</html>
返回顶层目录

轮播图3 —— 淡入与淡出

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .wrapper {
            width: 670px;
            height: 240px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        
        ul {
            position: relative;
        }
        
        ul li {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        ol {
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        
        ol li {
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: default;
            background-color: #abc;
        }
        
        ol li.current {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul id="box">
            <li style="z-index: 6;"><img src="images/1.jpg" alt="" /></li>
            <li style="z-index: 5;"><img src="images/2.jpg" alt="" /></li>
            <li style="z-index: 4;"><img src="images/3.jpg" alt="" /></li>
            <li style="z-index: 3;"><img src="images/4.jpg" alt="" /></li>
            <li style="z-index: 2;"><img src="images/5.jpg" alt="" /></li>
            <li style="z-index: 1;"><img src="images/6.jpg" alt="" /></li>
        </ul>
        <ol style="z-index: 10;" id="uu">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
</body>

</html>
<script src="sport.js"></script>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    var index = 0;
    var olist = $("box").children;
    var ulist = $("uu").children;
    var timer = setInterval(autoPlay, 1500);

    function autoPlay() {
        index++;
        if (index === olist.length) {
            index = 0;
        }
        for (var i = 0; i < ulist.length; i++) {
            ulist[i].className = "";
            startMove(olist[i], 0, "opacity");
        }
        startMove(olist[index], 1, "opacity");
        ulist[index].className = "current";
    }
</script>
返回顶层目录

sport.js

function startMove(obj,target,attr) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var current = parseFloat(getStyle(obj,attr));
        var speed = 0;
        if (attr === "opacity") {
            speed = target - current > 0 ? 0.1: -0.1;
        } else {
            speed = (target - current)/10; //    
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        }
            //  
        if (current === target) {
            clearInterval(obj.timer);
        } else {
            if (attr === "opacity") {
                obj.style[attr] = current + speed
            } else {
               obj.style[attr] = current + speed + "px";
            }   
        }
    },20);
}


function getStyle(obj,attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj,false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}
返回顶层目录

轮播图4 —— 左右焦点图

<!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" />
    <title>无标题文档</title>
    <style type="text/css">
        body,
        ul,
        ol,
        li,
        img {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #box {
            width: 490px;
            height: 170px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
            overflow: hidden;
        }
        
        .ad {
            width: 490px;
            height: 170px;
            overflow: hidden;
            position: relative;
        }
        
        #box img {
            width: 490px;
        }
        
        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        
        .ad ol li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            background: #fff;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            _display: inline;
        }
        
        .ad ol li.current {
            background: yellow;
        }
        
        .ad ul li {
            float: left;
        }
        
        .ad ul {
            position: absolute;
            top: 0;
            width: 2940px;
        }
        
        .ad ul li.current {
            display: block;
        }
        
        #arr {
            display: block;
        }
        
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div id="box" class="all">
        <div class="ad">
            <ul id="imgs">
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/3.jpg" /></li>
                <li><img src="images/4.jpg" /></li>
                <li><img src="images/5.jpg" /></li>
            </ul>
        </div>
        <div id="arr"><span id="left"></span><span id="right">></span></div>
    </div>
</body>

</html>
<script src="sport.js"></script>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    var oLeft = $("left");
    var oRight = $("right");
    var oUl = $("imgs");
    var target = 0;
    oRight.onclick = function() {
        if (target === -490 * 4) {
            target === -490 * 4;
        } else {
            target -= 490;
        }
        // 执行运动函数
        startMove(oUl, target, "left");
    }

    oLeft.onclick = function() {
        if (target === 0) {
            target === 0;
        } else {
            target += 490;
        }
        // 执行运动函数
        startMove(oUl, target, "left");
    }
</script>
返回顶层目录

sport.js

function startMove(obj,target,attr) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var current = parseFloat(getStyle(obj,attr));
        var speed = 0;
        if (attr === "opacity") {
            speed = target - current > 0 ? 0.1: -0.1;
        } else {
            speed = (target - current)/10; //    
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        }
            //  
        if (current === target) {
            clearInterval(obj.timer);
        } else {
            if (attr === "opacity") {
                obj.style[attr] = current + speed
            } else {
               obj.style[attr] = current + speed + "px";
            }   
        }
    },20);
}


function getStyle(obj,attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj,false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}
返回顶层目录

返回目录

端脑
关注
专栏目录
js点击切换的轮播图
猿码互联
06-12 728
通过上述代码，我们实现了一个简单的点击切换的轮播图。其中，点击上一张按钮会切换到前一张图片，点击下一张按钮会切换到下一张图片。当切换到第一张图片时，再点击上一张按钮会切换到最后一张图片；当切换到最后一张图片时，再点击下一张按钮会切换到第一张图片。
Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置
♡ 脚下的每一步都叫远方 ♡
07-14 1545
vuetify carouse轮播图 的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个问题, 当屏幕同时显示着轮播图和其他内容时, 轮播图一自动切换, 页面就会自动跳转到轮播图的位置… Solution1 Solution2 我在找问题的时候, 也发现了一个有趣的问题 如果有 v-container 标签包裹的 带淡入特效的轮播图, 那么他会自动跳转 如下问题重现: https://codepen.io/syousui/pen/pogZKPV?editors=1010 那么这样解
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
用JS实现图片切换、定时器、轮播图
DDL_lalala的博客
09-09 8922
一. 图片切换 实现功能： 当点击“下一页”时，跳转到下一张图片； 当点击“上一页”时，跳转到上一张照片； 显示当前页/总页数，如：2/6。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换</title> <style t...
轮播图切换圆点html,图片轮播器，点击小圆点按钮实现图片切换。别的都对。哪里错了呀！...
weixin_39969143的博客
05-31 1387
按照阿安老师的《焦点图轮播特效》这部教程，5-1课。一步一步做的。检查了好几遍都没有错呀？为什么就是不执行呢？别的都好了，就是点击小圆点切换到相应的图片不行，代码见69-76行，哪里错了呢？74行中的animate(offset);是起到什么作用的？html>焦点轮播图*{margin:0;padding:0;text-decoration:none;}body{paddin...
JavaScript 实战（图片切换）【轮播图】
HuoZhiyan 的博客
04-10 3554
JavaScript 实现简单的轮播图效果。
微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换
最新发布
2401_83100107的博客
05-17 1668
微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换，按钮切换下一张图片，按钮切图，实现在小程序分页中展示多张图片，并利用索引触发来实现切换到上一张和下一张图片的功能。通过维护一个变量来记录当前显示的图片索引，并通过点击事件触发不同的处理函数来实现对应功能，横屏显示
使用CSS实现简单的图片切换（轮播图）
qq_43452286的博客
03-29 3万+
使用CSS实现简单的图片切换（轮播图） 预览图如下： 一:首先创建基本布局 创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
html实现网页图片切换,前端开发 纯CSS实现网页轮播图切换！
weixin_39611049的博客
06-09 749
/p><body {margin: 0px;padding: 0px;}.carousel {position: relative;box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);margin-top: 26px;}.carousel-inner {position: relative;overflow: hidden;width: 100%;}...
b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）
weixin_72322475的博客
12-13 5304
b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
纯div+css轮播图片切换图片
11-07
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
axure轮播图（含底部小圆点，自动轮播与左右切换）
04-11
绘制的axure轮播图，使用动态面板进行绘制，所用到的都是使用最简单的方式进行的实现，优化了好几次，功能包含底部小圆点，支持点击切换至对应的页面，自动轮播与左右切换，帮助你快速实现轮播功能
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
06-13
总之，这个项目提供了一个基本的jQuery图片轮播解决方案，结合HTML和CSS，能够实现带按钮的图片切换效果。对于初学者来说，这是一个很好的实践项目，可以学习到如何使用jQuery操作DOM，处理事件，以及实现动态效果。...
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
02-27
jQuery轮播图、图片切换、图片轮播 代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行...
overflow属性的使用
qq_43776742的博客
08-01 1029
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 120px; height...
小球圆周运动
qq_43776742的博客
12-15 1010
小球圆周运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
CSS浮动目录
qq_43776742的博客
07-31 701
浮动介绍
html基础知识
qq_43776742的博客
07-09 633
基本骨架： html基本骨架： <html> <head> <title></title> </head> <body> 网页要显示的内容 </body> </html> html：5骨架 <!DOCTYPE html> //DTD 文档类...
Js实现图片点击切换轮播图详解
"本文将详细介绍如何使用JavaScript实现一个图片点击切换的轮播效果，通过具体的代码示例，帮助读者理解并掌握相关技能。" 在网页设计中，图片轮播是一种常见的展示多张图片的方式，它能有效利用有限的空间，使用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值