两个基于jQuery的渐隐渐显图片轮换幻灯片

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<title>两个基于jQuery的渐隐渐显图片轮换幻灯片</title>
<style> 
div,ul, ol, li, h1,h2, p{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}
h1{font-size:1em; font-weight:normal; line-height:1.8em}
h1 a{background:#CFF; padding:2px 3px; text-decoration:none}
h1 a:hover{background:#eee; text-decoration:underline}
h2{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto}
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}
/*第二个幻灯样式*/
.slides { position:relative; overflow:hidden; width:704px; height:250px; border:5px solid #eee; margin:0 auto }
.slide-pic{ overflow:hidden;width:703px}
.slide-pic img{ width:701px; height:248px;border:1px solid #E4E4E4}
.slide-pic li { display:none}
.slide-pic li.cur { display:block}
.slide-li { position:absolute; left:0; bottom:0; }
.slide-li li { float:left; width:175px; height:30px; line-height:30px; margin-right:1px; text-align:center}
.slide-li a:visited,.slide-li a:link { display:block; width:174px; height:30px; font-size:14px; color:#FFF}
.slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none}
.op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)}
.op li.cur { background:#FFF}
.slide-txt span { display:none}
</style>
</head>
<body class="box">
<h2>两个基于jQuery的渐隐渐显图片轮换幻灯片——如果不运行请刷新页面</h2>

<div id="i_focus">
<div id="i_focus_pic">
<ul id="i_focus_piclist" style="left:0; top:0;">
<li><a href="#" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="提示" /></a></li>
<li><a href="#" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="提示" /></a></li>
<li><a href="#" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="提示" /></a></li>
</ul>
<div id="i_focus_opdiv"></div>

<ul id="i_focus_tx">
<li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li>
<li class="normal"><span>HAHA OHOH</span>THINK EVERY DAY</li>
<li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li>
</ul>
</div>

<ul id="i_focus_btn">
<li class="i_cur" id="p0"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="提示" /></li>
<li id="p1"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="提示" /></li>
<li id="p2"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="提示" /></li>
</ul>
</div>

<br />
 
<div class="slides">
  <ul class="slide-pic">
    <li><a href="#"><img src="http://img.ffffound.com/static-data/assets/6/b2431f3432bcee4c0358fcb3bf8103c1288e70c3_m.jpg" alt="Modified@Mr.Think" /></a></li>
    <li class="cur"><a href="#"><img src="http://img.ffffound.com/static-data/assets/6/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="专注前端技术" /></a></li>
    <li><a href="#"><img src="http://img.ffffound.com/static-data/assets/6/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="天边夕阳再次映上" /></a></li>
    <li><a href="#"><img src="http://img.ffffound.com/static-data/assets/6/c80f38277bc3cf89be3c76cefebdc608c6fe512d_m.jpg" alt="曾梦想仗剑走天涯" /></a></li>
  </ul>
  <ul class="slide-li op">
    <li></li>
    <li class="cur"></li>
    <li></li>
    <li></li>
  </ul>
  <ul class="slide-li slide-txt">
    <li><a href="#">Modified@Mr.Think</a></li>
    <li class="cur"><a href="#">专注前端技术</a></li>
    <li><a href="#">天边夕阳再次映上</a></li>
    <li><a href="#">曾梦想仗剑走天涯</a></li>
  </ul>
</div>      
  
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(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);
    }
});
//第二个渐隐幻灯开始
var defaultOpts = {
    interval: 3000,
    fadeInTime: 300,
    fadeOutTime: 200
};

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

两个基于jQuery的渐隐渐显图片轮换幻灯片

分类

图片代码

描述

两个基于jQuery的渐隐渐显图片轮换幻灯片，如果不运行的话，请刷新页面。这两个幻灯片都是基于jQuery的，带缩略图，一个是图文切换，很不错，图片加载的是远程的，如果图片地址失效，请更换一下图片地址。