用html+css+js实现的一个简单的图片切换特效

用用html+css+js实现的一个简单的图片切换特效实现的一个简单的图片切换特效

主要介绍了用html+css+js实现的一个简单的图片切换特效,需要的朋友可以参考下

如图所示。

该图片切换特效实现很简单，而且兼容性很好。

html页面如下

复制代码 代码如下:

<div class="wrapper">

<div id="focus">

</ul>

</div>

</div><!-- wrapper end -->

</body>

css样式

复制代码 代码如下:

<style type="text/css">

* {margin:0; padding:0;}

body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

#focus ul {height:380px; position:absolute;}

#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}

#focus ul li div {position:absolute; overflow:hidden;}

#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}

#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}

#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px;

cursor:pointer; background:#fff;}

#focus .btn span.on {background:#fff;}

#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0;

cursor:pointer;}

var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）

var len = $("#focus ul li").length; //获取焦点图个数

var index = 0;

var picTimer;

//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮

var btn = "<div class='btnBg'></div><div class='btn'>";

for(var i=0; i < len; i++) {

btn += "<span></span>";