Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

前端技术 2023/09/06 JavaScript

这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，具体如下

幻灯片效果描述：用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。

自定义切换参数效果：向下切换、切换时间为8秒、鼠标滑过按钮时切换
 
运行效果截图如下：

具体代码如下

<head>

<title>Jquery幻灯片焦点图插件</title>
<script src=\"js/jquery-1.4a2.min.js\" type=\"text/javascript\"></script>
<script src=\"js/jquery.-1.2.1.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(function(){
 $(\"#KinSlideshow\").KinSlideshow({
 moveStyle:\"down\",
 intervalTime:8,
 mouseEvent:\"mouseover\",
 titleFont:{TitleFont_size:14,TitleFont_color:\"#FF0000\"}
 });
})
</script>
<style type=\"text/css\">
.code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{ font-family:\"Courier New\";font-size:14px;}
.code pre code.note{ color:#999}
.code2{border:1px solid #FEB0B0; background:#FFF1F1; margin-top:10px;}
.code2 pre{ margin-left:20px; font-size:12px;}
.info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; font-family:\"微软雅黑\",Verdana;}
h2.title span.titleInfo{ font-size:12px; color:#333; margin-left:10px;font-family:Verdana;}
h3.title{ font-size:16px; font-family:\"微软雅黑\",Verdana;}
.importInfo{ font-family:Verdana; font-size:14px;}
</style>

</head>

<body>

<li><h3><a href=\"demo2.html\">自定义切换参数效果</a></h3></li>
</ol>
 <div id=\"KinSlideshow\" style=\"visibility:hidden;\">
  <a target=\"_blank\"><img src=\"images/11.png\" alt=\"Jquery幻灯片焦点图插件\" width=\"600\" height=\"300\" /></a>
  <a target=\"_blank\"><img src=\"images/23.png\" alt=\"Jquery幻灯片焦点图插件\" width=\"600\" height=\"300\" /></a>
  <a target=\"_blank\"><img src=\"images/22.png\" alt=\"Jquery幻灯片焦点图插件\" width=\"600\" height=\"300\" /></a>
  <a target=\"_blank\"><img src=\"images/5.jpg\" alt=\"Jquery幻灯片焦点图插件\" width=\"600\" height=\"300\" /></a>
  <a target=\"_blank\"><img src=\"images/4.jpg\" alt=\"Jquery幻灯片焦点图插件\" width=\"600\" height=\"300\" /></a>
 </div>

</body>
</html>

希望本文所述对大家的Jquery特效设计有所帮助。

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案