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哪樣的方法 但是技術不好 寫不完整哈哈 如果有大神寫好了 有時間就發我一個完整的 多謝了 小弟十分感激!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: