Html网页显示js轮播图

合集下载

JS轮播图（无缝连接的轮播图实现，含代码供参考）

JS轮播图（⽆缝连接的轮播图实现，含代码供参考）需求：实现轮播图，图⽚⽆缝切换，⾃动播放。

实现效果：思考⼀下：在图⽚列表后⾯多加⼀张图⽚，这张图⽚是第⼀张图⽚（为了确保⽆缝衔接）。

图⽚就是平铺放在⼀个pic⾥⾯的，每次移动就是改变的pic的left值。

来撸代码~~。

所有的代码放在最后⾯，这⾥只讲⼀些重要的⽅法：为防⽌懵逼：先贴出封装函数move()的代码供参考function move(ele, attr, speed, target, callback){//获取当前的位置//从左往右进⾏移动 --- current<target speed//从右往左进⾏移动 --- current>target -speedvar current = parseInt(getStyle(ele, attr));// 810 > 800if(current>target){speed = -speed;}//定时器累加问题 --- 先清除再开启clearInterval(ele.timer);ele.timer = setInterval(function(){//获取元素的现在位置var begin = parseInt(getStyle(ele, attr));//步长var step = begin + speed;//判断当step>800, 让step = 800//从左往右进⾏移动 --- speed>0 正值//从右往左进⾏移动 --- speed<0 负值// -10 0 10 超过800直接变成 800if(speed<0 && step<target || speed>0 && step>target){step = target;}//赋值元素ele.style[attr] = step + "px";//让元素到达⽬标值时停⽌ 800pxif(step == target){clearInterval(ele.timer);//当move函数执⾏完毕后, 就执⾏它了//当条件都满⾜时才执⾏callback回调函数callback && callback();}},30)//步长是30}第⼀步：我们先来实现那个圆形按钮的点击事件。

HTML+CSS+JavaScript实现轮播图

HTML+CSS+JavaScript实现轮播图从mooc⽹站哔哩哔哩上学到的：视频BV号为BV16W41127aQ和BV1hW411y79J，up:红点⼯⼚HTML<div class="lunboContainer"><div class="lunboLeft"><img src="选择您的路径/icon-slides.png" id="leftImg"></div><div class="lunboRight"><img src="选择您的路径/icon-slides.png" id="rightImg"></div><ul id="imgList"><li class="item active"><img src="选择您的路径/1.jpg"></li><li class="item"><img src="选择您的路径/2.jpg"></li><li class="item"><img src="选择您的路径/3.jpg"></li><li class="item"><img src="选择您的路径/4.jpg"></li><li class="item"><img src="选择您的路径/5.jpg"></li></ul><ul id="pointList"><li class="point active" data-index='0'></li><li class="point" data-index='1'></li><li class="point" data-index='2'></li><li class="point" data-index='3'></li><li class="point" data-index='4'></li></ul></div>CSS.lunboContainer{width:100%;height:400px;margin:0 auto;position:relative;}.lunboLeft{position:absolute;z-index:10;margin-left:0px;margin-top:130px;width:60px;height:100px;overflow:hidden;}.lunboLeft img{height:100px;margin-left:-120px;}.lunboRight{position:absolute;z-index:10;right:0px;margin-top:130px;width:60px;height:100px;overflow:hidden;}.lunboRight img{height:100px;margin-left:-180px;}#imgList{width:100%;height:400px;padding:0; /* padding 设置0 */margin:0; /* margin 设置0 */position:relative;}.item{position:absolute;width:100%;list-style-type: none;height:100%;float: left;opacity:0;transition:opacity 1s;}.lunboContainer ul img{width:100%;height:100%;.item.active{opacity:1;z-index:5;}#pointList{padding:0;list-style-type: none;position:absolute;right:20px;bottom:20px;z-index:10;}.point{width:8px;height:8px;border-radius:100%;background-color:rgb(10,10,10);float:left;z-index:10;margin-right:18px;border-style:solid;border-width:2px;border-color:white;cursor:pointer;}.point.active{background-color:rgba(255,255,255,0.6);}//为正在显⽰的点点设置特殊样式Javascriptvar index=0;var imgs=document.getElementsByClassName("item");//图⽚var leftImg=document.getElementById("leftImg");//向左var rightImg=document.getElementById('rightImg');//向右var points=document.getElementsByClassName("point");//⼩点点var timeOut=0;function clearActive(){for(var i=0;i<imgs.length;i++){imgs[i].className='item';points[i].className='point';}}function goNext(){clearActive();index++;index=index%imgs.length;imgs[index].className='item active';points[index].className='point active';timeOut=0;}function goPre(){clearActive();index--;if(index<0){index=imgs.length-1;}imgs[index].className='item active';points[index].className='point active';}/*当⿏标悬停在向左向右的图⽚上⽅时需要改变图⽚样式使⽤户得到相应的反馈，这⾥学习了⼩⽶商城主页轮播图的做法，只⽤⼀张图⽚，通过改变这张图⽚到边界的距离实现样式改变*/ function preHover(){leftImg.style.marginLeft="0px";}function nextHover(){rightImg.style.marginLeft="-60px";}function preHout(){leftImg.style.marginLeft="-120px";}function nextHout(){rightImg.style.marginLeft="-180px";}/*************************************************/function jmpByPoint(pointIndex){clearActive();index=pointIndex;imgs[index].className="item active";points[index].className='point active';timeOut=0;}for(var i=0;i<points.length;i++){points[i].addEventListener('click',function(){var pointIndex=this.getAttribute("data-index");jmpByPoint(pointIndex);}leftImg.addEventListener('click',function(){goPre();})leftImg.addEventListener('mouseover',function(){preHover();})leftImg.addEventListener('mouseout',function(){preHout();})rightImg.addEventListener('click',function(){goNext();})rightImg.addEventListener('mouseover',function(){nextHover();})rightImg.addEventListener('mouseout',function(){nextHout();})setInterval(function(){timeOut++;if(timeOut==10){goNext();timeOut=0;}},500)/*此⽅法使得timeOut参数每隔0.5（500ms）秒加⼀，当timeOut加到10时（即5秒）显⽰下⼀张图⽚，同时timeOut清零，使⽤timeOut参数⽽不直接使⽤setInterval(fun(),5000)函数定时的⽬的在于：假设当⽤户点击点点跳到某张图⽚时，距离到达5000毫秒只剩⼀丝丝时间，那张图⽚就马上跳⾛了，⽽⽤户可能还没来得及看清除图⽚，使⽤timeOut定时后，当⽤户通过点跳转之后，将timeOut参数清零，可实现重新计时，就不会马上跳⾛，见function jmpByPoint(pointIndex)；*/。

Html、js图片轮播代码

Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。

下面是html、js 图片轮播代码详情。

代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分：<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分：<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分：<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。

前端开发技术之图片轮播效果实现

前端开发技术之图片轮播效果实现随着网页设计的重要性不断增加，用户对于页面的视觉体验要求也越来越高。

作为前端开发人员，我们常常需要通过各种方式来提升页面的吸引力。

其中，图片轮播效果是非常常见而且实用的一种手段。

本文将介绍几种常见的图片轮播效果实现方式。

一、基本的自动轮播效果自动轮播效果是最常见的一种图片轮播方式。

通过自动切换图片，可以展示多张图片内容，给用户提供更多的信息。

在实现自动轮播效果时，常常使用JavaScript和CSS来完成。

1. HTML结构首先，我们需要创建一个容器来显示图片内容。

在HTML代码中，可以使用`<div>`元素作为容器，并设置一个唯一的ID，如"slider"。

在容器内部，可以使用`<img>`元素来插入图片，并使用CSS来设置图片的样式。

```<div id="slider"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div>```2. CSS样式接下来，我们需要通过CSS来设置容器和图片的样式。

首先，我们可以设置容器的宽度和高度，并设置`overflow: hidden`来隐藏超出容器的部分。

然后，可以设置每个图片的宽度和高度，并使用`position: absolute`将它们叠加在一起。

最后，我们可以通过设置`left`和`top`属性，将图片按需求进行定位。

```#slider {width: 500px;height: 300px;overflow: hidden;position: relative;}#slider img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: opacity 1s;}```3. JavaScript代码最后，我们需要使用JavaScript来实现图片的切换效果。

js轮播图原理

js轮播图原理JavaScript轮播图是网页开发中常见的功能之一，它可以让页面上的图片或内容实现自动轮播或手动切换，为用户提供更好的浏览体验。

本文将介绍JavaScript轮播图的原理及实现方法。

首先，我们需要了解JavaScript轮播图的基本原理。

JavaScript轮播图通常由HTML、CSS和JavaScript三部分组成。

HTML负责构建轮播图的结构，包括图片、按钮等元素；CSS负责样式的设置，比如图片的大小、位置、过渡效果等；JavaScript则负责控制轮播图的行为，比如自动播放、手动切换、按钮点击事件等。

在实现JavaScript轮播图时，我们可以借助HTML的结构和CSS的样式，然后通过JavaScript来控制轮播图的行为。

首先，我们需要在HTML中创建轮播图的结构，通常是一个包裹图片的容器，以及用于切换的按钮或指示器。

然后，通过CSS来设置轮播图的样式，比如设置容器的宽度和高度、隐藏超出部分、设置过渡效果等。

接下来，我们需要使用JavaScript来实现轮播图的功能。

首先，我们可以定义一个变量来存储当前显示的图片索引，然后通过定时器来实现自动播放的功能。

当定时器触发时，我们可以通过改变图片容器的位置或透明度来实现图片的切换效果。

同时，我们还可以监听按钮或指示器的点击事件，通过改变当前显示的图片索引来实现手动切换的功能。

除了基本的轮播功能，我们还可以通过JavaScript来实现一些高级的特效，比如淡入淡出效果、滑动效果、缩放效果等，这些都可以通过改变图片容器的样式来实现。

总的来说，JavaScript轮播图的原理并不复杂，通过HTML、CSS和JavaScript的配合，我们可以实现各种各样的轮播效果。

希望本文能够帮助你更好地理解JavaScript轮播图的原理及实现方法。

两种方法实现显示多张图片的轮播

两种⽅法实现显⽰多张图⽚的轮播两种⽅法实现显⽰多张图⽚的轮播第⼀种：jQuery ⽅法.animate + 浮动排列布局1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-8" />5 <title>显⽰多张图⽚的轮播</title>6 <style type="text/css">7 html,body{8 padding:0;9 margin:10px auto;10 }11 #warpper{12 width:1120px;/*⼀列展⽰⼏个的宽度 ,4*280 动态算*/13 height:150px;14 margin:0 auto;15 position:relative;16 overflow:hidden;17 border:1px solid red;18 }19 #inner{20/*元素个数*280(div宽度) 动态算 1120px[4个元素] 1440px[5个元素] 1680px[6个元素] 2240px[8个元素]21⽤JS动态设置改值22*/23 width:2520px;24 position:absolute;25 }26 #inner div{27 width:270px;28 height:150px;29/*使⽤浮动元素排列*/30float:left;31 margin:0 5px;32 }33 #optrbtn{34 text-align:center;35 font-size:20px;36 }37 #optrbtn span {38 display:inline-table;39 border:1px solid red;40 width:50px;41 cursor:pointer;42 margin-right:5px;43 }44 #inner div img{45 width: 100%;46 height: 100%;47 }48 </style>4950 <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>51 <script type="text/javascript">5253 $(function(){5455var curNum=0;56var count=$("#inner").children('div').length;//85758//左滑动59 $(".btnleft").click(function(){60//如果到了最后⼀个元素，停⽌61if((count-curNum)<=4){62return false;63 }64 curNum+=1;65 $("#inner").animate({66// 每次点击都从左边裁剪280像素67 left:'-=280'68 },500);69 });7071//右滑动72 $(".btnright").click(function(){73//如果到了第⼀个元素，停⽌74if(curNum<=0){75return false;76 }77 curNum-=1;78 $("#inner").animate({79// 每次点击都从左边补充280像素80 left:'+=280'81 },500);82 });83 });8485 </script>86 </head>8788 <body>8990 <div id="main">91 <div id="warpper">92 <div id="inner">93 <div><img src="../img/sucai/full1.jpg"/></div>94 <div><img src="../img/sucai/full2.jpg"/></div>95 <div><img src="../img/sucai/full3.jpg"/></div>96 <div><img src="../img/sucai/full4.jpg"/></div>97 <div><img src="../img/sucai/full5.jpg"/></div>98 <div><img src="../img/sucai/full6.jpg"/></div>99 <div><img src="../img/sucai/full7.jpg"/></div>100 <div><img src="../img/sucai/full8.jpg"/></div>101 <div><img src="../img/sucai/full9.jpg"/></div>102 </div>103 </div>104 </div>105106 <br />107 <br />108109 <div id="optrbtn">110 <span class="btnleft">«</span>111 <span class="btnright">»</span>112 </div>113114 </body>115 </html>第⼆种：负边距 + flex排列布局1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>显⽰多张图⽚的轮播</title>6 <style type="text/css" rel="stylesheet">7 *{8 margin: 0;9 padding: 0;10 }11 #main{12 width: 100%;13 height: 125px;14 display: flex;15 margin-top: 120px;16 }17 #d1{18 width: 1162px;19 height: 125px;20 display: flex;21 overflow:hidden;22 }23 #d11{24 width: 64px;25 height: 125px;26 line-height: 125px;27 text-align: center;28 font-size: 28px;29 cursor: pointer;30 z-index: 2;31 background: #FFFFFF;32 }33 #d13{34 width: 64px;35 height: 125px;36 line-height: 125px;37 text-align: center;38 font-size: 28px;39 cursor: pointer;40 z-index: 2;41 background: #FFFFFF;42 }43 #d12{44/*元素个数*207(div宽度) 动态算 828px[4个元素] 1035px[5个元素] 1242px[6个元素] 2070px[10个元素] 45⽤JS动态设置改值46*/47/*先预设⾜够放10张图⽚的宽度*/48 width: 2070px;49 height: 125px;50/*使⽤弹性布局排列*/51 display: flex;52 transition:all 0.3s linear 0s;53/*再将多出来的5张图⽚的宽度⽤负边距隐藏起来*/54 margin-right: -1035px;55 }56 #d12 .d120{57 width: 207px;58 height: 125px;59 z-index: 1;60 }61 .ddd{62 width: 170px;63 height: 80px;64 margin-left: 18px;65 margin-top: 23px;66 }67 .ddd img{68 width: 100%;69 height: 100%;70 }71 </style>72 </head>73 <body>7475 <div id="main">76 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div>77 <div id="d1">78 <div id="d11">《</div>79 <div id="d12">80 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div>81 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full2.jpg"></div></div>82 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full3.jpg"></div></div>83 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full4.jpg"></div></div>84 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full5.jpg"></div></div>85 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full6.jpg"></div></div>86 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full7.jpg"></div></div>87 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full8.jpg"></div></div>88 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full9.jpg"></div></div>89 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div>90 </div>91 <div id="d13">》</div>92 </div>93 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div>94 </div>9596 </body>97 <script type="text/javascript">9899 let $ = function(id){100return document.getElementById(id);101 };102103//移动的宽度104var moveLength = 0;105106// 右移107 $("d13").addEventListener("click",function () {108 moveLength +=207;109// 判断移动的宽度有没有超出5张图⽚的宽度，如果超出，则减掉⼀张图⽚的宽度110if (moveLength<=1035){111 $("d12").style = "transform:translateX(-"+moveLength+"px);"112 }else if(moveLength>1035){113 moveLength -= 207;114 }115 });116117// 定时器，每个3秒移动⼀次118 setInterval(function () {119 moveLength +=207;120if (moveLength<=1035){//是否移动到尽头121 $("d12").style = "transform:translateX(-"+moveLength+"px);"122 }else if(moveLength>1035){//是否移动到尽头123 moveLength -= 1242;124 $("d12").style = "transform:translateX(-"+moveLength+"px);"125 }126 },3000);127128// 左移129 $("d11").addEventListener("click",function () {130// ⾸先判断图⽚是不是移动过了，是否移到尽头，然后再做调整移动的宽度131if (moveLength===1035){//是否移到了尽头132 $("d12").style = "transform:translateX(-"+moveLength+"px);";133 moveLength -=207;134 $("d12").style = "transform:translateX(-"+moveLength+"px);";135 }else if(moveLength>0&&moveLength<1035){//是否在原点与尽头之间136 moveLength -=207;137 $("d12").style = "transform:translateX(-"+moveLength+"px);";138 }else if(moveLength===0){//是否回到原点139 moveLength -= 207;140 moveLength += 207;141 }142 })143144 </script>145 </html>其实⽅法并不⽌两种，这⾥只⽤两种简单的案例来实现⽽已，你也可以举⼀反三⽤多种⽅法实现。

js实现网页图片轮换播放

1、实现效果如下：
2、实现功能：
（1）点击左右箭头之后，下面显示的图片会换成对应的上一张或下一张图片
（2）点击导航的某一张图片时，下面的就会显示对应的图片，而且再次点击上一张或者下一张时会显示对应的图片
（3）图片的地址可以来自网络上，也可以是自己的服务器发送过来的字符串数组。
（4）showPic.js的代码内容如下：
//showPic.js var href = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg") ; var index = 0 ;
function clickTurnLeft() { if (index == 0) { index = href.length - 1 ; } else { index = --index % href.length ; }
</li> <li> <a href="#" title="右箭头" οnclick="clickTurnRight();"> <img src="image/right_aim.jpg" id="rightAim"alt="向右轮换"> </a> </li>
</ul> </div> </body> </html>
#leftAim{ width:100px; height:100px; } #smallPic{ width:180px; height:120px; border:2px solid black; } #rightAim{ width:100px; height:100px; } #picture{ display:block; width:800px; height:600px; margin:0 auto; }

网页5张图片轮播代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>pic player</title><script type="text/javascript" src="/jslib/jquery/jquery-1.2.6.js"></script> <script type="text/javascript" src="/jslib/jquery/tween.js"></script></head><style type="text/css">img{border:0;}</style><body><div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">there is a pic-player</div><script>var p = $('#picplayer');var pics1 = [{url:'/online/picPlayer/1.jpg',link:'',time:5000},{url: '/online/picPlayer/2.jpg',link:'',time:4000},{url:'http :///online/picPlayer/3.jpg',link:'',time:6000},{url:'http://im/online/picPlayer/2.jpg',link:'',time:6000},{url:'http://img.jb/online/picPlayer/1.jpg',link:'',time:6000}];initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);////function initPicPlayer(pics,w,h){//选中的图片var selectedItem;//选中的按钮var selectedBtn;//自动播放的idvar playID;//选中图片的索引var selectedIndex;//容器var p = $('#picplayer');p.text('');p.append('<div id="piccontent"></div>');var c = $('#piccontent');for(var i=0;i<pics.length;i++){//添加图片到容器中c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');}//按钮容器，绝对定位在右下角p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div >');//var btnHolder = $('#picbtnHolder');btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>');var btns = $('#picbtns');//for(var i=0;i<pics.length;i++){//增加图片对应的按钮btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> ');$('#picbtn'+i).data('index',i);$('#picbtn'+i).click(function(event){if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')){return;}setSelectedItem($(this).data('index'));});}btns.append(' ');///setSelectedItem(0);//显示指定的图片indexfunction setSelectedItem(index){selectedIndex = index;clearInterval(playID);//alert(index);if(selectedItem)selectedItem.fadeOut('fast');selectedItem = $('#picitem'+index);selectedItem.fadeIn('slow');//if(selectedBtn){selectedBtn.css('backgroundColor','#eee'); selectedBtn.css('color','#000');}selectedBtn = $('#picbtn'+index); selectedBtn.css('backgroundColor','#000'); selectedBtn.css('color','#fff');//自动播放playID = setInterval(function(){var index = selectedIndex+1;if(index > pics.length-1)index=0; setSelectedItem(index);},pics[index].time);}}</script></body></html>黄色的地方修改显示大小和显示的图片如增加图片可以通过增加var pics1 后面的内容。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Html网页显示js轮播图
<div class="top-image">
<div class="loopImage">


<script src="js/jquery.luara.0.0.1.min.js"></script>
<script>
$(function(){
/*  */
$(".example").luara({width:"980",height:"291",interval:2500,selected:"selet ed",deriction:"left"});
});
</script>

<div class="example"style="position: absolute;top: 142px;"> <ul>
<li><img src="images/lbt01.jpg"width="980"height="291"
alt="1"/></li>
<li><img src="images/lbt02.jpg"width="980"height="291"
alt="2"/></li>
<li><img src="images/lbt03.jpg"width="980"height="291"
alt="3"/></li>
<li><img src="images/lbt04.jpg"width="980"height="291"
alt="4"/></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>

</div>
</div>
.top-menu {
height: 43px;
margin-bottom: 2px;
background-color: #11577d;
}
.top-menu-ct {
width: 980px;
height: 43px;
margin: auto;
color: white;
font: bold16px'微软雅黑';
line-height: 43px;
position:relative;
}
.top-image {
height: 291px;
/* background-color: #1e8dc9; */ }
.loopImage {
width: 980px;
margin: auto;
}
.top-menu-ct a {
margin-left:10px;
margin-right:10px;
}
.top-menu-ct a:hover {
background: #4c85a4;
}
.top-menu-ct a:active {
color: #074668;
}
/*-------首页轮播图样式--------*/
.example ol {
position: absolute;
width: 80px;
height: 20px;
bottom: 8px;
right: 101px;
}
.example ol li {
float: left;
width: 10px;
height: 10px;
margin: 5px;
background: #fff;
list-style: none;
}
.example ol li.seleted { background: #1AA4CA; }
.luara-left {
position: relative;
padding: 0;
overflow: hidden;
}
.luara-left ul {
position: relative;
padding: inherit;
margin: 0;
}
.luara-left ul li {
float: left;
padding: inherit;
margin: inherit;
list-style: none;
}
.luara-left ul li img { width: inherit;
height: inherit;
}
背景色什么的您再根据自己的需要定制吧，记得图片名不能存在中文哦。