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

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

 25558  259  查看评论 (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适合移动设备触摸屏的响应式幻灯片插件
  幻灯片和轮播图
 32991  401

原生js实现轮播插件(支持左右箭头、圆点按钮、兼容IE8)(原创)

支持左右箭头、圆点按钮、代码注释全、可控效果按钮接口、简单语法、兼容IE8
  幻灯片和轮播图
 23270  237

jQuery响应式轮播图,无缝大屏滚动插件(原创)

代码清晰,动画流畅,无bug的banner滚动轮播
  幻灯片和轮播图
 28047  264

jquery全屏自适应轮播插件poposlides

jQuery轻量级全屏自适应焦点图插件poposlides
  幻灯片和轮播图
 38651  311

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