京东轮播器的代码 HTML 和 CSS
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>模拟JD商城轮播图</title>
<style type="text/css">
/*banner图锟斤拷始*/
#container {
width: 980px;
height: 400px;
/* border:3px solid red;*/
margin: 20px auto;
overflow: hidden;
position: relative;
}
#container #list {
width: 6860px;
height: 400px;
position: absolute;
z-index: 1;
transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out; /* Firefox 4 */
-webkit-transition: all 0.5s ease-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-out; /* Opera */
background-color: #dedab4;
}
#container #list img {
width: 980px;
border:none;
height: 400px;
float: left;
}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2000;
top: 200px;
background-color: RGBA(0, 0, 0, .3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: none;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2000;
bottom: 10px;
left: 465px;
}
#buttons span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: RGBA(0, 0, 0, .3);
margin-right: 5px;
}
#buttons .on {
background: #fff;
}
.sp-arrow.sp-a1{
left: 15px;
display: block;
background-position: top left;
}
.sp-arrow.sp-a2{
right: 15px;
display: block;
background-position: top right;
}
.sp-arrow {
position: absolute;
top: 50%;
width: 28px;
height: 38px;
margin-top: -19px;
display: none;
opacity: 0.8;
cursor: pointer;
z-index: 1000;
background: transparent url(arrows.png) no-repeat;
-webkit-transition: opacity linear 0.3s;
-moz-transition: opacity linear 0.3s;
-o-transition: opacity linear 0.3s;
-ms-transition: opacity linear 0.3s;
transition: opacity linear 0.3s;
}
</style>
<script>
window.οnlοad=function(){ //JS 禁止鼠标右键出现菜单下拉
document.οncοntextmenu=function(){
return false;
}
}
</script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="container">
<div id="list" style="left:-980px">
<a href="#">
<img src=''/>
</a>
<a href="#">
<img src='images/xiao_shen_ge1.jpg'/>
</a>
<a href="#">
<img src='images/xiao_shen_ge2.jpg'/>
</a>
<a href="#">
<img src='images/xiao_shen_ge3.jpg'/>
</a>
<a href="#">
<img src='images/xiao_shen_ge4.jpg'/>
</a>
<a href="#">
<img src='images/xiao_shen_ge5.jpg'/>
</a>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:void(0);" id="prev" class="arrow"><</a>
<a href="javascript:void(0);" id="next" class="arrow">></a>
<span id="prevPicture" class="sp-arrow sp-a1" ></span>
<span id="nextPicture" class="sp-arrow sp-a2" ></span>
</div>
</body>
</html>
JS 代码:slider.js
/*
* 代码托管到了CSDN:http://download.csdn.net/detail/qq_18600061/9507929
*
* JS 实现京东轮播图片。(此插件:下载就能用,谢谢...)
* 今天逛京东看着JD上面的轮播图挺有意思,于是自己就构思想实现一下,
* 结果弄了一整天的时间,还是挺有意思,但是写这玩意,头脑必须时刻清晰,要不就容易绕晕。
* 不知道代码是否还可以有优化的地方没有,希望大神来指点。
*/
$(function () {
slider(980);
});
function slider(width){
var container = document.getElementById("container");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById("prev");
var next = document .getElementById("next");
var prevPicture = document .getElementById("prevPicture");
var nextPicture = document .getElementById("nextPicture");
var index = 1;
var timer;
var interval = 1000;
var len = buttons.length;
//切换 下一个按钮
function showButton(){
for (var i = 0; i < len; i++) {
if (buttons[i].className == "on" ){
buttons[i].className = "";
break;
}
}
buttons[index-1].className = "on";
}
//核心代码。 切换图片
function animate(offset){
var go = function(){
if(index==len+1) {
index = len-1;
flag=false;
setTimeout(go, interval);
}
if (index == 1) {
list.style.left = Math.abs(0)+"px"
flag=true;
index = 1;
}
}
go();
if(!flag){
offset=Math.abs(offset);
}
console.info("index="+index+" offset="+offset);
var newLeft = parseInt(list.style.left);
list.style.left = newLeft + offset +"px";
}
//定时播放
function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, interval);
}
//停止定时器
function stop() {
clearTimeout(timer);
}
//给容器绑定鼠标移进、移出事件
container.onmouseover = stop;
container.onmouseout = play;
//程序启动 方法。
play();
//开关 true(顺着切换)、false(逆着切换)
var flag=true;
next.onclick = function(){
//解决 prevPicture按钮 轮播Bug
if(index==1){
flag=true;
}
if(flag){
index++;
}else{
index--;
}
animate(-width);
showButton();
}
prev.onclick = function(){
index--;
animate(width);
showButton();
}
//给按钮绑定事件
for (var i = 0; i < len; i++) {
buttons[i].onclick = function () {
if(this.className == 'on')
return;
var myIndex = parseInt(this.getAttribute('index'));
var offset = -width * (myIndex - (index==1?0:index));
if(!flag){
offset=Math.abs(offset)
}
animate(offset);
index = myIndex;
showButton();
}
}
/*
* 上一张
* 下面偷了懒,用了JQuery的语法。
* $("#buttons span[class=on]").attr("index");
* 也可以改成JS 语法。这为了方便所以没有改。
*/
prevPicture.οnclick=function(){
var _index = $("#buttons span[class=on]").attr("index");
var prev = parseInt(_index);
flag=false;
if(prev==1){
prev=5;
//list.style.left = -4900+"px";
list.style.left = -(len*width)+"px";
}else{
prev--;
animate(width);
}
index = prev;
showButton();
}
//下一张
nextPicture.οnclick=function(){
var _index = $("#buttons span[class=on]").attr("index");
var next = parseInt(_index)+1;
flag=true;
if(next==len+1){
next=1;
}
index = next;
animate(-width);
showButton();
}
}