jquery手写轮播图_用 jQuery 手写轮播图

轮播图 - jQuery 版本

}ul{list-style:none;

}

/**

* 轮播图布局样式*/

/**

* 0、轮播图容器*/#container{position:relative;width:600px;height:400px;margin:50px auto;overflow:hidden;

}

/**

* 1、图片(模拟)*/ul#imgs{position:absolute;width:calc(600px * 7);left:-600px;

}ul#imgs li{float:left;width:600px;height:400px;background-color:#42B983;color:white;text-align:center;line-height:400px;font-size:100px;

}#imgs li:nth-child(odd){

/*模拟图片*/

/*background-color: #9ACD32;*/

}

/**

* 2、前后翻页按钮*/#prev,#next{position:absolute;top:calc(50% - 15px);;

width:40px;height:30px;background-color:yellow;border:none;font-weight:bold;font-size:16px;cursor:pointer;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;

}#prev,#next:focus{outline:none;

}#prev{left:10px;

}#next{right:10px;

}

/**

* 3、小圆点定点翻页*/ul#index{position:absolute;top:360px;left:calc(50% - 55px);height:12px;

}ul#index li{float:left;height:12px;width:12px;margin:0 5px;border-radius:50%;background-color:#800080;opacity:.4;cursor:pointer;

}ul#index li.active{opacity:1;

}

5