欢迎光临一流素材网,免积分免费素材下载!
AD

JQuery banner 轮播

所属栏目:轮播图/幻灯片更新时间:2016-10-18原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8,IE6

用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。


这里大概说一下整个流程:
1,将除了第一张以外的图片全部隐藏,
2,获取第一张图片的alt信息显示在信息栏,并添加点击事件
3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片
4,设置setInterval,定时执行切换函数

使用步骤

调用

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

html部分

<div id="banner">  
    <div id="banner_bg">       
    </div>
<!--标题背景-->
    <div id="banner_info"> 
    </div>
<!--标题-->
    <ul>   
        <li class="on">
            1        </li>
        <li>
            2        </li>
        <li>
            3        </li>
        <li>
            4        </li>
    </ul>
    <div id="banner_list">
        <a href="#" target="_blank"><img src="imgs/p1.jpg" title="jquery插件库1" alt="jquery插件库1"></a> <a href="#" target="_blank"><img src="imgs/p2.jpg" title="jquery插件库2" alt="jquery插件库2"></a> <a href="#" target="_blank"><img src="imgs/p3.jpg" title="jquery插件库3" alt="jquery插件库3"></a> <a href="#" target="_blank"><img src="imgs/p1.jpg" title="jquery插件库4" alt="jquery插件库4"></a>
    </div>
</div>

css部分

<style type="text/css">
#banner { position: relative; width: 478px; height: 286px; border: 1px solid #666; overflow: hidden; }
#banner_list img { border: 0px; }
#banner_bg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; }
#banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }
#banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; }
#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; }
#banner ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }
#banner ul li.on { background-color: #000; }
#banner_list a { position: absolute; }
<!--让四张图片都可以重叠在一起-->
</style>

js部分

<script type="text/javascript">
    var t = n = 0,
    count;
    $(document).ready(function() {
        count = $("#banner_list a").length;
        $("#banner_list a:not(:first-child)").hide();
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
        $("#banner_info").click(function() {
            window.open($("#banner_list a:first-child").attr('href'), "_blank")
        });
        $("#banner li").click(function() {
            var i = $(this).text() - 1; //获取Li元素内的值,即1,2,3,4            n = i;
            if (i >= count) return;
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
            $("#banner_info").unbind().click(function() {
                window.open($("#banner_list a").eq(i).attr('href'), "_blank")
            }) $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            document.getElementById("banner").style.background = "";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function() {
            clearInterval(t)
        },
        function() {
            t = setInterval("showAuto()", 4000);
        });
    })
 
    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
</script>


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1exzoom-一款jquery商城商品放大镜插件

2jQuery响应式触屏图片左右滚动代码owl.carousel

3轻量级响应式jQuery轮播图/幻灯片插件-lightslider

4移动端滑动JS响应式轮播图插件

5jQuery倾斜图片切换滚动焦点图幻灯片代码

6jQuery版仿淘宝商城天猫首页多格焦点图效果

7易迅网竖排多格jquery焦点图代码

8jQ索引按钮+缩略图双重切换

9兼容触屏手机浏览的JS全屏焦点图代码

10鼠标滑过+自动播放jQ全屏焦点图代码