jQuery实现带缩略图的渐显渐隐图片幻灯切换效果

最新推荐文章于 2021-01-15 08:09:36 发布

kacoro

最新推荐文章于 2021-01-15 08:09:36 发布

阅读量1.1k

点赞数

分类专栏：网站前端开发 JQUERY 文章标签： jquery function filter class xhtml 影视

网站前端开发同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JQUERY

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现带缩略图的渐显渐隐图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
div,ul,li{margin:0;padding:0;}
body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑";line-height:1.2;}
a{color:#047;text-decoration:none;}
a:hover{color:#a40000;text-decoration:none;}
ul,li{list-style:none;}
#i_focus{width:460px;height:231px;background:#eee;padding:5px 5px 0 5px;margin:0 auto;}
#i_focus_pic{width:376px;height:226px;display:inline;position:relative;float:left;overflow:hidden;}
#i_focus_piclist{position:absolute;}
#i_focus_piclist li{width:378px;height:226px;overflow:hidden;display:none;}
#i_focus_piclist img{width:374px;height:224px;border:1px solid #fff;}
#i_focus_btn {float:right;width:77px;}
#i_focus_btn li {cursor:pointer;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
#i_focus_btn img{width:75px;height:70px;border:1px solid #fff;margin-bottom:2px;}
#i_focus_btn .i_cur {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
#i_focus_opdiv{position:absolute;left:0;bottom:0;width:374px;height:40px;background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);border:1px solid #fff;border-top:0;}
#i_focus_tx span{font-family:"微软雅黑";font-size:16px;font-weight:bold;line-height:22px;display:block;}
#i_focus_tx{position:absolute;left:8px;bottom:2px;color:#FFF;}
#i_focus_tx .normal {display:none;}
</style>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="i_focus">
 <div id="i_focus_pic">
  <ul id="i_focus_piclist" style="left:0;top:0;">
   <li><a href="http://www.CsrCode.cn" target="_blank"><img src="/images/m01.jpg" alt=""></a></li>
   <li><a href="http://www.33567.cn" target="_blank"><img src="/images/m02.jpg" alt=""></a></li>
   <li><a href="http://www.7caidy.com" target="_blank"><img src="/images/m03.jpg" alt=""></a></li>
  </ul>
  <div id="i_focus_opdiv"></div>
  <!--slide大图374*224-->
  <ul id="i_focus_tx">
   <li class="normal"><span>红叶传情</span>红叶传情 ☆ 芯晴网页特效：www.CsrCode.cn</li>
   <li class="normal"><span>野花绽放</span>野花绽放 ★ 珊珊影视在线：www.33567.cn</li>
   <li class="normal"><span>往事如茶</span>往事如茶 ☆ 七彩影视：www.7caidy.com</li>
  </ul>
 </div>
 <!--slide右侧小缩略图75*70-->
 <ul id="i_focus_btn">
  <li class="i_cur" id="p0"><img src="/images/s1.jpg" alt=""></li>
  <li id="p1"><img src="/images/s2.jpg" alt=""></li>
  <li id="p2"><img src="/images/s3.jpg" alt=""></li>
 </ul>
</div>
<script src="/images/jquery-1.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    var i_curIndex = 0;
    var beauBeauSlide;//函数对象
    var i_curID = 0;//取得鼠标下方的对象ID
    var pictureID = 0;//索引ID
    $("#i_focus_piclist li").eq(0).show();//默认
    autoScroll();
    $("#i_focus_btn li").hover(function() {
        StopScrolll();
        $("#i_focus_btn li").removeClass("i_cur")//所有的li去掉当前的样式加上正常的样式
        $(this).addClass("i_cur");//而本身则加上当前的样式去掉正常的样式
        i_curID = $(this).attr("id");//取当前元素的ID
        pictureID = i_curID.substring(i_curID.length - 1);//取最后一个字符
        $("#i_focus_piclist li").eq(pictureID).fadeIn("slow");//本身显示
        $("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide();//除了自身别的全部隐藏
        $("#i_focus_tx li").hide();
        $("#i_focus_tx li").eq(pictureID).show();

    },
    function() {
       //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
        i_curID = $(this).attr("id");//取当前元素的ID
        pictureID = i_curID.substring(i_curID.length - 1);//取最后一个字符
        i_curIndex = pictureID;
        autoScroll();
    });
   //自动滚动
    function autoScroll() {
        $("#i_focus_btn li:last").removeClass("i_cur");
        $("#i_focus_tx li:last").hide();
        $("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
        $("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
        $("#i_focus_tx li").eq(i_curIndex).show();
        $("#i_focus_tx li").eq(i_curIndex - 1).hide();
        $("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
        $("#i_focus_piclist li").eq(i_curIndex - 1).hide();
        i_curIndex++;
        i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex;
        beauBeauSlide = setTimeout(autoScroll, 2000);
    }
    function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
    {
        clearTimeout(beauBeauSlide);
    }
});
</script>
</body>
</html>

kacoro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现带缩略图的渐显渐隐图片幻灯切换效果

jQuery实现带缩略图的渐显渐隐图片幻灯切换效果与之间-->div,ul,li{margin:0;padding:0;}body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑";line-height:1.2;}a{color:#047;text-decoration:none;}a:hover{color:
复制链接

扫一扫