整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
片轮播的实现：HTML+CSS+ JavaScript
用到的技术：HTML+CSS+ JavaScript；
操作步骤：
1. 首先制作一个html页面，代码如下
<body>
<div id="play">
<ul>
<li id="playBg"></li>
<li id="playText"></li>
<li id="playNum"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
<li id="playShow">
<a href="#" target="_blank"><img src="images/01.jpg" alt="澳大利亚：体验蓝山风光，感受澳洲风情"></a>
<a href="#" target="_blank"><img src="images/02.jpg" alt="九月抄底旅游，马上行动"></a>
<a href="#" target="_blank"><img src="images/03.jpg" alt="港澳旅游：超值特价，奢华享受"></a>
<a href="#" target="_blank"><img src="images/04.jpg" alt="炎炎夏日哪里去，途牛带你海滨游"></a>
<a href="#" target="_blank"><img src="images/05.jpg" alt="定途牛旅游线路，优惠购买缤纷乐相册"></a>
<a href="#" target="_blank"><img src="images/03.jpg" alt="三亚自助游"></a>
</li>
</ul>
</div>
</body>
2.用CSS做好背景和图片，
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style type="text/css">
#play{width:500px;height:230px; border:#ccc 1px solid;}
#playBg{margin-top:200px;z-index:1;filter:alpha(opacity=70);opacity:0.7;width:500px;position:absolute;height:30px;background:#000;}
#playText{margin-top:200px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}
#playNum{margin:205px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}
#playNum a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}
#playShow img{width:500px;height:230px;}
</style>
common.css内容如下：
body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
u{text-decoration:none;}
em{font-style:normal;}
a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;}
.box{margin:0 auto;text-align:left;width:920px;}
.clear{clear:both;}
3.用js实现点击切换轮播效果：
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<script type=text/javascript>
var t = n = 0, count = $("#playShow a").size();
$(function(){
$("#playShow a:not(:first-child)").hide();
$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});
$("#playNum a").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#playText").html($("#playShow a").eq(i).find("img").attr('alt'));
$("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")})
$("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
$(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
});
t = setInterval("showAuto()", 5000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#playNum a").eq(n).trigger('click');
}
</script>
石家庄康诺网络科技有限公司
2017/7/11
轮播图已经是一个很常见的东西，尤其是在各大App的首页顶部栏，经常会轮番显示不同的图片。
一提到轮播图如何实现时，很多人的第一反应就是使用Javascript的定时器，当然这种方法是可以实现的。不过就是有些繁琐，今天这篇文章我们来看看如何不用Javascript，而使用纯CSS代码去实现轮播图吧。
这篇文章的所有代码我都放在了github上，感兴趣的同学可以去看看。
https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html
CSS
首先我们来看看只使用CSS实现的轮播图效果。
实现效果图
看到上述的实现效果后，我们来具体分析下页面的构成。
页面在布局上首先要有5张图片，图片固定宽度。
每张图片对应一个标题，标题通过ul>li实现，事先算好宽度，跟随图片一起滚动。
下边有个1,2,3,4,5表示图片顺序的索引，鼠标放上去后会显示对应的图片。
接下来我们通过代码层面去看看整个效果是如何实现的。
首先来看看HTML页面的实现，代码中都有每个区域的描述。
HTML页面
实现这个效果主要是通过CSS代码的，其代码量比较大，我们分开来看。
外层容器
对于最外层容器我们设置绝对定位，方便图片标题子元素的定位。
外层容器
图片标题
对于图片的标题我们也采用绝对定位，并且让标题横向一行展示，方便在动画的时候直接横向滚动。
得到的代码如下所示。
图片标题
图片与图片容器
接下来是设置图片容器属性以及图片的基本大小。
图片容器也采用绝对定位，宽度可以动态设置，根据图片数量计算。每张图片设置宽度与高度，得到的代码如下。
图片与图片容器
图片动画效果
然后设置图片的动画效果，对于任意的图片都有进入和静止两个状态，中间的效果可以任意定制。
在这里，中间效果设置成5%的间隔，其他时间在进行位置的切换，因为图片是处于水平分布，通过设置margin-left的值为负数进行偏移即可。
图片动画效果
数字索引的基本属性
对于下面的数字图标也是通过基本的CSS属性进行设置的，包括宽高，行高，透明度等等。
在鼠标移动到对应的数字上后，数字会显示不同的颜色。而且在鼠标停留在数字上后，动画效果会暂停。
数字索引基本属性
数字索引的偏移量
因为数字是水平方向展示的，因此要设定每个数字的水平偏移量。
数字水平偏移量
鼠标停在数字上的动画效果
然后就是处理鼠标停留在数字上的动画效果，因为每张图片对应特定的数字，需要计算出每次的动画开始位置和结束位置。
鼠标停在数字上的动画效果
动画效果赋予指定的数字
最后一步就是将定义的动画效果赋予指定的数字上，每个数字都有特定的id。得到的代码如下。
动画效果赋予指定的数字
至此所有步骤完成了，就可以得到文章开始的动画效果了。
这篇文章完全通过CSS实现了一个轮播图的效果，相比于使用JS来说减少页面阻塞程度，效果更好。
说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。
轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，若有大神指教，不甚感激！
思路：
1、在body里面设置一个img标签，src路径暂且不设置，并给img标签设置id。
2、写一个function函数，里面设置src随着某种变量而改变的条件。
下面撸代码！！！
在这里我采用了投机取巧的方式，我的图片名都是：
读者可以按照需要改变一下函数的结构
*请认真填写需求信息，我们会在24小时内与您取得联系。
