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

jquery轮播焦点图

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

实现代码


引用jquery到你的页面<head>与</head>之间

<script type="text/javascript" src="js/jquery.min.js"></script>

Css

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{ font-size: 12px; background-color: #E8E8E8; }
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}__regexoperators___/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}__regexoperators___/* banner */
.banner{ width: 520px; height: 280px; position: relative; overflow: hidden; margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 10%; }
.banner-btn{display:none;}
.banner-btn a{display:block;line-height:40px;position:absolute;top:120px;width:40px;height:40px;background-color:#000;opacity:0.3;filter:alpha(opacity=30) color:rgb(255, 255, 255);overflow:hidden;z-index:4;}
.prevBtn{left:5px;}
.nextBtn{right:5px;}
.banner-img{font-size:0;*word-spacing:-1px;__regexoperators___/* IE6、7 */ letter-spacing:-3px;position:relative;}
.banner-img li{display:inline-block;*display:inline;*zoom:1;__regexoperators___/* IE6、7 */ vertical-align:top;letter-spacing:normal;word-spacing:normal;font-size:12px;}
.banner i{background:url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png)  no-repeat;width:15px;height:23px;cursor:pointer;margin:8px 0 0 12px;display:block;}
.banner .nextBtn i{background-position:-200px -24px;}.banner .prevBtn i{background-position:-200px 0px;}
.banner-circle{position:absolute;left:50%;bottom:15px;height:13px;text-align:center;font-size:0;border-radius:10px;background:rgba(255,255,255,0.3);filter:alpha(opacity:30);}
.banner-circle li{border-radius:10px;margin:2px;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1;}
.banner-circle li a{display:block;padding-top:9px;width:9px;height:0;border-radius:50%;background:#B7B7B7;overflow:hidden;}
.banner-circle .selected a{background:#F40;}

js

<script type="text/javascript">
    $(function() {        var $banner = $('.banner');        var $banner_ul = $('.banner-img');        var $btn = $('.banner-btn');        var $btn_a = $btn.find('a') var v_width = $banner.width();        var page = 1;        var timer = null;        var btnClass = null;        var page_count = $banner_ul.find('li').length; //把这个值赋给小圆点的个数
        var banner_cir = "<li class='selected' href='#'><a></a></li>";        for (var i = 1; i < page_count; i++) {            //动态添加小圆点
            banner_cir += "<li><a href='#'></a></li>";
        }
        $('.banner-circle').append(banner_cir);        var cirLeft = $('.banner-circle').width() * ( - 0.5);
        $('.banner-circle').css({            'marginLeft': cirLeft
        });

        $banner_ul.width(page_count * v_width);        function move(obj, classname) {            //手动及自动播放
            if (!$banner_ul.is(':animated')) {                if (classname == 'prevBtn') {                    if (page == 1) {
                        $banner_ul.animate({
                            left: -v_width * (page_count - 1)
                        });
                        page = page_count;
                        cirMove();
                    } else {
                        $banner_ul.animate({
                            left: '+=' + v_width
                        },                        "slow");
                        page--;
                        cirMove();
                    }
                } else {                    if (page == page_count) {
                        $banner_ul.animate({
                            left: 0
                        });
                        page = 1;
                        cirMove();
                    } else {
                        $banner_ul.animate({
                            left: '-=' + v_width
                        },                        "slow");
                        page++;
                        cirMove();
                    }
                }
            }
        }        function cirMove() {            //检测page的值,使当前的page与selected的小圆点一致
            $('.banner-circle li').eq(page - 1).addClass('selected').siblings().removeClass('selected');
        }

        $banner.mouseover(function() {
            $btn.css({                'display': 'block'
            });
            clearInterval(timer);
        }).mouseout(function() {
            $btn.css({                'display': 'none'
            });
            clearInterval(timer);
            timer = setInterval(move, 3000);
        }).trigger("mouseout"); //激活自动播放
        $btn_a.mouseover(function() {            //实现透明渐变,阻止冒泡
            $(this).animate({
                opacity: 0.6
            },            'fast');
            $btn.css({                'display': 'block'
            });            return false;
        }).mouseleave(function() {
            $(this).animate({
                opacity: 0.3
            },            'fast');
            $btn.css({                'display': 'none'
            });            return false;
        }).click(function() {            //手动点击清除计时器
            btnClass = this.className;
            clearInterval(timer);
            timer = setInterval(move, 3000);
            move($(this), this.className);
        });

        $('.banner-circle li').live('click',        function() {            var index = $('.banner-circle li').index(this);
            $banner_ul.animate({
                left: -v_width * index
            },            'slow');
            page = index + 1;
            cirMove();
        });
    });
</script>

html

<div class="banner">
    <div class="banner-btn">
        <a href="javascript:;" class="prevBtn"><i><;/i></a>
        <a href="javascript:;" class="nextBtn"><i><;/i></a>
    </div>
    <ul class="banner-img">
        <li><a href="#"><img src="img/1.jpg"></a></li>
        <li><a href="#"><img src="img/2.jpg"></a></li>
        <li><a href="#"><img src="img/3.jpg"></a></li>
        <li><a href="#"><img src="img/4.jpg"></a></li>
        <li><a href="#"><img src="img/5.jpg"></a></li>
        <li><a href="#"><img src="img/6.jpg"></a></li>
    </ul>
    <ul class="banner-circle"></ul>
</div>



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

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

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

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

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

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

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

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

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

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

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

8jquery旋转木马插件SLICK

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

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

最新更新的

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

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

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

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

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

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

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

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

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

10Diapo轮播图-幻灯片插件