直接開始，HTML CSS部分沒備注，JS有

HTML部分

<div style="overflow: hidden;position: relative;left: 0;top: 0;height: 450px;width: 100%"><div id="slider"><div></div><div></div><div></div></div> </div>

css部分

#slider {width: 300%;height: 450px;position: absolute;overflow: hidden;}#slider > div:nth-child(1) {#sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/allline2.jpg');}#slider > div:nth-child(2) {#sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/html1.jpg');}#slider > div:nth-child(3) {#sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/yizhanshi1.jpg');}

JS部分?

var speed = 15; //設置圖片切換速度var page = 1; //輪播圖片var allPage = $('#slider').children('div').length; //獲取輪播圖片數var clientWidth = $(window).width(); //獲取瀏覽器顯示寬度function Mixin() { //所有方法封裝方便調用this.play = function (){ //總開關setInterval(function () { //2秒換一張圖run.autoPlay();}, 2000)};this.animate = function (val) {clearInterval(play); //先清除動畫if(val ==0){ //回到第一張圖$('#slider').css({'left': 0 + 'px'})}else {var move = (val -1) * -clientWidth; //運動軌跡開始值var end = val * -clientWidth; //運動軌跡結束值var play = setInterval(function () { //這給setInterval定義了個名字，好隨時停止它move = move -speed //動畫移動速度$('#slider').css({'left': move || 0 + 'px'}) //開始移動if (move < end) { //當移動值超過結束值 停止動畫clearInterval(play);}}, 5)}}this.autoPlay = function () {if(page >=allPage){ //超過總圖數回到第一張圖page =0;}this.animate(page); //插圖圖幾，開始動畫page ++;};};var createslider = function () { //這樣寫可以不寫'new'來調用構造函數，傳值也方便return new Mixin();};var run = createslider(); //把函數賦值給RUN才能成功調用play,因為createslider指向本身，// 而run的constructor指向mixin這個方法，可以用run.__proto__檢測run.play();console.log(run.__proto__)

?

總結

以上是生活随笔為你收集整理的jq轮播原理及实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。