transform輪播図の書き方
画像の幅は任意で、高さは任意で、ホイールスピードは任意に設定します.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
color: #333;
}
#container {
width: 720px;
height: 500px;
overflow: hidden;
position: relative;
}
#list {
overflow: hidden;
position: absolute;
}
#list a {
overflow: hidden;
display: block;
float: left;
}
#list img {
width: 720px;
height: 500px;
float: left;
}
#spanlist {
position: absolute;
z-index: 999;
bottom: 15px;
left: 50%;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
#spanlist span:last-child{
margin-right: 0px;
}
.span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
float: left;
margin-right: 10px;
}
.span1 {
width: 30px;
height: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin-right: 10px;
}
.spanbright {
width: 30px;
height: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin-right: 10px;
}
.left {
font-size: 80px;
line-height: 80px;
font-weight: bolder;
z-index: 2;
position: absolute;
left: 10px;
top: 50%;
margin-top: -48px;
color: rgba(255, 255, 255, 0.5);
display:none;
}
.right {
font-size: 80px;
z-index: 2;
position: absolute;
right: 10px;
top: 50%;
line-height: 80px;
height: 80px;
margin-top: -48px;
color: rgba(255, 255, 255, 0.5);
font-weight: bolder;
display:none;
}
style>
<body>
<div id="container" onmouseover="stop()" onmouseout="play()">
<div id="list">
<a><img src="http://www.51honglingjin.com/template/zvis_app_h5/touch/style/images/1.jpg">a>
<a><img src="http://www.51honglingjin.com/template/zvis_app_h5/touch/style/images/2.jpg">a>
<a><img src="http://www.51honglingjin.com/template/zvis_app_h5/touch/style/images/3.jpg">a>
<a><img src="http://www.51honglingjin.com/template/zvis_app_h5/touch/style/images/4.jpg">a>
<a><img src="http://www.51honglingjin.com/template/zvis_app_h5/touch/style/images/5.jpg">a>
<a><img src="http://www.51honglingjin.com/template/zvis_app_h5/touch/style/images/6.jpg">a>
div>
<div id="spanlist">
div>
<a href="javascript:;" id="left" class="left">
<a>
<a href="javascript:;" id="right" class="right">>a>
div>
<script type="text/javascript">
function $$(id) { //
return document.getElementById(id);
}
script>
<script type="text/javascript">
var list = $$('list');
var listLength = $$('list').getElementsByTagName('a').length; //
var imgWidth = list.getElementsByTagName('a')[0].offsetWidth; //
list.style.width = listLength * imgWidth + "px"; //
var widthAll = listLength * imgWidth + "px";
var spanlist = $$('spanlist') //
for (var i = 0; i < listLength; i++) { // ， span
spanlist.appendChild(document.createElement("span"));
}
var spanlists = spanlist.getElementsByTagName('span') // span
for (var i = 0; i < listLength; i++) {
spanlists[i].className = "span"; // span， span css
spanlists[i].setAttribute("index", i) // span index(0,1,2,3... -1)
}
spanlists[0].className = "span1"; // span
// spanlist ，
var spanlistWidth = spanlist.offsetWidth / 2; // spanlist 2
spanlist.style.marginLeft = "-" + spanlistWidth + "px";
// left
var t = 1; //
rs = setInterval('rightsmooth()', 1);// re
clearInterval(rs) //
function autoswitch(){
t += 1;
rs = setInterval('rightsmooth()', 1);
}
timer = setInterval('autoswitch()', 2000); // 2 autoswitch
//
function rightsmooth() {
clearInterval(rs)
if (t>listLength) {
list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+0*imgWidth+"px);width:"+widthAll;
t=1;
}else{
list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+(t-1)*imgWidth+"px);width:"+widthAll;
}
for (var j = 0; j < spanlists.length; j++) { // ，
spanlists[j].setAttribute('class', 'span');
}
spanlists[t - 1].setAttribute('class', 'spanbright');
console.log(t)
}
//
function leftsmooth() {
console.log(t)
if (t == 0) {
list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+(listLength-1)*imgWidth+"px);width:"+widthAll;
t=listLength
}else{
list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+(t-1)*imgWidth+"px);width:"+widthAll;
}
for (var j = 0; j < spanlists.length; j++) { // ，
spanlists[j].setAttribute('class', 'span');
}
spanlists[t - 1].setAttribute('class', 'spanbright');
}
for (var i = 0; i < spanlists.length; i++) { // span
spanlists[i].onmouseover = function() {
for (var j = 0; j < spanlists.length; j++) { // span
spanlists[j].setAttribute('class', 'span');
}
var myIndex = parseInt(this.getAttribute("index")); // index
spanlists[myIndex].setAttribute('class', 'spanbright'); //
list.style.left = "-" + imgWidth * myIndex + "px"; //
t = myIndex + 1; // （ t 1， 1)
console.log(t)
}
}
document.addEventListener('visibilitychange', function() { //
if (document.visibilityState == 'hidden') { //
clearInterval(timer);
} else {
timer = setInterval('autoswitch()', 2000);
}
})
function stop() {
clearInterval(timer);
$$('left').style.display = "block";
$$('right').style.display = "block";
}
function play() {
$$('left').style.display = "none";
$$('right').style.display = "none";
timer = setInterval('autoswitch()', 2000); // 2 autoswitch
}
$$('left').onclick = function() { // ，
t = t - 1;
leftsmooth()
}
$$('right').onclick = function() { // ，
t += 1;
rightsmooth();
}
script>
body>
html>