HTML，css轮播图_随笔

给你几个思路

将所有需要轮播的图片横向并排排列，定位设置为绝对定位，暂定为pic-list。设置一个轮播图box,暂定为lb-box，lb-box依每张图片的宽高设置宽高，并将over-flow设置为hidden。将pic-list放到lb-box里，现在应该看到的是一张图片，设置一个定时器，每三秒或几秒执行一次，执行事件是将pic-list的left属性每次减去一张图片的宽度，到减完pic-list的宽度后，将left设置为0，轮播图完成。

第二种思路，设置一个放置轮播图的box，定为lb-box，宽高一样为一张图片的宽高，将所有的轮播图名字命名为统一格式，比如（pic-1.png,pic-2.png,pic-3.png）。lb-box里放轮播图种的第一张图如（pic-1.png），设置一个定时器，每三秒或几秒执行一次，执行的事件是将轮播图的src属性改成pic-2.png(具体可设置一个变量进行++ *** 作)。到最后一个轮播图再将轮播图src属性设置为pic-1.png。轮播图完成

PS.自己动手，丰衣足食

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<head>

<title>完全利用CSS实现图片切换特效_网页代码站()</title>

<style>

dl { position:absolutewidth:240pxheight:170pxborder:10px solid #eee}

dd { margin:0width:240pxheight:170pxoverflow:hidden}

img { border:1px solid black }

dt { position:absoluteright:3pxtop:50px}

a { display:blockmargin:1pxwidth:20pxheight:20pxtext-align:centerfont:700 12px/20px "宋体",sans-serifcolor:#ffftext-decoration:nonebackground:#666border:1px solid #ffffilter:alpha(opacity=40)opacity:.4}

a:hover {background:#000}

</style>

</head>

<body>

<dl$amp>amp$ltdt$amp>amp$lta #a" title="">1</a>

</dt>

<dd$amp>amp$ltimg src="" alt="" id="a" />

</dd>

</dl>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/zaji/8337347.html

HTML，css轮播图

发表评论

评论列表（0条）