h5代码:
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
css代码:
<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px}
100%{left:0}
}
#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px auto
overflow: hidden}
#list{position:absoluteleft:0top:0padding:0margin:0
-webkit-animation:5s move infinite linearwidth:200%}
#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pink
color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}
#wrap:hover #list{-webkit-animation-play-state:paused}
</style>
扩展资料:
轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片,在网页的某一部位进行轮流的呈现,从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。
轮播图的实现方式:例如:有5张轮播的图片,每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸,即为:1024×512。之后将这5张图片0px水平相接组成一张宽度为:5120px,高度依然为:512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和400px,如下图所示
02然后在HTML页面中布局轮播图的结构,如下图所示,主要包括图片区域,圆形按钮,左右箭头
03接下来需要给轮播图页面布局声明一些样式,请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能,如下图所示,主要包括前进,后退,自动播放的功能
05最后运行页面,你就会看到下图所示的轮播图效果,点击圆圈或者左右箭头可以切换轮播图
<!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/htmlcharset=utf-8" />
<meta name="keywords" content="焦点图" />
<meta name="description" content="焦点图代码" />
<title>焦点图</title>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<style>
.ck-slide ul { margin: 0padding: 0list-style-type: none}
.ck-slide { position: relativeoverflow: hidden}
.ck-slide ul.ck-slide-wrapper { position: absolutetop: 0left: 0z-index: 1margin: 0padding: 0}
.ck-slide ul.ck-slide-wrapper li { position: absolute}
.ck-slide .ck-prev, .ck-slide .ck-next { position: absolutetop: 50%z-index: 2width: 35pxheight: 70pxmargin-top: -35pxborder-radius: 3pxopacity: .15background: redtext-indent: -9999pxbackground-repeat: no-repeattransition: opacity .2s linear 0s}
.ck-slide .ck-prev { left: 5pxbackground: url(templets/default/images/arrow-left.png) #000 50% no-repeat}
.ck-slide .ck-next { right: 5pxbackground: url(templets/default/images/arrow-right.png) #000 50% no-repeat}
.ck-slidebox { position: absoluteleft: 50%bottom: 0pxz-index: 30hright:30pxwidth:100%}
.ck-slidebox ul { height: 30pxpadding: 0 4pxbackground: rgba(0,0,0,0.5)text-align:center}
.ck-slidebox ul li { float: leftheight: 30pxmargin: 0px 4pxline-height:30pxcolor:#fffdisplay:none}
.ck-slidebox ul li em { display: blockwidth: 100%height: 30px cursor: pointerfont-size:14px}
.ck-slidebox ul li.current em {color:#fff }
.ck-slidebox ul li em:hover { }
.ck-slide { width: 600pxheight: 400pxmargin: 0 auto}
.ck-slide ul.ck-slide-wrapper { height: 400px}
.ck-slide-wrapper li {display:none}
.ck-slidebox ul li{display:none}
.current{display:block!important}
</style>
<div class="ck-slide">
<ul class="ck-slide-wrapper">
<li>
<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="国考明起报名招2.7万人 首次仅面向体制外招录" style='width:600px'/></a>
</li>
<li>
<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中关村“变形记”:从电子卖场到7.2公里的创业大街" style='width:600px'/></a>
</li>
<li>
<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" class="slide" alt="金星大聊两性话题 辣评娱乐圈男星:没我想睡的" style='width:600px'/></a>
</li>
</ul>
<a href="javascript:" class="ctrl-slide ck-prev">上一张</a><a href="javascript:" class="ctrl-slide ck-next">下一张</a>
<div class="ck-slidebox">
<div class="slideWrap">
<ul class="dot-wrap">
<li><em>国考明起报名招2.7万人 首次仅面向体制外招录</em></li>
<li><em>中关村“变形记”:从电子卖场到7.2公里的创业大街</em></li>
<li><em>金星大聊两性话题 辣评娱乐圈男星:没我想睡的</em></li>
</ul>
</div>
</div>
</div>
<!--图片轮播结束-->
<!-- 代码 结束 -->
<script>
$('.ck-slide').ckSlide({
autoPlay: true
})
</script>
</body>
</html>