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

jquery自适应浏览器全屏幻灯片切换代码

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

实用方法

页面引用

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />

html

<!--大图-->
<div class="slider-container">
    <div class="slide-item" style="display:block;">
        <img width="1800" height="956" src="images/01.jpg" /> 
        <div class="slide-cont"> 
            <h1><span>Global event<;/span><br />APICS 2014 Shanghai</h1> 
            <p>Gain insight into how companies are leading<br ;/>the way in supply chain innovation.</p> 
            <p><a href="#">Register today</a></p> 
        </div> 
    </div>

</div>

<!--缩略小图-->
<ul class="thumbs clearfix">
    <li class="thumb1 curr"><div><em><;/em><span>GLOBAL EVENT: APICS 2014 Shanghai</span></div></li>
</ul>

js

$(document).ready(function(){
    startTimer();
    __regexoperators___/** Main Slider **/    var timer;
    var slideCount = $('.thumbs li').length;
    var currSlide = $('.thumbs li').filter('.curr').index();
    var nextSlide = currSlide + 1;
    var fadeSpeed = 1000;
    //Start slides timer functions    function startTimer() {
        timer = setInterval(function () {
            $('.slide-item').eq(currSlide).fadeOut(fadeSpeed);
            $('.slide-item, .thumbs li').removeClass('curr');
            $('.slide-item').eq(nextSlide).addClass('curr').fadeIn(fadeSpeed);
            $('.thumbs li').eq(nextSlide).addClass('curr');
            currSlide = nextSlide;
            nextSlide = currSlide + 1 < slideCount ? currSlide + 1 : 0;
        }, 6000);
    }
    $('.thumbs li').click(function () {
        clearInterval(timer);
        startTimer();
        currSlide = $(this).index();
        nextSlide = currSlide + 1 < slideCount ? currSlide + 1 : 0;;
        $('.slide-item').fadeOut(fadeSpeed);
        $('.slide-item, .thumbs li').removeClass('curr');
        $('.slide-item').eq($(this).index()).addClass('curr').fadeIn(fadeSpeed);
        $(this).addClass('curr');
    });
});






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

标签:
代码下载
收藏 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全屏焦点图代码