Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)

Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery

WBOY

Release： 2016-05-16 15:45:00

Original

1116 people have browsed it

This article mainly introduces jQuery to realize the slide focus map, which can achieve a very dazzling and fashionable slide effect. It is of great practical value and can basically satisfy you when using the slide (focus map) effect on the web page. The details are as follows

Slideshow effect description: Use the mouse to slide over the number button in the lower right corner of the slideshow to switch left and right.

Customized switching parameter effect: switch downward, switching time is 8 seconds, switch when the mouse slides over the button

The screenshot of the running effect is as follows:

The specific code is as follows

<head>

<title>Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_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 slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/23.png" alt="Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/22.png" alt="Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>

</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s Jquery special effects design.