search

Home >Web Front-end >JS Tutorial >Jquery slideshow special effects code sharing--switch when the mouse slides over the button (2)_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:45:001123browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jqueryNext article：Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery

Related articles

See more