jquery适合风景展现的图片切换特效

 查看演示  website  立即下载

在head里引入css和js:

<link rel="stylesheet" type="text/css" href="images/index.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.slides.js"></script>

在ul中修改你想要的大图片：

<ul class="silder_con">           
    <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/1.jpg" width="600" height="375" /></a></li> 
    <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/2.jpg" width="600" height="375" /></a></li>
    <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/3.jpg" width="600" height="375" /></a></li>
    <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/4.jpg" width="600" height="375" /></a></li>
<ul>

缩略图代码修改小图：

<ul class="silder_nav dec">             
    <li><a href="#" target="_blank"><img src="images/1.jpg" width="110" height="48" /></a></li>
    <li><a href="#" target="_blank"><img src="images/2.jpg" width="110" height="48" /></a></li>
    <li><a href="#" target="_blank"><img src="images/3.jpg" width="110" height="48" /></a></li>
    <li><a href="#"><img src="images/4.jpg" width="110" height="48" /></a></li>    
</ul>

图片名称修改代码：

div class="silder_intro">
  <h3>铭珠彩湖</h3>
</div>
<div class="silder_intro">
  <h3>黄金沙滩</h3>
</div>
<div class="silder_intro">
  <h3>中国龙</h3>
</div>
<div class="silder_intro">
  <h3>观景摩天轮</h3>
</div>

修改自动切换时间：

// mouse 
$("#slider_name").hover(function() {
    clearInterval(picTimer);
},function() {
    picTimer = setInterval(function() {
        showPics(index);
        index++;
        if(index == len) {index = 0;}
    },3000); 
}).trigger("mouseleave");

默认是3秒，自己可以修改为自己想要的时间。

非常方便使用

PREVIOUS:
NEXT:
HTML5CSS3分步提示框Tooltip 可嵌入任意HTML元素
后台管理设计