基于jquery插件实现常见的幻灯片效果

前端技术 2023/09/09 JavaScript
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。

使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果

htm代码：
复制代码 代码如下:

<div id=\"focusNews\" style=\"visibility:hidden;\" class=\"ifocus\" >
<a href=\"test.aspx\" target=\"_blank\"><img src=\"images/1.jpg\" alt=\"标题一\" /></a>
<a href=\"test.aspx\" target=\"_blank\"><img src=\"images/2.jpg\" alt=\"标题二\" /></a>
<a href=\"test.aspx\" target=\"_blank\"><img src=\"images/3.jpg\" alt=\"标题三\" /></a>
<a href=\"test.aspx\" target=\"_blank\"><img src=\"images/4.jpg\" alt=\"标题四\" /></a>
<a href=\"test.aspx\" target=\"_blank\"><img src=\"images/5.jpg\" alt=\"标题五\" /></a>
<a href=\"test.aspx\" target=\"_blank\"><img src=\"images/6.jpg\" alt=\"标题六\" /></a>
</div>

js代码：
复制代码 代码如下:

$(function () {
$(\"#focusNews\").KinSlideshow({
// moveStyle:\"down\", //设置切换方向为向下 [默认向左切换]
intervalTime:8, //设置间隔时间为8秒 [默认为5秒]
mouseEvent:\"mouseover\", //设置鼠标事件为“鼠标滑过切换” [默认鼠标点击时切换]
titleFont:{TitleFont_size:14,TitleFont_color:\"#FF0000\"} //设置标题文字大小为14px，颜色：#FF0000
});

})

设置图片大小的CSS
复制代码 代码如下:

.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }

最终效果图

本文地址：https://www.stayed.cn/item/24301

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案