前端开发小插件常用_轮播

前端开发 插件选择|前端开发 浏览器插件|网页轮播图前端开发工程师水平

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>picScroll</title>
<linkhref=”style/picScroll.css” rel=”stylesheet”>
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js”></script>
<script>
;
(function ($) {
varMove=function(conobj,ulobj,liobj,setting){
this.self =conobj;//获得容器
this.ulCon=ulobj;
this.picCon=liobj;//获得图片容器
this.picLen=this.picCon.length;//获得图片的数量
this.DefaultSetting={
“overflow”:”hidden”,
“float”:”left”,
“marginLeft”:”auto”,
“marginRight”:”auto”
};
this.setting=setting;
this.setSettingValue();//设置值
}
Move.prototype ={
//设置值
setSettingValue:function(){
this.self.css({
//设置
width: this.setting.width,
height: this.setting.height,
//默认
overflow: this.DefaultSetting.overflow,
marginLeft: this.DefaultSetting.marginLeft,
marginRight: this.DefaultSetting.marginRight
});
this.ulCon.css({
width: this.setting.picwidth * this.picLen //ul的宽度设置为图片的宽度乘以图片的数量
});
this.picCon.css({
width: this.setting.picwidth,
height: this.setting.picheight,
//默认
overflow: this.DefaultSetting.overflow,
float: this.DefaultSetting.float
});
},
//自动切换 参数time:切换时差
autoMove:function(time){
vari=1;
varobj=this.self;
varlen=this.picLen;
varpicWidth=this.setting.picwidth;
setTimeout(changePic,time);
functionchangePic(){
if (i==len-1) {
obj.animate({
scrollLeft: picWidth * i
},500).animate({
scrollLeft: 0
},0);
}else{
obj.animate({
scrollLeft: picWidth * i
},500);
}
if (i!=len-1) {
i++;
}else{
i=1;
}
setTimeout(changePic,time);
}
}
}
window[“Move”] = Move;
})(jquery)
</script>
<style>
*{
padding:0;
margin:0;
list-style-type:none;
}
</style>
</head>
<body>
<divid=”container”>
<divclass=”btn prev-btn”></div>
<ulclass=”ul-container”>
<liclass=”pic-container”>
<ahref=”#”>
<imgalt=”前端开发者” src=”http://ubmcmm.baidustatic.com/media/v1/0f0000JeC2adODK9Catlds.jpg”>
</a>
</li>
<liclass=”pic-container”>
<ahref=”#”>
<imgalt=”智能社” src=”http://ubmcmm.baidustatic.com/media/v1/0f000PLHky9rqu2h7ncy0s.jpg”>
</a>
</li>
<liclass=”pic-container”>
<ahref=”#”>
<imgalt=”极客学院” src=”http://ubmcmm.baidustatic.com/media/v1/0f000jtI4VTomJjsyV6mi6.jpg”>
</a>
</li>
<liclass=”pic-container”>
<ahref=”#”>
<imgalt=”网站前端开发” src=”http://ubmcmm.baidustatic.com/media/v1/0f000nTu6xUJA7Pfpq-CM0.jpg”>
</a>
</li>
<liclass=”pic-container”>
<ahref=”#”>
<imgalt=”网站前端开发” src=”http://ubmcmm.baidustatic.com/media/v1/0f0007iyjCsRkBDDFI8jpf.png”>
</a>
</li>
<liclass=”pic-container”>
<ahref=”#”>
<imgalt=”前端开发者” src=”http://ubmcmm.baidustatic.com/media/v1/0f0000JeC2adODK9Catlds.jpg”>
</a>
</li>
</ul>
<divclass=”btn next-btn”></div>
</div>
<divid=”container1″ style=”margin-top:100px”>
<divclass=”btn prev-btn”></div>
<ulclass=”ul-container1″>
<liclass=”pic-container1″>
<ahref=”#”>
<imgalt=”前端开发者” src=”http://ubmcmm.baidustatic.com/media/v1/0f0000JeC2adODK9Catlds.jpg”>
</a>
</li>
<liclass=”pic-container1″>
<ahref=”#”>
<imgalt=”智能社” src=”http://ubmcmm.baidustatic.com/media/v1/0f000PLHky9rqu2h7ncy0s.jpg”>
</a>
</li>
<liclass=”pic-container1″>
<ahref=”#”>
<imgalt=”极客学院” src=”http://ubmcmm.baidustatic.com/media/v1/0f000jtI4VTomJjsyV6mi6.jpg”>
</a>
</li>
<liclass=”pic-container1″>
<ahref=”#”>
<imgalt=”网站前端开发” src=”http://ubmcmm.baidustatic.com/media/v1/0f000nTu6xUJA7Pfpq-CM0.jpg”>
</a>
</li>
<liclass=”pic-container1″>
<ahref=”#”>
<imgalt=”网站前端开发” src=”http://ubmcmm.baidustatic.com/media/v1/0f0007iyjCsRkBDDFI8jpf.png”>
</a>
</li>
<liclass=”pic-container1″>
<ahref=”#”>
<imgalt=”前端开发者” src=”http://ubmcmm.baidustatic.com/media/v1/0f0000JeC2adODK9Catlds.jpg”>
</a>
</li>
</ul>
<divclass=”btn next-btn”></div>
</div>
<script type=”text/javascript”>
$(function(){
varsetting={
“width”:1200,//外容器可见的宽度
“height”:358,//外容器可见的高度
“picwidth”:1200,//图片容器的宽度
“picheight”:358,//图片容器的高度;
};
varconobj=$(“#container”);
varulobj=$(“.ul-container”);
varliobj=$(“.pic-container”)
vartext=newMove(conobj,ulobj,liobj,setting);
text.autoMove(1000);
varsetting1={
“width”:500,//外容器可见的宽度
“height”:358,//外容器可见的高度
“picwidth”:1200,//图片容器的宽度
“picheight”:358,//图片容器的高度;
};
varconobj1=$(“#container1”);
varulobj1=$(“.ul-container1”);
varliobj1=$(“.pic-container1”)
vartext=newMove(conobj1,ulobj1,liobj1,setting1);
text.autoMove(2000);
})
</script>
</body>
</html>
前端开发轮播代码|web前端开发流行插件|前端开发轮播插件
» 本文来自:前端开发者 » 《前端开发小插件常用_轮播》
» 本文链接地址:https://www.rokub.com/3605.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!