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

所属分类:媒体-幻灯片和轮播图

 31710  325  查看评论 (4)
分享到微信朋友圈
X
jquery适合风景展现的图片切换特效 ie兼容8

在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秒,自己可以修改为自己想要的时间。

非常方便使用


相关插件-幻灯片和轮播图

jQuery手机触屏滑动的响应式图片轮播效果

jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码。
  幻灯片和轮播图
 65409  476

jQuery左右全屏焦点图

jQuery左右全屏焦点图,兼容ie6
  幻灯片和轮播图
 29641  370

带进度条的鼠标点击放大特效插件

通过拖动横向滚动条来放大或缩小组图
  幻灯片和轮播图
 29190  339

5种jQuery超酷3d幻灯片效果

flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
  幻灯片和轮播图
 33647  451

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    叶楠 0
    2017/5/16 11:01:58

    好像有点问题 鼠标放上去的时候虽然不会动 但一点下一页顺序就跳到下下个图片上了 而且点快了下一页还容易乱切换图片

    回复
    我叫聪猫儿…… 0
    2016/5/9 10:05:24
    碎秋の稻草 0
    2016/4/14 9:04:33
    我想说这个网站是不是该加个发布时间
        我叫聪猫儿……0
        2016/5/9 10:05:16
        棒棒
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复