http://www.xinlizhiyouni.com/.
Scroll bars appear when using Google browser, which I think is caused by the picture rotation function.
there is no error in other browsers. May I ask what caused it? thank you
<div class="carousel" id="carousel">
<div class="imageList">
<ul>
<li><a href="-sharp"><img class="carousel_images" src="images/top640_1.jpg"></a></li>
<li><a href="-sharp"><img class="carousel_images" src="images/top640_2.jpg"></a></li>
<li><a href="-sharp"><img class="carousel_images" src="images/top640_3.jpg"></a></li>
<li><a href="-sharp"><img class="carousel_images" src="images/top640_4.jpg"></a></li>
<li><a href="-sharp"><img class="carousel_images" src="images/top640_5.jpg"></a></li>
</ul>
</div>
<div id="previousImage"></div>
<div id="nextImage"></div>
</div>
.imageList {
position: relative;
}
.carousel{
width:100%;
overflow: hidden;
border:1px solid black;
height: 350px;
}
.carousel ul{
list-style: none;
}
.carousel ul li{
position: absolute;
top:0;
left:0;
width: 100%;
}
.carousel ul li img{
width:100%;
}
.carousel_images {
height: 350px;
}
@media only screen and (max-width: 640px) {
.carousel_images {
height: 250px;
}
.carousel{
height: 200px;
margin-top: 0px;
}
}
var carousel = document.getElementById("carousel");
var imageLis = document.querySelectorAll("-sharpcarousel ul li")
//
var idx=2;
var next=3;
var prev=1;
//
var previousImage = document.getElementById("previousImage");
//
var nextImage = document.getElementById("nextImage");
var windowWidth = 0;
//
init();
//
window.onreset = init;
function init() {
//,,
windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
//windowWidth / height = 200 /130;
var carouselFirst = 200 / 130 ;
//carousel.style.height = windowWidth / carouselFirst + "px";
// carousel.style.height = 200 + "px";
//li
for (var i=0; i<imageLis.length;iPP){
// transform 2D 3D
imageLis[i].style.webkitTransform = "translateX(" + windowWidth + "px)";
//imageLis[i].style.height = 250 + "px";
}
//,
noneTransition();
//,,
changex();
}
function noneTransition() {
imageLis[idx].style.transition = "none";
imageLis[next].style.transition = "none";
imageLis[prev].style.transition = "none";
}
function changex() {
imageLis[idx].style.webkitTransform = "translateX(0px)";
imageLis[next].style.webkitTransform = "translateX(" + windowWidth + "px)";
imageLis[prev].style.webkitTransform = "translateX(" + -windowWidth + "px)";
}
//
carousel.addEventListener("touchstart",touchstartHandle,false);
carousel.addEventListener("touchmove",touchmoveHandle,false);
carousel.addEventListener("touchend",touchendHandle,false);
//
var deltaX = 0;
//
var startX = 0;
//
var startTime = 0;
function touchstartHandle(event) {
event.preventDefault();
//,1,
if (event.touches.length > 1){
return;
}
//
deltaX = event.touches[0].clientX;
//
startX = event.touches[0].clientX;
//
noneTransition();
//
changex();
//
startTime = new Date();
}
function touchmoveHandle() {
event.preventDefault();
//
if (event.touches.length > 1){
return;
}
//
var clientX = event.touches[0].clientX - deltaX;
//
imageLis[idx].style.webkitTransform = "translateX(" + clientX + "px)";
imageLis[next].style.webkitTransform = "translateX(" + (windowWidth + clientX) + "px)";
imageLis[prev].style.webkitTransform = "translateX(" + (-windowWidth + clientX) + "px)";
}
function touchendHandle(event) {
event.preventDefault();
//
//
var distence = event.changedTouches[0].clientX - startX;
//
var time = new Date() - startTime;
console.log(distence,time);
// ,,
//50030
//,,
if (distence >= windowWidth / 2 || (distence > 30 && time < 500)){
console.log("");
//
/*perv=1 idx=2 next=3
* -->
* prev=0 inx=1 next=2
*
* */
next = idx;
idx = prev;
prev--;
if (prev < 0){
prev = 4;
}
//,
//
imageLis[idx].style.transition = "all 0.3s ease 0s";
imageLis[next].style.transition = "all 0.3s ease 0s";
//
imageLis[idx].style.webkitTransform = "translateX(0px)";
imageLis[next].style.webkitTransform = "translateX(" + windowWidth + "px)";
} else if (distence < -windowWidth / 2 || (distence < -30 && time < 500)){
showNext();
console.log("")
} else{
console.log("")
//,
imageLis[idx].style.transition = "all 0.3s ease 0s";
imageLis[prev].style.transition = "all 0.3s ease 0s";
imageLis[next].style.transition = "all 0.3s ease 0s";
//
changex();
}
}
function showNext() {
/*
* prev=1 idx=2 next=3;
* -->
* prev=2 idx=3 next=4
* */
prev=idx;
idx=next;
nextPP;
if (next > 4){
next = 0;
}
//next
imageLis[next].style.transition = "none";
imageLis[next].style.webkitTransform = "translateX("+ windowWidth + "px)";
imageLis[idx].style.transition = "all 0.3s ease 0s";
imageLis[prev].style.transition = "all 0.3s ease 0s";
imageLis[idx].style.webkitTransform = "translateX(0px)";
imageLis[prev].style.webkitTransform = "translateX(" + -windowWidth + "px)";
}
function autoPlay(){
var timer=setInterval(function(){
showNext()
},2000)
}
autoPlay();