精美html+css上下滚动,轮播(兼容ie8)

最新推荐文章于 2024-07-13 16:54:13 发布
最新推荐文章于 2024-07-13 16:54:13 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： html+css+js 文章标签： html轮播 js轮播 css轮播 htm上下滚动 js上下滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlxls/article/details/103852505
版权

以下为图片轮播代码，可移步下载文件资源：

jquery实现图图片或者文本轮播，上下或者左右可配置，文件中为图片上传循环轮播，拿来即可使用，主要可以兼容ie7及以上版本，可以使用，亲测

<!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>
<link href="css1/cpy_common.css" rel="stylesheet" type="text/css" />
<link href="css1/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
        
        <h2 class="why">展商风采</h2>
        
<!-- --><script type="text/javascript">
var $1 = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};


var Scroller = Class.create();
Scroller.prototype = {
  initialize: function(idScroller, idScrollMid, options) {
    var oThis = this, oScroller = $1(idScroller), oScrollMid = $1(idScrollMid);
    
    this.SetOptions(options);
    this.Side = this.options.Side || ["up"];//方向
    this.scroller = oScroller;            //对象
    this.speed = this.options.Speed;    //速度
    this.timer = null;                    //时间
    this.pauseHeight = 0;                //定高
    this.pauseWidth = 0;                //定宽
    this.pause = 0;                        //定高(宽)
    this.side = 0;                        //参数
    
    //用于上下滚动
    this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight;
    this.heightList = oScrollMid.offsetHeight;
    
 
 
    //js取不到css设置的height和width
    
    oScroller.style.overflow = "hidden";
    oScrollMid.appendChild(oScrollMid.cloneNode(true));
    oScrollMid.appendChild(oScrollMid.cloneNode(true));
    
    addEventHandler(oScroller, "mouseover", function() { oThis.Stop(); });
    addEventHandler(oScroller, "mouseout", function() { oThis.Start(); });
    
    this.Start();
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
      Step:            1,//每次变化的px量
      Speed:        20,//速度(越大越慢)
      Side:            ["up"],//滚动方向:"up"是上，"down"是下，"left"是左，"right"是右
      PauseHeight:    0,//隔多高停一次
      PauseWidth:    0,//隔多宽停一次
      //当上下和左右一起使用时必须设置PauseHeight和PauseWidth来设置转向位置
      PauseStep:    0//停顿时间(PauseHeight或PauseWidth大于0该参数才有效)
    };
    Object.extend(this.options, options || {});
  }, 
  //转向
  Turn: function() {
    //通过设置方向数组的排列来转向
    this.Side.push(this.Side.shift().toLowerCase());
  },
  //上下滚动
  ScrollUpDown: function() {
    this.pause = this.pauseHeight;
    this.scroller.scrollTop = this.GetScroll(this.scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight);
    this.pauseHeight = this.pause;
    
    var oThis = this;
    this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);
  },

  
  //获取设置滚动数据
  GetScroll: function(iScroll, iScroller, iList, iPause) {
    var iStep = this.options.Step * this.side;
    
    if(this.side > 0){
        if(iScroll >= (iList * 2 - iScroller)){ iScroll -= iList; }
    } else {
        if(iScroll <= 0){ iScroll += iList; }
    }
    
    this.speed = this.options.Speed;
    if(iPause > 0){
        if(Math.abs(this.pause) >= iPause){
            this.speed = this.options.PauseStep; this.pause = iStep = 0; this.Turn();
        } else {
            this.pause += iStep;
        }
    }
    
    return (iScroll + iStep);
  },
  //开始
  Start: function() {    
    //方向设置
    switch (this.Side[0].toLowerCase()) {


        case "down" :
            if(this.heightList < this.heightScroller) return;
            this.side = -1;
            this.ScrollUpDown();
            break;
        case "up" :
        default :
            if(this.heightList < this.heightScroller) return;
            this.side = 1;
            this.ScrollUpDown();
    }
  },
  //停止
  Stop: function() {
    clearTimeout(this.timer);
  }
};

window.onload = function(){
    new Scroller("zsbox", "box1",{ Side:["up","left"], PauseHeight:50, PauseWidth:400 });
}
</script> 

<div id="zsbox"  style="width:700px; height:288px; overflow:hidden;">
     <div id="box1" >
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.sgsgroup.com.cn/zh-CN/Environment.aspx" title=SGS中国 target="_blank"><img src="picture/thumb_140_65_20130925105326654.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="www.wdwonder.com" title=万德 target="_blank"><img src="picture/20130925110941768.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.orientscape.com/" title=东方园林 target="_blank"><img src="picture/20130925110633991.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.jj-eco.cn/" title=上海嘉洁 target="_blank"><img src="picture/20130925113048289.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.c-mst.cn/" title=康莱德 target="_blank"><img src="picture/20130925111602561.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.tsingcheng.com/" title=清城 target="_blank"><img src="picture/20130925111741961.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.sepa.cn/" title=SEP target="_blank"><img src="picture/20130925112139447.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.igsnrr.ac.cn/" title=中科院地理科学与资源研究所 target="_blank"><img src="picture/20130927015909931.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.issas.ac.cn/" title=中科院南京土壤研究所 target="_blank"><img src="picture/20130925120222319.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.saes.sh.cn/cn/index.asp" title=上海环科院 target="_blank"><img src="picture/20130925013334633.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.cee.cn/" title=北京市环境保护科学研究院 target="_blank"><img src="picture/20130927015741840.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.er-china.com/index.php?m=content&c=index&a=show&catid=666&id=64481" title=上海傲江实业有限公司 target="_blank"><img src="picture/20130926022029699.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.alsglobal.com.cn/" title=澳实检测 target="_blank"><img src="picture/20130926023014453.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.biogp.com/cn/index.html" title=柏奥 target="_blank"><img src="picture/20130926023708230.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.decn.net.cn/" title=德申 target="_blank"><img src="picture/20130926024938802.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.ehscare.org/" title=康达检测 target="_blank"><img src="picture/20130926025348477.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.esdchina.com//" title=伊斯特 target="_blank"><img src="picture/20130926031243659.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.bbmghsl.com/" title=金隅 target="_blank"><img src="picture/20130926031613581.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.bbmgbest.com/" title=生态岛 target="_blank"><img src="picture/20130926032256913.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.taes.org/" title=天津环科院 target="_blank"><img src="picture/20130927020007741.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.er-china.com/index.php?m=content&c=index&a=show&catid=819&id=71084" title=京诚检测 target="_blank"><img src="picture/thumb_140_65_20130929015751657.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="www.aecom.com" title=AECOM target="_blank"><img src="picture/20131018014651574.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.bjdshj.net" title=鼎实环境 target="_blank"><img src="picture/20131018014940757.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="academic.hep.com.cn" title=高教 target="_blank"><img src="picture/20131018015233772.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.ordosgfs.ac.cn" title=鄂尔多斯固废所 target="_blank"><img src="picture/20131018032901574.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="www.sofine.com.cn" title=十方 target="_blank"><img src="picture/20131018033224783.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="www.greenment.cn" title=格林曼 target="_blank"><img src="picture/20131018033320770.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="www.greenment.cn" title=中环循 target="_blank"><img src="picture/20131018033606602.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
			</tr><tr>									<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="http://www.er-china.com/index.php?m=content&c=index&a=show&catid=819&id=71428" title=重庆固管 target="_blank"><img src="picture/20131018033703716.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="www.rcees.cas.cn" title=生态中心 target="_blank"><img src="picture/20131018033830833.png" style="width:140px;height:65px" /></a></dt>
					  </dl>
			</td>
												    
							<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="#" title="虚位以待" target="_blank"><img src="picture/20130730100812717.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
				</td>
				
							<td width="19%" align="center">
					   <dl class="qyzs">
							<dt style="border-bottom:#319482 1px solid; border-right:#319482 1px dashed; text-align:center;"><a href="#" title="虚位以待" target="_blank"><img src="picture/20130730100812717.jpg" style="width:140px;height:65px" /></a></dt>
					  </dl>
				</td>
				
						</tr>
			
			</table>    
      </div>
    </div>
</body>
</html>

 

 

下载地址：https://download.csdn.net/download/zlxls/12084027

生命无须向死而生
关注
专栏目录
html如何上下滚动字幕,css如何做滚动字幕效果？
weixin_31243809的博客
05-30 1463
css如何做滚动字幕效果？下面本篇文章给大家介绍一下使用CSS做滚动字幕效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在CSS中，可以利用animation属性和@keyframes规则，配合top属性来实现滚动字幕效果。话不多说，直接上实例代码moveUpul,li {margin: 0;padding: 0;}li {list-style: none;}.cont...
兼容IE8图片轮播
wanglufei_1992的博客
12-19 3893
最近在做一个活动，其中产品给的需求是：一共是8张图片，开始显示2张，点击第3张，这时候页面显示3张。中间为大图，两边是小图。好了，直接贴代码了;//轮播JS /*未元素的首尾添加补白*/ var $panels = $('#slider .scrollContainer > li'); var $parent=$panels.parent();//或许当前li的最近一级的父
【css】如何实现自下而上Swipe轮播图自动滚动闭环效果：
最新发布
Bole6666666的博客
07-13 204
效果实现思路：从首位元素滚动到末尾元素，为了让视觉效果看起来数据是闭环的，因此需要将列表数据的首位元素和末尾元素保持一致，保证展示的内容相同。以下以vue3代码写法给大家做举例，具体细节思路，可留意注释，这里不再重复解释。
html轮播文字上下轮播,js、jQuery实现文字上下无缝轮播、滚动效果
weixin_29326909的博客
07-01 1252
因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播* {margin: 0;padding: 0;}#container{width: 60%;margin: 100px auto;position: relative;height: 200px;overflow: hidden;}...
兼容IE8的环形轮播（基于Jquery）
Zyl_CN的博客
10-14 843
&lt;style&gt; *{ padding: 0; margin: 0; } .hxlbt { width: 1200px; height: 600px; border: 1px solid #000; ...
基于HTML+CSS+JavaScript制作响应式个人博客模板源码( JavaScript期末大作业 )
专注于dreamweaver网页设计制作
08-09 433
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构......
制作一个简单HTML静态网页（HTML+CSS）
qq_38515154的博客
03-20 1628
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
用HTML+CSS做一个漂亮简单的轻量级图片相册博客网站(web前端期末大作业)
html精品源码
08-12 2416
👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J.........
html轮播图兼容ie8,兼容IE8的响应式带标题带缩略图的图片轮播
weixin_35002851的博客
06-16 259
CSS语言：CSSSCSS确定* {margin: 0;padding: 0;}html {background: #222;}body {_width: 70%;color: #888;font: 14px/20px Helvetica, Arial, sans-serif;margin: 20px auto 0;max-width: 800px;text-align: center;text-...
html 上下无限轮播
qq_40446718的博客
02-05 1524
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> JavaScript 图片切换展示效果_收集自_ http://www.codefans.net .container, .container *{margin:0; padding:0;} .containe
图片自动轮播用li做上下控制柄div+css+jquery
09-17
图片自动轮播用li做上下控制柄div+css+jquery 代码十分简洁，喜欢的话请给五分，不要吝啬你们的评论，楼主一行行代码敲的实在不容易！
响应式布局 图片上下轮播
12-30
响应式布局 图片上下轮播响应式布局 图片上下轮播响应式布局 图片上下轮播响应式布局 图片上下轮播
swiper横向轮播（兼容IE8）
weixin_30520015的博客
12-20 544
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="idangerous.swiper.css"/> ...
HTML+CSS简单实现页面滚动
woloveself的博客
06-29 464
【代码】HTML+CSS简单实现页面滚动。
兼容ie8的轮播图
qq_41893686的博客
05-12 387
JS插件：http://www.superslide2.com/param.html 效果图： 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e.
html轮播图兼容ie8,多功能响应式兼容IE8图片轮播
weixin_39634898的博客
06-16 377
2016-09-27 10:02:56前段时间在写一个官网，官网中很多地方都用到了图片轮播，但是需求中要求网站适配到IE8同时具有自适应的特点，适配各种尺寸的浏览器和移动端浏览器。于是我尝试了在网上查找相关的代码，但遗憾的是很多插件要么兼容IE8，但是不支持响应式，要么支持响应式不支持IE8，万恶的IE8很是让人头疼。于是，自己就写了一个响应式的轮播插件，并兼容IE8浏览器。先来看一下程序的htm...
自制轮播图（兼容IE8）
weixin_41905935的博客
07-30 1427
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
兼容IE8轮播插件 jSlider
chengxiang92的专栏
08-21 287
兼容IE8轮播插件 jSlider使用参数下载 使用 页面引入jSlider.css和jQuery、jquery.jSlider.js文件。 HTMl代码 <div class="jSlider"> <div><img src="" alt="" /></div> <div><img src="" alt="" /></div> </div> 参数 jSlider的配置参数通过data-*属性来
使用JS+HTML+CSS创建动态轮播图教程
"使用JavaScript、HTML和CSS实现一个轮播图效果的教程，包括HTML结构、CSS样式和JavaScript功能代码的示例。" 在网页设计中，轮播效果是一种常见的元素，用于展示多张图片或内容并自动切换，给用户带来动态的视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生命无须向死而生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值