兼容ie6的轮播效果

公司要求兼容ie6,之前网上找了很多插件都不行,最后只能自己写个模拟轮播的,例子如下

<style type="text/css">
#container{
width:1216px;
height:100%;
margin:0 auto;
position:relative;
}
#parent{

width:100%;
height:160px;
overflow:hidden;
border:1px solid #ccc;
padding:0;
font-size:0;

}
#parent div{
width:300px;
height:160px;
display:inline-block;
*display:inline;
*zoom:1;
font-size:40px;
color:#fff;
font-weight:bold;
text-align:center;
padding:0;
margin:0 2px;

}
span{
font-size:40px;
color:#ccc;
position:absolute;
}
.left{
left:-30px;
top:50px;
}
.right{
right:-30px;
top:50px;
}
</style>

<body>
<div id="container">
<span class="left"><</span>
<div id="parent">
<div style="background:red">1</div>
<div style="background:blue">2</div>
<div style="background:yellow">3</div>
<div style="background:#F04681">4</div>
<div style="background:#0AC0B5">5</div>
<div style="background:#C146F0">6</div>
<div style="background:#4674F0">7</div>
<div style="background:black">8</div>
</div>
<span class="right">></span>
</div>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
var timer = setInterval(task,1500);
function task(){
var clones = $("#parent").children().eq(0).clone(true);
$("#parent").children().eq(0).remove();
$("#parent").append(clones);

}
$("#parent").mouseenter(function(){
clearInterval(timer);
})
$("#parent").mouseleave(function(){
timer = setInterval(task,1500);
})
$(".left").click(function(){
/* var clones = $("#parent").children().eq(0).clone(true);
$("#parent").children().eq(0).remove();*/
clearInterval(timer);
var clones = $("#parent>div:first").clone(true);
$("#parent>div:first").remove();
$("#parent").append(clones);
timer = setInterval(task,1500);

})
$(".right").click(function(){
clearInterval(timer);
var clones = $("#parent>div:last").clone(true);
$("#parent>div:last").remove();
$("#parent").prepend(clones);
timer = setInterval(task,1500);

})

</script>
</body>

完全兼容ie6

原文地址:https://www.cnblogs.com/maochunhong/p/9516934.html

时间: 2024-10-26 02:05:21

兼容ie6的轮播效果的相关文章

Android中使用ViewPager实现屏幕页面切换和页面轮播效果

之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载. ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 下面我们就展示下Vie

jQuery实现轮播效果(一)

前戏: XXXX年XX月XX日,经理交给我一个网站新闻资讯网页开发的活儿,我一个java程序员,怎么完成得了网页设计这样高端的活儿呢!之前虽然有学过一点HTML,CSS的知识,但是在实际的使用中,把页面整的好看很困难,最后信心没了,就再也不想去做涉及网页开发的事儿了,一心学习java.如果在小公司做java web开发,专门做后台的开发时很少的,一般还得弄前台页面(PS:做这些前台也很简单,要么用一些前端框架,要么就是把以前的项目拷过来再修改下页面).拿到网页开发这个活儿,我顿时愣了,不过好在不

jQuery实现轮播效果(一) - 基础

前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把页面整的好看非常困难,最后信心没了,就再也不想去做涉及网页开发的事儿了.一心学习java.假设在小公司做java web开发,专门做后台的开发时非常少的.一般还得弄前台页面(PS:做这些前台也非常easy,要么用一些前端框架,要么就是把曾经的项目拷过来再改动下页面).拿到网页开发这个活儿.我顿时愣了

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

网站——如何实现轮播效果

实现轮播效果需要运用到的知识: DOM操作 定时器 事件运用 Js动画 函数递归 无限滚动 原理:控制图片列表的“left”值来显示相应的图片 组成部分<div id="container">: <div id="list">//图片列表 <div id="list" style="left:-600px">//当图片的宽度全部为600px时 <img src=""

基本_移动类型轮播效果_框架

一.基本元素: D:display window;用户浏览的窗口: S:scroll window;存放内容的大容器:通过移动来改变显示的内容: C:content;内容信息: B:button;按钮,多种样式,可选: 二.思路: 通过移动S 的位置,由于C位于S中,所有的C将会同时跟随S而移动. 在D中显示的内容将会被改变. 三.html结构: 1 <div class=”D”> 2 <div class=”S”> 3 <div class=”C”>content&l

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

js的轮播效果

图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 960px; height: 400px; o

简单的一个轮播效果

刚刚学了Jquery,写了一个简单的图片滑动,但不是完成品. <!DOCTYPE html> <meta content="text/html" charset="utf-8"/><html><head> <title></title> <link href="css/lunbo.css" rel="stylesheet"/> <scri