css3如何通过js触发播放

之前为大家带来过轮播图的写法 ,因为里面用到了运动框架所以用起来还是很多不懂的,今天优化了一下写法,并且增加了左右切换

先看下html结构

<ul>

</ul>

</div>

</div>

</div>

是干什么用的上面都有注释

CSS样式

*{ margin: 0; padding: 0; text-decoration: none;}

body { padding: 20px;}

#container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}/**大盒子**/

#list { height: 400px; position: absolute; z-index: 1;transition: all 1s;}/**过渡属性,没考虑兼容**/

#list ul li{width: 600px;list-style: none;float: left;}

#list img { min-width: 100%;}

#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}

#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}

#buttons .on { background: orangered;}

.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: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}

.arrow:hover { background-color: RGBA(0,0,0,.7);}

#container:hover .arrow { display: block;}

#prev { left: 20px;}

#next { right: 20px;}

</style>

完成后的效果图

下面开始编写js脚本

老规矩先把想要的东西拿到手

var container = document.getElementById('container');//获取大盒子

var list = document.getElementById('list');//获取第二层盒子

var ul=li('ul')[0];//获取ul

var images=ul.getElementsByTagName('img');//获取img

var buttons = document.getElementById('buttons').getElementsByTagName('span');//获取好控制的span

var prev = document.getElementById('prev');//上一张

var next = document.getElementById('next');//下一张

var img=600;

ul.=images.length*img+'px';//设置ul的宽度

先来左右切换的效果

next.onclick=function(){

li parseIn)-600+'px';

}

(){

li parseIn)+600+'px';

}

//代码重复而且会有留白,可以封装成一个函数

改进下

function animate(pare){

li parseIn)+pare+'px';

}

next.onclick=function(){

if(li= -2400 + 'px'){

li0 + 'px';

}

animate(-600);

}

(){

if(li= 0 + 'px'){

li -2400 + 'px';

}

animate(600);

}

下面开始做小圆点变色和控制图片

依旧是写在一个函数里

也可以切换了

move();

function move(){

for(var i=0;i<bu;i++){

buttons[i].index=i;

buttons[i].onclick= function () {

for(var i=0;i<bu;i++){

buttons[i].className=""

}

buttons[].className="on";

li-600*+"px";//控制切换

}

自动播放

play();

function play(){

var timer=setInterval(function(){

next.onclick();

},2000)

}

剩下就是左右切换下面小圆点跟随了

需要给个变量

var index =1;

function setOut(){

for(var i=0;i<bu;i++){

buttons[i].className=''";

break;

}

buttons[index-1].className="on"

}

分别在作于里面调用下这个函数

下面是全部代码

<!DOCTYPE html>

<html>

<head>

*{ margin: 0; padding: 0; text-decoration: none;}

body { padding: 20px;}

#container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}

#list { height: 400px; position: absolute; z-index: 1;transition: all 1s;}

#list ul li{width: 600px;list-style: none;float: left;}

#list img { min-width: 100%;}

#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}

#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}

#buttons .on { background: orangered;}

.arrow:hover { background-color: RGBA(0,0,0,.7);}

#container:hover .arrow { display: block;}

#prev { left: 20px;}

#next { right: 20px;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

window.onload=function(){

var container = document.getElementById('container');

var list = document.getElementById('list');

var ul = li('ul')[0];

var images = ul.getElementsByTagName('img');

var buttons = document.getElementById('buttons').getElementsByTagName('span');

var prev = document.getElementById('prev');

var next = document.getElementById('next');

var img = 600;

var index = 1

ul. = images.length * img + 'px';

function setOut() {

for (var i = 0; i < bu; i++) {

if (buttons[i].className == 'on') {

buttons[i].className = ''

break;

}

buttons[index - 1].className = 'on'

}

function animate(pare){

li parseIn)+pare+'px';

}

next.onclick=function(){

if(li= -2400 + 'px'){

li0 + 'px';

}

if(index==bu){

index=1;

}else{

index++;

}

animate(-600);

setOut();

}

(){

if(li= 0 + 'px'){

li -2400 + 'px';

}

if(index==1){

index=bu;

}else{

index--;

}

animate(600);

setOut();

}

move();

function move(){

for(var i=0;i<bu;i++){

buttons[i].index=i;

buttons[i].onclick= function () {

for(var i=0;i<bu;i++){

buttons[i].className=""

}

buttons[].className="on";

li-600*+"px";

}

paly();

function paly(){

var timer=setInterval(function () {

next.onclick();

},2000)

}

</script>

</body>

</html>

“css3如何通过js触发播放”边界阅读

责任编辑: 鲁达

“css3如何通过js触发播放”边界阅读