轮播图

最新推荐文章于 2022-05-12 09:56:57 发布
最新推荐文章于 2022-05-12 09:56:57 发布
阅读量178 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Timber_wood/article/details/106058794
版权 
<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
</head>
<body>
	<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript"></script>
	<script type="text/javascript" src="/static/jQuery/jquery-5.1.1.min.js"></script>
	<title>视频展示效果实例</title>
</head>
<body>
	<div class="v_show">
    <div class="v_caption">
        <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
        <div class="highlight_tip">
            <span class="current">1</span><span>2</span><span>3</span><span>4</span>
        </div>
        <div class="change_btn">
            <span class="prev" >上一页</span>
            <span class="next">下一页</span>
        </div>
        <em><a href="#">更多>></a></em>
    </div>
    <div class="v_content">
        <div  class="v_content_list">
            <ul>
                <li>
                	<a href="#">
                	<img src="/static/img/01.jpg" alt="海贼王" /></a><h4>
                	<a href="#">海贼王</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/01.jpg" alt="海贼王" /></a><h4>
                	<a href="#">海贼王</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/01.jpg" alt="海贼王" /></a><h4>
                	<a href="#">海贼王</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/01.jpg" alt="海贼王" /></a><h4>
                	<a href="#">海贼王</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/02.jpg" alt="哆啦A梦" /></a><h4>
                	<a href="#">哆啦A梦</a></h4>
                	<span>播放:<em>33,326</em></span>
                	</li>
                <li>
                	<a href="#">
                	<img src="/static/img/02.jpg" alt="哆啦A梦" /></a><h4>
                	<a href="#">哆啦A梦</a></h4>
                	<span>播放:<em>33,326</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/02.jpg" alt="哆啦A梦" /></a><h4>
                	<a href="#">哆啦A梦</a></h4>
                	<span>播放:<em>33,326</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/02.jpg" alt="哆啦A梦" /></a><h4>
                	<a href="#">哆啦A梦</a></h4>
                	<span>播放:<em>33,326</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/03.jpg" alt="火影忍者" /></a><h4>
                	<a href="#">火影忍者</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/03.jpg" alt="火影忍者" /></a><h4>
                	<a href="#">火影忍者</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/03.jpg" alt="火影忍者" /></a><h4>
                	<a href="#">火影忍者</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/03.jpg" alt="火影忍者" /></a><h4>
                	<a href="#">火影忍者</a></h4>
                	<span>播放:<em>28,276</em></span>
                </li>
                <li>
                	<a href="#">
                	<img src="/static/img/04.jpg" alt="龙珠" /></a><h4>
                	<a href="#">龙珠</a></h4>
                	<span>播放 <em>57,865</em></span></li>
                <li>
                	<a href="#">
                	<img src="/static/img/04.jpg" alt="龙珠" /></a><h4>
                	<a href="#">龙珠</a></h4>
                	<span>播放 <em>57,865</em></span></li>
                <li>
                	<a href="#">
                	<img src="/static/img/04.jpg" alt="龙珠" /></a><h4>
                	<a href="#">龙珠</a></h4>
                	<span>播放 <em>57,865</em></span></li>
                <li>
                	<a href="#">
                	<img src="/static/img/04.jpg" alt="龙珠" /></a><h4>
                	<a href="#">龙珠</a></h4>
                	<span>播放 <em>57,865</em></span></li>
             </ul>
        </div>
    </div>
</div>
</body>
</html>
<style type="text/css">
	* { 
		margin:0;
		padding:0;
		word-break:break-all;
	}
	body { 
		background:#FFF; 
		color:#333; 
		font:12px/1.5em Helvetica, Arial, sans-serif; 
	}
	h1, h2, h3, h4, h5, h6 { 
		font-size:1em; 
	}
	a { 
		color:#2B93D2; 
		text-decoration:none; 
	}
	a:hover { 
		color:#E31E1C; 
		text-decoration:underline; 
	}
	ul, li { 
		list-style:none; 
	}
	fieldset, img { 
		border:none; 
	}
	/* v_show style */
	.v_show { 
		width:595px; 
		margin:20px 0 1px 60px; 
	}
	.v_caption { 
		height:35px; 
		overflow:hidden; 
		background:url(/static/img/btn_cartoon.gif) no-repeat 0 0; 
	}
	.v_caption h2 { 
		float:left; 
		width:84px; height:35px; 
		overflow:hidden; 
		background:url(/static/img/btn_cartoon.gif) no-repeat;
		text-indent:-9999px; 
	}
	.v_caption .cartoon { 
		background-position: 0 -100px; 
	}
	.v_caption .variety {
	 	background-position:-100px -100px; 
	}
	.highlight_tip { 
		display:inline; float:left; 
		margin:14px 0 0 10px; 
	}
	.highlight_tip span { 
		display:inline; 
		float:left; width:7px; 
		height:7px; overflow:hidden; 
		margin:0 2px; 
		background:url(/static/img/btn_cartoon.gif) no-repeat 0 -320px; 
		text-indent:-9999px; 
	}
	.highlight_tip .current { 
		background-position:0 -220px; 
	}
	.change_btn { 
		float:left; 
		margin:7px 0 0 10px; 
	}
	.change_btn span { 
		display:block; float:left; 
		width:30px; height:23px; 
		overflow:hidden; 
		background:url(/static/img/btn_cartoon.gif) no-repeat; 
		text-indent:-9999px; 
		cursor:pointer; 
	}
	.change_btn .prev { 
		background-position:0 -400px;  
	}
	.change_btn .next { 
		width:31px; 
		background-position:-30px -400px; 
	}
	.v_caption em { 
		display:inline; 
		float:right; 
		margin:10px 12px 0 0; 
		font-family:simsun;
	}
	.v_content { 
		position:relative; 
		width:592px; height:160px; 
		overflow:hidden; 
		border-right:1px solid #E7E7E7; 
		border-bottom:1px solid #E7E7E7; 
		border-left:1px solid #E7E7E7;
	}
	.v_content_list { 
		position:absolute; 
		width:2500px;
		top:0px; 
		left:0px;
	}
	.v_content ul {
		float:left;
	}
	.v_content ul li { 
		display:inline; 
		float:left; 
		margin:10px 2px 0; 
		padding:8px; 
		background:url(/static/img/v_bg.gif) no-repeat; 
	}
	.v_content ul li a { 
		display:block; 
		width:128px; 
		height:80px; 
		overflow:hidden; 
	}
	.v_content ul li img {  
		width:128px; 
		height:96px; 
	}
	.v_content ul li h4 { 
		width:128px; 
		height:18px; 
		overflow:hidden; 
		margin-top:12px; 
		font-weight:normal; 
	}
	.v_content ul li h4 a { 
		display:inline !important; 
		height:auto !important; 
	}
	.v_content ul li span { 
		color:#666; 
	}
	.v_content ul li em { 
		color:#888; 
		font-family:Verdana; 
		font-size:0.9em; 
	}
</style>
<script type="text/javascript">
	$(function(){
	    var page = 1;
	    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
        var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
        var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
        var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
        var v_width = $v_content.width() ;
        var len = $v_show.find("li").length;
        var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
         if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
            if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
               $v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
               page = 1;
            }else{
                $v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面   ‘-=’，或者'+=':表示当前位置累加或累减
                page++;
            }
        }
        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });
    //往前 按钮
    $("span.prev").click(function(){
        var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
        var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
        var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
        var v_width = $v_content.width();
        var len = $v_show.find("li").length;
        var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
        if( !$v_show.is(":animated")){    //判断“视频内容展示区域”是否正在处于动画
            if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
              $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
              page = page_count;
        	}else{
            	$v_show.animate({ left : '+='+v_width }, "slow");
           		page--;
       		}
        }
        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });
});
</script>
Timber_wood
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 轮播图实现（新手易懂）
weixin_44241851的博客
05-01 1万+
Android 轮播图效果展示设计思路与代码讲解注意事项 源码 效果展示 可以自动播放，也可以手动滑动 设计思路与代码讲解 首先使用ViewPager实现滑动的效果，然后在适配器里面设置图片，接着写下面的point，如过展示的时当前的图片，point变颜色表示被选中 写界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLa...
轮播图·实现
m0_70217633的博客
04-01 1005
https://pan.baidu.com/s/1d0_o5I81CrVJ12kfa52gjw
轮播图(slideshow)1.0.zip
08-28
简单的海贼王轮播图，附带向左向右的的按钮，没人点击的时候自己也会动，感兴趣的话可以下载一下看看源码，或者看看效果，后期会有更厉害的轮播图更新
web网页设计——海贼王
03-25
Dreamweaver编写的，有十个页面，
html5海贼王单页视差滚动特效.zip
07-04
html5海贼王单页视差滚动特效是一款流行滑落网页特效代码。
viewpager轮播图的实现（简洁易懂）
秦时明月
06-30 9936
在做这个效果的时候，我第一时间看了网上的轮播方式，发现问题很多，有的人在代码里大量的判断手动滑动和自动滑动的状态改变，有的人的轮播是定义了一个很大的Int值，通过顺序播放相同的图片来实现的伪轮播，看过这些代码感觉并不满意，所以尝试自己实现。在轮播更新UI的时候，我尝试了Thread+handler，handler.postdelay,和timer+timertask+handler的方式，前两种方式
轮播图实现
qq_43827441的博客
05-12 102
实习实现轮播图功能
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
纯div+css轮播图片切换图片
11-07
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
图片切换，轮播图
03-17
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
css轮播图片百叶窗切换
12-29
在网页设计中，动态效果的使用可以极大地提升用户体验，其中轮播图（Slider）是一种常见的展示方式，它能够以优雅的方式展示多张图片或内容。而“百叶窗”切换效果则是轮播图动画中的一种独特设计，它模拟了百叶窗...
IOS轮播图合集（视频+图片）
02-16
在iOS开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或视频，常用于广告、推荐内容或者展示多种产品。本资源“IOS轮播图合集（视频+图片）”显然是一个包含了实现这种功能代码示例的...
批量创建zabbix3.0聚合图形python3脚本
hobby云说
09-16 304
大致看了下目前网上的脚本以python2.7版本为主，博主目前未找到python3版本的脚本（大概是搜索方式不对吧），而python2.7即将退出历史的舞台，所以有了想重新写一个的想法，目前进度如下： 正在研究，即将上线。。。。。。 ...
3字符串求最长公共自序列
看了比懂王还懂
05-24 971
如果会LCS这才看这题。   画一个三维的立体图。 把x轴放s1 把y轴放s1 把z轴放s3   在o_x_y上匹配s1 s2 在o_x_z上匹配 s1 s3 在O_y_z上匹配s2 s3 对于一个点（x,y,z） (x,y,z）这个点相同的话 在（x-1,y-1,z-1）的基础上加1..等等的DP，具体转移方程 f[1][1] = same(1,1) f[i][j]
js实现轮播图_小型轮播图js
weixin_39552768的博客
12-01 66
hello，大家好，给大家带来一个小的轮播图；html代码：样式代码：* { padding: 0; margin: 0; }li { list-style: none; }img { border: none; }body { background: #ecfaff; }.play { width: 470px; height: 150px; overflow: hidden; position...
使用原生JS制作简单的轮播图特效
柯晓楠
05-11 875
使用原生JavaScript制作一个简答的图片轮播效果，没有实现动画。原理很简单，只需要使用DOM对象操作节点的添加和删除即可实现轮播功能，看一下效果图： 下面开始上代码： HTML代码 <!-- .swiper是轮播的外部容器 .swiper-item是轮播的每个元素，在该标签中放置图片 --> <div id="swiper"> <div class="swiper-item"> <img src="img/01.jpg"> </div&
POJ 3080 Blue Jeans （KMP+暴力枚举）【模板】
风的记忆
08-16 1205
The Genographic Project is a research partnership between IBM and The National Geographic Society that is analyzing DNA from hundreds of thousands of contributors to map how the Earth was populated. As an IBM researcher, you have been tasked with writing
2019.6.28 校内测试 T4 【音乐会】达拉崩吧·上
weixin_30813225的博客
07-01 93
考试的一道附加题~ 一看题目描述：把区间[l,r]里每个数异或上x，求区间[l,r]里所有数的异或和，这明显的要用数据结构或RMQ吧。 恩，所以正解就是线段树啦，至于树状数组行与否，不知道~ water_lift：这不是sb题嘛？线段树板子题都不会？把加法操作改成异或操作不就好啦？ 其实好像真的是这样的，将加法操作改成了乘法操作； 然后你会发现自己只得了20分的暴力分，没错！...
mpu6050陀螺仪使用方法开发教程文档.docx
最新发布
07-30
mpu6050陀螺仪使用方法
轮播图图片切换背景根据图片颜色渐变怎么弄
07-22
要实现轮播图图片切换背景根据图片颜色渐变的效果，可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码： HTML部分： ```html <div class="slideshow"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分： ```css .slideshow { position: relative; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slideshow img { width: 100%; height: auto; } .slideshow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: -1; } ``` JavaScript部分： ```javascript const slides = document.querySelectorAll('.slide'); let currentIndex = 0; function changeSlide() { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); } setInterval(changeSlide, 3000); ``` 上述代码中，通过CSS设置了轮播图容器的样式以及背景渐变效果。JavaScript部分实现了切换轮播图的逻辑，并使用setInterval函数定时调用changeSlide函数来切换图片。每次切换图片时，会为当前显示的图片添加active类，从而使其显示出来。 你可以根据实际需要修改CSS样式和JavaScript代码，来适应你的项目需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值