在谷歌和IE都無法實現卷滾效果，每個li的寬度只是自身內容的寬度
var container = $("#content");
? ? ? ? // 獲取第一個子節點
? ? ? ? var element = container.find(":first");
? ? ? ? // li頁面數量
? ? ? ? var slides = element.find("li");
? ? ? ? // 獲取容器尺寸
? ? ? ? var width = container.width();
? ? ? ? var height = container.height();
? ? ? ??
? ? ? ? // 設置li頁面總寬度
? ? ? ? element.css({
? ? ? ? ? ? width: (slides.length * width) + 'px',
? ? ? ? ? ? height: height + 'px'
? ? ? ? });
? ? ? ??
? ? ? ? // 設置每一個頁面li的寬度
? ? ? ? $.each(slides, function(index) {
? ? ? ? ? ? var slide = slides.eq(index); // 獲取到每一個li元素 ? ?
? ? ? ? ? ? slide.css({ // 設置每一個li的尺寸
? ? ? ? ? ? ? ? width: width + 'px',
? ? ? ? ? ? ? ? height: height + 'px'
? ? ? ? ? ? });
? ? ? ? });
? ??
? ? ? ? // 綁定一個事件，觸發通過
? ? ? ? $('button').click(function() {
? ? ? ? ? ? // 在5秒的時間內，移動X的位置，為2個頁面單位
? ? ? ? ? ?element.css({
? ? ? ? "transition-timing-function":"linear",
"-webkit-transition-timing-function":"linear",
"transition-duration":"5000ms",
"-webkit-transition-duration":"5000ms",
"transform":"translate3d(-' + (width*2)+'px,0px,0px)",
"-webkit-transform":"translate3d(-' + (width*2)+'px,0px,0px)"http://設置頁面x軸移動
? ? ? ?});
? ? ? ? });
2019-04-19
把script那邊的src內容換成https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js就可以
2019-02-24
樓主解決了嗎？我也出現了這種問題
2018-08-31
一開始也出現了這個情況，首先每一個slide的大小，在這里是通過js控制的，我也出現了這個情況，然后發現我沒有寫</script>。其次，關于卷滾效果，你最后一句“設置頁面x軸移動”里面單引號和雙引號混用，對應好就可以了。新手入門，恰好遇到相同的情況，不知道能不能幫到你。