效果图如下：
白色的字是外界输入的。点击图片能跳转到相应链接，点击白色的进度条可以跳转到相应图片，图片从右往左轮播，鼠标放上图片或者进度条暂停。
页面代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/wui_carousel.css" type="text/css"></link>
<script type="text/javascript" src="wui/js/jquery.js"></script>
<script type="text/javascript" src="js/wui_carousel.js"></script>
<title>CITEK城智云平台-智慧助力生活,科技创造未来</title>
<script type="text/javascript" >
var imgLinkList = [["img/home_head.png","hello world","java","index.html"],
["img/home_parking.png","back","","views_customer/login/login.jsp"]];
这个是图片参数的地址，二维数组，一个数组里包含的信息为一个图片，包含一个页面的图片链接，第一行字，第二行字和图片跳转的链接地址。如果不需要，就用“”就行。
$(function(){
var wuiCarousel = WuiCarousel.createNew("gw_zzsc", imgLinkList); //使用
});
</script>
</head>
<body>
<!- class 掌控样式，id保证它独一无二 ->
<div class="gw_zzsc" id="gw_zzsc">
</body>
js控件的css代码（wui_carousel.css）如下：
.fix_flash,
.img_flash {
list-style:none;
margin:0px;
padding:0px;
position:absolute;
top: 0px;
float:left;
overflow: scroll;
min-width: 1200px;
height :350px;
min-height:269.15px;
}
.gw_zzsc {
position:relative;
width:100%;
overflow:hidden;
z-index:0;
_z-index:0;
height :350px;
min-width: 1200px;
min-height:269.15px;
margin:0;
padding:0;
}
.gw_zzsc ul.fix_flash {
overflow:hidden;
min-height:269.15px;
position:absolute;
min-width:1200px;
}
.gw_zzsc ul.fix_flash li {
width:100%;
min-height:269.15px;
overflow:hidden;
float:left;
display:inline;
cursor:pointer;
min-width:1200px;
}
.gw_zzsc_center {
margin:0px auto;
position:absolute;
overflow:hidden;
width:170px;
top:330px;
height:50px;
z-index: 99999;
margin:0;
padding:0;
}
.gw_zzsc_center .gw_zzsc_flash_v {
width:96px;
height:54px;
padding:2px 5px 12px 3px;
overflow:hidden;
position:absolute;
left:122px;
z-index: 99999;
}
.gw_zzsc_flash_s {
height:5px;
bottom:20px;
position:absolute;
text-align:center;
z-index: 99999;
}
.gw_zzsc_flash_s .banner_smallArea {
width:100%;
z-index: 99999;
}
.gw_zzsc_flash_s .gw_zzsc_sele {
float:left;
display:inline;
width:32px;
height:4px;
margin-left:7px;
background:white;
opacity:0.3;
line-height:5px;
overflow:hidden;
cursor:pointer;
z-index: 99999;
}
.gw_zzsc_flash_s .gw_zzsc_over {
background: #F8F8F8;
opacity:0.8;
z-index: 99999;
}
.show_font_h {
font-size:34px;
color:white;
width: 1200px;
white-space: nowrap;
margin: 0 auto;
}
.show_font_s {
font-size:20px;
color:white;
width: 1200px;
white-space: nowrap;
margin: 0 auto;
}
.fix_flash {
width:100%;
height:410px;
min-width:1200px;
}
js代码（wui_carousel.js）如下：
var WuiCarousel = {
createNew : function(indexId,imgLinkList){
var $this = {};
var objIndex = null;
$this.recordCount = 0;
$this.imgLinkList = imgLinkList;
$this.imgLinkLen = imgLinkList.length;
$this.init = function(){
objIndex = $("#"+indexId);
createIndexHtml();
/* 绑定页面点击跳转事件 */
objIndex.find("ul li").click(function(e){
var value = objIndex.find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele.gw_zzsc_over").attr("number");
var index = value .lastIndexOf("_");
num = value .substring(index + 1, value .length);
window.location.href = $this.imgLinkList[num][3];
})
$this.cssChange();
$this.imgLoop();
}
/**
* 拼接html
*/
createIndexHtml= function(){
/* 框架 */
objIndex.append("<ul class=\"fix_flash\"></ul><div class='gw_zzsc_center'><div class='gw_zzsc_flash_s'></div></div>");
/* 图片切换区域html */
for ( var i = 0; i <$this.imgLinkLen; i++) {
objIndex.find(".fix_flash").append("<li class=\"img_flash\" style=\"background: url("+$this.imgLinkList[i][0]+") 100% 100%;\">" +
"<div class=\"show_font_h\">"+$this.imgLinkList[i][1]+"</div><div class=\"show_font_s\">"+$this.imgLinkList[i][2]+"</div></li>");
/* 进度条切换区域html */
objIndex.find(".gw_zzsc_center .gw_zzsc_flash_s").append("<div class='gw_zzsc_sele' number=" + indexId +"_" + i + " οnclick='getNumber(this)'></div>");
objIndex.find("ul").find("li:eq("+i+")").css("left",$("body").width()*i + "px");
}
}
/**
* 自适应样式
*/
$this.cssChange = function() {
objIndex.css("height",$("body").width()*0.209375 +"px");
objIndex.find("ul li").css({"height":$("body").width()*0.209375 +"px","width":$("body").width() +"px","background-size":"cover"});
objIndex.find(".gw_zzsc_center").css({"left":$("body").width()*0.5 - 85 +"px","top":$("body").width()*0.18062 +"px"});
objIndex.find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele").eq(0).addClass("gw_zzsc_over");
objIndex.find(".fix_flash").css("height",$("body").width()*0.209375 +"px");
var leftSize = $("body").width()*0.14071;
objIndex.find("ul li .show_font_h").css({"margin-left":leftSize +"px","margin-top":$("body").width()*0.07 +"px","font-size":$("body").width()*0.0202 + "px"});
objIndex.find("ul li .show_font_s").css({"margin-left":leftSize +"px","margin-top":$("body").width()*0.01 +"px","font-size":$("body").width()*0.0110 + "px"});
objIndex.attr("click",'off'); //鼠标是否在图片上：否
}
/**
* 生成图片循环
*/
$this.imgLoop = function() {
setInterval(function(){ //定时5秒执行一次
$this.isChange();
}, 5000)
}
/**
* 判断鼠标是否在图片上，是否要切换图片
*/
$this.isChange = function() {
objIndex.bind('mouseover', function (event) {
objIndex.attr("click",'on'); //鼠标在图片上的状态
});
objIndex.bind('mouseout', function (event) {
objIndex.attr("click",'off'); //鼠标离开图片的状态
});
var clickValue = objIndex.attr("click");
if ("off"== clickValue) { //判断状态，不在图片上就调用切换图片的代码
$this.changeImg();
}
}
/**
* 随着时间推移切换图片
*/
$this.changeImg = function() {
/* 当轮播的图片只有两张时把左边隐藏的图片放到右边去 */
if ($this.imgLinkLen == 2) {
for (i=0; i<$this.imgLinkLen; i++){
var left = objIndex.find("ul li:eq("+i+")").css("left");
var num = parseInt(left.substring(0,left.length-2));
if (num < 0) {
res = $("body").width();
objIndex.find("ul li:eq("+i +")").animate({"left" :res +"px" },0);
}
}
}
/* 通过改变所有图片的绝对定位来切换大图 */
for (j=0; j<$this.imgLinkLen; j++){
var left = objIndex.find("ul li:eq("+j+")").css("left");
var num = parseInt(left.substring(0,left.length-2)); // 获取当前图片的左边绝对定位
var res = 0;
if (num < 0) { // 如果图片的左定位已经 在页面看不到的左边了 es = $("body").width()*($this.imgLinkLen - 2); // 就给它加上两个图片宽度到右边去 objIndex.find("ul li:eq("+j +")").animate({"left" :res +"px" },0); // 动画效果：0秒把图片从当前位置移到右边
} else {
res = num - $("body").width(); // 给当前位置图片往左挪一格
objIndex.find("ul li:eq("+j+")").animate({"left" :res +"px" },1000); // 动画效果：1秒移到指定位置
}
/* 切换小图标（通过给div添加和删除指定的class再设置指定class样式来达到样式改变的效果） */
if (res == 0) {
objIndex.find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele").removeClass("gw_zzsc_over");
objIndex.find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele").eq(j).addClass("gw_zzsc_over");
}
}
}
/**
* 点击切换图片 （获取要显示的图片的位置再根据位置设置好所有图片的绝对定位）
*/
$this.checkNumber = function(i,id) {
var num = $("#" + id).find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele.gw_zzsc_over").attr("number");
for (j=0; j<$this.imgLinkLen; j++){
var leftNum = 0;
if (j < i) {
leftNum = $this.imgLinkLen - i + j;
} else {
leftNum = j - i;
}
var res = leftNum * $("body").width();
$("#" + id).find("ul li:eq("+j +")").animate({"left" :res +"px" },0);
}
· /* 设置当前显示的小图标 */
$("#" + id).find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele").removeClass("gw_zzsc_over");
$("#" + id).find(".gw_zzsc_center .gw_zzsc_flash_s .gw_zzsc_sele").eq(i).addClass("gw_zzsc_over");
}
/**
* 获取点击切换的图片编号
*/
getNumber = function(obj) {
var value = $(obj).attr("number"); // 获取点击的div里number属性的值
var index = value .lastIndexOf("_");
num = value .substring(index + 1, value .length); // 拆出拼接的小图标顺位
id = value .substring(0, index); // 拆出拼接的当前最外层div的id
$this.checkNumber(num,id);
}
/**** init ****/
$this.init(); // 初始化
return $this;
}
}
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
