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