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

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

 31946  326  查看评论 (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轮播图带浮动焦点详细,可用于产品展示某个点的详细。
  幻灯片和轮播图
 33659  388

根据浏览器宽度大小自动调整图片的jquery相册代码

根据浏览器宽度大小自动调整图片的jquery相册代码
  幻灯片和轮播图
 26499  319

jquery分层轮播插件jquery.zySlide

jquery实现分层轮播3d旋转效果
  幻灯片和轮播图
 49452  428

针对移动设备的手动切换插件

该插件可以将浏览器中的元素集合像卡片一样通过手势切换,在电脑和移动设备上均可使用。
  幻灯片和轮播图
 31917  349

讨论这个项目(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
        棒棒
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复