图片文字轮播代码

最新推荐文章于 2024-05-13 01:06:39 发布
最新推荐文章于 2024-05-13 01:06:39 发布
阅读量312 收藏 1
点赞数
文章标签： java xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/hsp09/p/3612092.html
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <title></title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   
  7. <style type="text/css">  
  8. /*文字循环轮播测css*/  
  9. .ulList{  
  10.     position:relative;  
  11.     height:145px;  
  12.     width:200px;  
  13.     overflow:hidden;  
  14.     margin:10px auto;  
  15.     border:1px #ccc solid;  
  16. }  
  17. .ulList ul{  
  18.     position:absolute;  
  19.     top:0;  
  20.     left:0;  
  21.     height:auto;  
  22.     margin:0;  
  23.     padding:0;  
  24.     list-style:none;  
  25.     width:200px;  
  26. }  
  27. .ulList ul li{text-align:center;}  
  28. .ulList ul li a{text-decoration:none;}  
  29.   
  30. /*图片循环轮播css*/  
  31. .switch{  
  32.     width:538px;  
  33.     height:198px;  
  34.     overflow:hidden;  
  35.     position:relative;  
  36.     margin:50px auto;  
  37. }  
  38. .switch ul{  
  39.     width:2152px;  
  40.     height:198px;  
  41.     position:absolute;  
  42.     top:0;  
  43.     left:0;  
  44.     margin:0;  
  45.     padding:0;  
  46. }  
  47. .switch ul li{  
  48.     float:left;  
  49.     width:538px;  
  50. }  
  51. #focusNum{  
  52.     width:160px;  
  53.     height:30px;  
  54.     overflow:hidden;  
  55.     position:absolute;  
  56.     bottom:0;  
  57.     right:0;  
  58. }  
  59. #focusNum a{  
  60.     display:inline-block;  
  61.     padding:5px 10px;  
  62.     float:left;  
  63.     border:1px solid #ccc;  
  64.     background-color:#fff;  
  65.     color:#000;  
  66.     text-align:center;  
  67.     font-size:12px;  
  68.     line-height:16px;  
  69.     margin-right:5px;  
  70. }  
  71. #focusNum a:hover{  
  72.     text-decoration:none;  
  73.     background-color:red;  
  74.     border:1px solid #000;  
  75. }  
  76. #focusNum a.hoverCl{  
  77.     text-decoration:none;  
  78.     background-color:red;  
  79.     border:1px solid #000;  
  80. }  
  81. </style>  
  82. </head>  
  83. <body>  
  84.     <div class="ulList">  
  85.         <ul>  
  86.             <li><a href="#">11111111111</a></li>  
  87.             <li><a href="#">22222222222</a></li>  
  88.             <li><a href="#">33333333333</a></li>  
  89.             <li><a href="#">44444444444</a></li>  
  90.             <li><a href="#">55555555555</a></li>  
  91.             <li><a href="#">66666666666</a></li>  
  92.             <li><a href="#">77777777777</a></li>  
  93.             <li><a href="#">88888888888</a></li>  
  94.             <li><a href="#">99999999999</a></li>  
  95.         </ul>  
  96.     </div>  
  97.   
  98.     <div class="switch">  
  99.         <ul class="clearfix">  
  100.             <li><img src="banner1.jpg" width="538" height="198" /></li>  
  101.             <li><img src="banner2.jpg" width="538" height="198" /></li>  
  102.             <li><img src="banner1.jpg" width="538" height="198" /></li>  
  103.             <li><img src="banner2.jpg" width="538" height="198" /></li>     
  104.         </ul>  
  105.         <div id="focusNum">  
  106.             <a href="javascript:;" class="hoverCl">1</a>  
  107.             <a href="javascript:;">2</a>  
  108.             <a href="javascript:;">3</a>  
  109.             <a href="javascript:;">4</a>  
  110.         </div>  
  111.     </div>  
  112.   
  113. <script src="jquery.js" type="text/javascript"></script>  
  114. <script type="text/javascript">  
  115.   
  116. //文字循环轮播js  
  117. var divObj = $('.ulList');  
  118. var ulObj = $('.ulList').children('ul');  
  119. var ulObjH = ulObj.outerHeight(true);  
  120. var liObjH = ulObj.children('li').outerHeight(true);  
  121.   
  122. setInterval(function(){  
  123.     ulObj.animate({top:'-'+liObjH+'px'},1000,function(){  
  124.         ulObj.css({top:0}).children('li').last().after(ulObj.children('li').first());  
  125.     });  
  126. },2000);  
  127.   
  128. //图片循环轮播js  
  129. var sUlObj = $('.switch').children('ul');  
  130. var sUlLiObj = sUlObj.children('li');  
  131. var imgObjW = sUlLiObj.children('img').width();  
  132. var index =1;  
  133.   
  134. setInterval(function(){  
  135.     sUlObj.animate({left:'-'+imgObjW+'px'},'slow',function(){  
  136.         sUlObj.css({left:0}).children('li').last().after(sUlObj.children('li').first());  
  137.         $('#focusNum a').eq(index).addClass('hoverCl').siblings().removeClass('hoverCl');  
  138.         index++;  
  139.         if(index === 4) index = 0;  
  140.     });  
  141. },2000);  
  142.   
  143. </script>  
  144. </body>  
  145. </html>  

转载于:https://www.cnblogs.com/hsp09/p/3612092.html

weixin_33980459
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
文字轮播的源代码
02-21
轮播的源码，需要引入的文件； function lunbo(id, height) { var ul = $(id); var liFirst = ul.find('.ll:first'); $(id).animate({ top: height }).animate({ "top": 0 }, 0, function() { var clone = liFirst.clone(); $(id).append(clone); liFirst.remove(); }) } setInterval("lunbo('#div1','-80px')", 3000)
图片文字轮播效果（图片和文字自动滚动）
10-04
轮播是类似知乎日报上的一个轮播效果，如下图。
html文字自动轮播代码怎么写,图片轮播效果代码（html）
weixin_36290287的博客
05-30 892
来源站点：w3cschool安装本地测试后的源码：/p>"http://www.w3.org/TR/html4/loose.dtd">*{margin: 0;padding: 0;}#test{position: relative;width: 300px;height: 200px;overflow: hidden;border: 1px solid #d4d4d4;}#test u...
HTML学习：前端实现文字滚动效果（附视频教程）_html文字轮播代码(1)
最新发布
2401_84519859的博客
05-13 729
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
JQuery文字轮播简单代码
DiDaShui2000
05-16 716
一个简单的文字滚动效果 .text{ width:200px; height:30px; overflow:hidden; cursor:pointer; margin:0 auto; } .text ul{
图片文字定时左右轮播
zuo_zuo_blog的博客
04-26 685
HTMl <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="CSS/teaminduce.css" rel='stylesheet' type='te...
基于swiper图片文字切换代码
06-24
基于Swiper图片文字切换代码是利用Swiper4版本来实现的一种功能，它能够帮助开发者轻松地创建图文并茂的列表轮播，通常用于团队成员展示或产品介绍等场景。 Swiper4是Swiper系列的一个重要版本，它提供了丰富的API...
Android实现图片文字轮播特效
09-02
在Android应用开发中，图片文字轮播特效是一种常见的功能，常用于展示新闻、广告或产品介绍等。本教程将详细介绍如何在Android平台上实现这一效果。首先，我们来看一下关键的组件和步骤。 1. **组件使用**： - `...
视频播放、文字滚动、图片轮播安卓demo源代码
04-30
最近项目有视频播放、文字滚动、图片轮播这三方面的需求。所以就做了这个demo。 视频播放有暂停播放、继续播放、降低音量、增加音量、快进、快退、循环播放的功能。 图片轮播既可以播放本地图片，也可以播放网络图片...
jQuery商品图片横向轮播代码
06-24
在网页设计中，商品展示部分通常需要一种动态且吸引人的方式来呈现，这就是商品图片横向轮播代码的作用。jQuery作为一款强大的JavaScript库，为开发者提供了丰富的功能和简单易用的API，使得创建这样的轮播效果变得...
图片文字滚动插件jQuery Scrollbox特效代码
03-20
图片文字滚动插件jQuery Scrollbox附件中提供了五种图片、文字滚动样式，只需调用jquery库和jQuery Scrollbox插件，然后再加一段简单的jquery代码即可使用，兼容性良好，冲突的概率比较低。
jQuery带文字动画图片轮播代码.zip
07-04
jQuery带文字动画图片轮播代码是一款带有方形索引按钮的jQuery焦点图特效。
图片轮播带文字说明,效果不错，带说明，带左右控制按钮
08-17
图片轮播带文字说明,效果不错，带说明，带左右控制按钮
JavaScript实现标题栏文字轮播效果代码
11-22
本文实例讲述了JavaScript实现标题栏文字轮播效果代码。分享给大家供大家参考，具体如下： 这里演示的JS文字轮播，显示在标题栏区域，以前个人主页时候经常见到的效果，不过现在都规范了，标题栏一般都不加入这种效果了。但是可以学习一下JS制作实现一些文字特效，运行效果后请查看标题栏。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-title-loop-show-style-demo/ 具体代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; c
多段文字轮播广告JS源代码
08-29
多段文字轮播广告Javascript源代码
js实现文字向上轮播功能
10-20
本文主要分享了javascript实现向上文字轮播功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
图片轮播 文字轮播 ImageSwitcher TextSwitcher
HandsomeFuHS的博客
03-29 784
源代码 平常开发中经常会遇到图片轮播（淘宝首页推荐）和文字轮播（淘宝头条）的需求，今天我就为大家带来一种简单的实现方式。图片轮播：ImageSwitcher1.在xml中定义ImageSwitcher<ImageSwitcher android:id="@+id/is_switcher" android:layout_width="match_parent"
轮播图（带文字）
mu_Tchun的博客
01-04 9106
带文字的轮播图效果 CSS样式： * {padding: 0;margin: 0;font-family: "微软雅黑";font-size: 14px;} ul,li {list-style: none;} a {text-decoration: none;color: black;} .box{width: 800px;height: 400px;margin: 20px auto;over...
HTML 实现文字滚动效果(跑马灯)
grootbaby
12-17 5438
语法： &lt;marquee&gt;...&lt;/marquee&gt; 说明： 在 marquee 标记之间添加要进行滚动的内容 重要属性： 1.滚动方向direction（包括4个值：up、 down、 left和 right） &lt;marquee direction="滚动方向"&gt;...&lt;/marquee&gt; 2.滚动方式behavior（scr...
轮播图文字加图片代码
05-29
以下是一个简单的轮播图文字加图片的HTML代码示例，您可以根据自己的需求进行修改和调整。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图文字加图片</title> <style> /* 轮播图容器样式 */ .slideshow-container { position: relative; margin: auto; height: 400px; width: 600px; } /* 图片样式 */ .mySlides { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* 文字样式 */ .text { color: #f2f2f2; font-size: 30px; font-weight: bold; position: absolute; bottom: 8px; left: 16px; z-index: 999; } /* 图片控制按钮样式 */ .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); padding: 16px; color: #fff; font-size: 30px; font-weight: bold; cursor: pointer; z-index: 999; } .next { right: 0; } /* 图片控制按钮悬停样式 */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } </style> </head> <body> <div class="slideshow-container"> <!-- 轮播图图片和文字 --> <div class="mySlides fade"> <img src="image1.jpg" alt="image1"> <div class="text">第一张图片</div> </div> <div class="mySlides fade"> <img src="image2.jpg" alt="image2"> <div class="text">第二张图片</div> </div> <div class="mySlides fade"> <img src="image3.jpg" alt="image3"> <div class="text">第三张图片</div> </div> <!-- 图片控制按钮 --> <a class="prev">❮</a> <a class="next">❯</a> </div> <!-- 脚本 --> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 3000); // 切换时间间隔 } </script> </body> </html> ``` 在上面的示例中，我们使用了一个`slideshow-container`容器来包含轮播图所需的所有元素，包括图片和文字。每张图片和文字都被包裹在一个`mySlides`类的容器中，并使用CSS样式来控制它们的位置和大小。我们还使用`prev`和`next`类的容器来创建控制按钮，以便在用户单击时切换图片。 在脚本部分，我们使用`showSlides()`函数来切换轮播图中的图片和文字。该函数使用了一个`slideIndex`变量来跟踪当前显示的图片和文字的索引。随着函数的每次调用，该变量将递增，并使用`setTimeout()`函数来控制图片和文字的切换时间间隔。 您可以根据自己的需求来修改和调整此示例，例如更改图片和文字的样式、添加更多的图片和文字等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值