图片轮播KinSlideshow注意事项

本文介绍了一种确保网页中图片能够实现无缝播放的方法,重点强调了代码格式的重要性,并解决了IE8浏览器下图片显示的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先上图:



1、特别注意:

图片和a连接不要换行,不然会出现图片播放时无法无缝连接。

<a href="http://www.lanrentuku.com" target="_blank"><img src="__ROOT__/public/lunbo/images/3.jpg" alt="这是标题三" width="600" height="300"/></a>

上边代码一定要在一行,不能手动换行,多张图片可以换行。


2、ie8图片不显示问题

图片的尺寸,只能用代码的格式写,不能写在style里。


只能说明插件老咯,可惜了。



很好的 图片轮播 jquery轮播 <div style="visibility: visible; width: 600px; height: 300px; overflow: hidden; position: relative;" id="KinSlideshow1"> <div id="KinSlideshow_moveBox" style="width: 600px; height: 300px; overflow: hidden; position: relative;"><div id="KinSlideshow_content"><a target="_blank" href="http://www.qq1.com"><img width="600" height="300" alt="这是标题一" src="images/1.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq2.com"><img width="600" height="300" alt="这是标题二" src="images/2.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq3.com"><img width="600" height="300" alt="这是标题三" src="images/3.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq4.com"><img width="600" height="300" alt="这是标题四" src="images/4.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq5.com"><img width="600" height="300" alt="这是标题五" src="images/5.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq6.com"><img width="600" height="300" alt="这是标题六" src="images/6.jpg" style="border: 0px none;"></a></div><div id="KinSlideshow_contentClone"><a target="_blank" href="http://www.qq1.com"><img width="600" height="300" alt="这是标题一" src="images/1.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq2.com"><img width="600" height="300" alt="这是标题二" src="images/2.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq3.com"><img width="600" height="300" alt="这是标题三" src="images/3.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq4.com"><img width="600" height="300" alt="这是标题四" src="images/4.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq5.com"><img width="600" height="300" alt="这是标题五" src="images/5.jpg" style="border: 0px none;"></a><a target="_blank" href="http://www.qq6.com"><img width="600" height="300" alt="这是标题六" src="images/6.jpg" style="border: 0px none;"></a></div></div> <div class="KinSlideshow_titleBar" style="height: 40px; width: 100%; position: absolute; bottom: 0px; left: 0px; background: none repeat scroll 0% 0% rgb(0, 0, 0); opacity: 0.5;"><h2 style="margin: 3px 0px 0px 6px; padding: 0px; font-size: 12px; color: rgb(255, 255, 255); font-family: Verdana; font-weight: bold;" class="title">这是标题三</h2></div><div style="position:absolute;right:10px;bottom:5px; z-index:100" class="KinSlideshow_btnBox"><ul style="margin:0;padding:0; overflow:hidden" id="btnlistID"><li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0% rgb(102, 102, 102); text-align: center; cursor: pointer; margin-left: 3px; font-size: 12px; font-family: Verdana; line-height: 18px; opacity: 0.7; color: rgb(204, 204, 204);">1</li><li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0% rgb(102, 102, 102); text-align: center; cursor: pointer; margin-left: 3px; font-size: 12px; font-family: Verdana; line-height: 18px; opacity: 0.7; color: rgb(204, 204, 204);">2</li><li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(255, 0, 0); border-style: solid; background: none repeat scroll 0% 0% rgb(204, 0, 0); text-align: center; cursor: pointer; margin-left: 3px; font-size: 12px; font-family: Verdana; line-height: 18px; opacity: 0.7; color: rgb(0, 0, 0);">3</li><li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0% rgb(102, 102, 102); text-align: center; cursor: pointer; margin-left: 3px; font-size: 12px; font-family: Verdana; line-height: 18px; opacity: 0.7; color: rgb(204, 204, 204);">4</li><li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0% rgb(102, 102, 102); text-align: center; cursor: pointer; margin-left: 3px; font-size: 12px; font-family: Verdana; line-height: 18px; opacity: 0.7; color: rgb(204, 204, 204);">5</li><li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0% rgb(102, 102, 102); text-align: center; cursor: pointer; margin-left: 3px; font-size: 12px; font-family: Verdana; line-height: 18px; opacity: 0.7; color: rgb(204, 204, 204);">6</li></ul></div></div>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值