jq轮播图支持ie7
Posted fstgshow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq轮播图支持ie7相关的知识，希望对你有一定的参考价值。
用过一些轮播框架 但是有的不正常ie7 所以就自己找资料写了一个 代码不粗糙的
<!DOCTYPE html>
<html>
<head>
<title>轮播图支持ie7依赖jq</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
.slider_main{position: relative;overflow: hidden;}
.slider_ul{height: 100%;margin:0;padding:0;}
.slider_ul li{float: left;overflow: hidden;}
.slider_ulli a{width: 100%;height: 100%;display: block;}
.slider_ul li a img{width: 100%;}
.slider-bar{position: absolute;bottom: 15px;right: 10px;z-index:199;}
.slider-bar li{border-radius:50%;background: #fff;display: block;float: left;width: 16px;height: 16px;margin: 0px 8px;cursor:pointer;}
.slider-bar li.pink_li{background: #666;}
.dleft{position: absolute;top: 50%;left: 10px;z-index:199;width: 20px;height: 20px;background: red;}
.dright{position: absolute;top: 50%;right: 10px;z-index:199;width: 20px;height: 20px;background: red;}
</style>
<script>
//轮播图框架开始
function sliderInit(obj){
console.log(obj);
var sliderContentDiv="#"+obj.idD;//轮播图的容器div的id
var sliderContentUl="#"+obj.idU;//轮播图图片的容器ul的id
var sliderContentUBar="#"+obj.idUBar;//底部圆点导航容器ul的id
var sliderContentDLeft="#"+obj.idLeft;//左翻页id
var sliderContentDRight="#"+obj.idRight;//右翻页id
var slider_ulWidth=obj.width;//轮播图容器的宽
var slider_ulHeight=obj.height;//轮播图容器的高
var sliderLoop=obj.loop;
var sliderTime=obj.time;//轮播时间毫秒
var liNum=obj.Num;//图片个数
$(sliderContentDiv).css({
width:slider_ulWidth+"px",
height:slider_ulHeight+"px"
});
$(sliderContentUl).css(‘width‘,liNum*100+‘%‘);
//$(sliderContentUBar).html(‘<li class="pink_li"></li>‘);
for(var j=0;j<liNum-1;j++){
$(sliderContentUBar).append(‘<li></li>‘);
}
var interval ;
banner();//轮播图
function banner(){
var interval ;
var marginLeft;
var slider = $(sliderContentUl);
var ul = document.getElementById(obj.idUBar);
var li = ul.getElementsByTagName(‘li‘);
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick = function(){
clearInterval(interval);
$(sliderContentUBar).find("li").removeClass("pink_li");
$(this).addClass("pink_li");
marginLeft = -this.index*100+"%";
slider.animate({marginLeft:marginLeft});
if (sliderLoop==false) {
clearInterval(interval);
}else{
interval = setInterval(bannerMain,sliderTime);
}
}
};
function bannerMain(){
//var length = $("#slider_ul0 li").length;
var length = $(sliderContentUl).find("li").length;
var width = $(sliderContentUl).css("width");
//var btn = $("#slider-bar li");
var btn = $(sliderContentUBar).find("li");
var num;
marginLeft = slider.css("marginLeft");
if (parseInt(marginLeft) == -parseInt(width)*(liNum-1)/liNum) {
slider.animate({marginLeft:"0%"});
btn.removeClass("pink_li");
btn.eq(0).addClass("pink_li");
}
else{
num = -parseInt(marginLeft)/slider_ulWidth+1;
btn.removeClass("pink_li");
btn.eq(num).addClass("pink_li");
slider.animate({marginLeft:"+=-100%"});
}
}
if (sliderLoop==false) {
clearInterval(interval);
}else{
interval = setInterval(bannerMain,sliderTime);
}
return bannerMain;
}
//左翻页轮播
$(sliderContentDLeft).click(function(){
clearInterval(interval);
var picMarginLeft = $(sliderContentUl).css("margin-left");
var liIndex=Math.abs(parseInt(picMarginLeft)/slider_ulWidth);
var lMargin=parseInt(picMarginLeft)+slider_ulWidth;
if (liIndex==0) {
$(sliderContentUl).animate({marginLeft:-(liNum-1)*slider_ulWidth+"px"});
$(sliderContentUBar).children("li").eq(liIndex).removeClass("pink_li");
$(sliderContentUBar).children("li").last().addClass("pink_li");
}else{
$(sliderContentUl).animate({marginLeft:lMargin+"px"});
$(sliderContentUBar).children("li").eq(liIndex).removeClass("pink_li");
$(sliderContentUBar).children("li").eq(liIndex).prev().addClass("pink_li");
}
})
//右翻页轮播
$(sliderContentDRight).click(function(){
clearInterval(interval);
var picMarginLeft = $(sliderContentUl).css("margin-left");
var liIndex=Math.abs(parseInt(picMarginLeft)/slider_ulWidth);
var lMargin=parseInt(picMarginLeft)+(-slider_ulWidth);
if (liIndex==liNum-1) {
$(sliderContentUl).animate({marginLeft:0+"px"});
$(sliderContentUBar).children("li").eq(liIndex).removeClass("pink_li");
$(sliderContentUBar).children("li").first().addClass("pink_li");
}else{
$(sliderContentUl).animate({marginLeft:lMargin+"px"});
$(sliderContentUBar).children("li").eq(liIndex).removeClass("pink_li");
$(sliderContentUBar).children("li").eq(liIndex).next().addClass("pink_li");
}
})
}
//轮播图框架结束
$(function(){
sliderInit({
‘idD‘:‘slider_main0‘,//轮播图的容器div的id
‘idU‘:‘slider_ul0‘,//轮播图图片的容器ul的id
‘idUBar‘:‘slider-bar10‘,//底部圆点导航容器ul的id
‘idLeft‘:‘dleft‘,//左边翻页按钮元素id
‘idRight‘:‘dright‘,//右边翻页按钮元素id
‘width‘:690,//轮播图宽度
‘height‘:340,//轮播图高度
‘loop‘:false,//是否自动轮播：false是不自动，true是自动轮播
‘time‘:2000,//自动轮播时间，单位毫秒，不自动轮播也需要设置
‘Num‘:4//轮播图片个数
});
})
</script>
</head>
<body>
<!--轮播图-->
<div class="slider_main" id="slider_main0">
<ul class="slider_ul" id="slider_ul0">
<li>
<img src="" />
</li>
<li>
<a href="" >
<img src="" />
</a>
</li>
<li>
<a href="" >
<img src="" />
</a>
</li>
<li>
<a href="" >
<img src="" />
</a>
</li>
</ul>
<ul class="slider-bar" id="slider-bar10">
<li class="pink_li"></li>
</ul>
<div class="dleft" id="dleft">left</div>
<div class="dright" id="dright">right</div>
</div>
<!--轮播图-->
</body>
</html>
以上是页面代码，写图片路径就行，因为在js代码里面 我是循环加了li 所以轮播的结构得和我写的html一样，这个也是不完善的地方，导致html不灵活，
我感觉完整的应该是用js都创建那些元素，在init方法里面配置各个属性最好了，这样就相当灵活了，这个是我的写法，本来也是想着写成swiper哪样的方法 但是技术不好 写不完整哈哈 如果有大神写好了 有时间就发我一个完整的 多谢了 小弟十分感激！
以上是关于jq轮播图支持ie7的主要内容，如果未能解决你的问题，请参考以下文章