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

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

 31048  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手机响应式设计焦点图
  幻灯片和轮播图
 41488  405

强大的照片展示插件Slider

支持鼠标滑动,幻灯片播放
  幻灯片和轮播图
 28302  413

jQuery 3d滚动轮播插件

类似洗牌特效,图片轮播
  幻灯片和轮播图
 60033  489

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

图片切换,带有标题和缩略图,效果很好,修改非常简单,兼容各大浏览器
  幻灯片和轮播图
 31049  325

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