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

所属分类:媒体-幻灯片和轮播图

 48250  360  查看评论 (1)
分享到微信朋友圈
X
jquery自适应浏览器全屏幻灯片切换代码 ie兼容6

实用方法

页面引用

<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" />


截图

title="未标题-3.jpg"/>


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="http://www.jq22.com/">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();
    /** 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');
    });
});
相关插件-幻灯片和轮播图

仿酷狗轮播图超炫酷效果

将轮播图进行简易的封装能够很好的复用以及修改
  幻灯片和轮播图
 35468  330

带各种百叶窗过渡效果的jQuery幻灯片插件

osSlider是一款简单实用的带各种百叶窗过渡效果的jQuery幻灯片插件。该幻灯片插件在slide过渡时随机生成各种百叶窗效果,它使用简单,通过简单的设置即可正常工作。
  幻灯片和轮播图
 35082  398

SuperSlidev2.1焦点图幻灯片tab

SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
  幻灯片和轮播图
 46019  426

仿UC轮播插件imgSlider.js

js图片轮播幻灯片制作UC浏览器官网焦点图片切换,通过鼠标点击缩略图切换banner大图,带左右按钮控制缩略图片滚动切换,进行图片自动轮播
  幻灯片和轮播图
 32124  362

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

      0
    2017/12/17 13:17:16
    济公 0
    2014/6/25 17:56:00

    ie6兼容是个很头痛的问题,本站以不支持ie8以下的浏览器。不想在ie6上花太多的精力。不过还是感谢楼上提出的问题。

    回复
    魔界小鸟 0
    2014/6/25 16:57:00

    ie6下测试有点问题额,调整屏幕时布局混乱额

    回复
    魔界小鸟 0
    2014/6/24 10:36:00
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复