Jquery實現左右輪播效果

首先展示下靜態布局h5代碼，代碼非常簡單。

　　<div id="slide">

　　　　<ul class="pic-list">

　　　　　　<li><img src="banner1.jpg"></li>

　　　　　　<li><img src="banner2.jpg"></li>

　　　　　　<li><img src="banner3.jpg"></li>

　　　　　　<li><img src="banner1.jpg"></li>

　　　　</ul>

　　　　<div class="btn next">右</div>

　　　　<div class="btn prev">左</div>

　　　　<ul class="icon-list">

　　　　　　<li class="active"></li>

　　　　　　<li></li>

　　　　　　<li></li>

　　　　　　</ul>

　　</div>

　　

 

　　以下代碼為樣式布局部分。通過先li左浮動，設置ul的overflow值為hidden，將其他圖片隱藏。主要結構如下圖，黑色框內部分為可見部分。其他部分為不可見。至於為什么多放一張圖1，稍后會解釋。

　　　

 css樣式

　　

<style type="text/css">
　　*{
　　　　margin: 0;
　　　　padding: 0;
　　}
　　ul,li{
　　　　list-style-type: none;
　　}
　　#slide{
　　　　height: 400px;
　　　　width: 600px;
　　　　margin: 100px auto;
　　　　position: relative;
　　　　overflow: hidden;
　　}
　　.pic-list{
　　　　width: 2400px;
　　　　height: 400px;
　　　　position: absolute;
　　　　top: 0;
　　　　left: 0;
　　}
　　.pic-list li{
　　　　float: left;
　　}
　　.pic-list li img{
　　　　width: 600px;
　　　　height: 400px;
　　}
　　.btn{
　　　　opacity: 0;
　　　　position: absolute;
　　　　top: 50%;
　　　　height: 50px;
　　　　width: 50px;
　　　　/*opacity: 0.5;*/
　　　　border-radius: 5px;
　　　　cursor: pointer;
　　　　user-select: none;
　　　　background: white;
　　　　font-size: 25px;
　　　　line-height: 50px;
　　　　text-align: center;
　　　　transition: all 1s;
　　　　transform: translateY(-50%);
　　}
　　.next{
　　　　right: 0;
　　}
　　.icon-list{
　　　　position: absolute;
　　　　bottom: 10px;
　　　　left: 50%;
　　　　transform: translateX(-50%);
　　}
　　.icon-list li{
　　　　float: left;
　　　　margin: 0 5px;
　　　　height: 10px;
　　　　width: 10px;
　　　　border-radius: 50%;
　　　　background: #ccc;
　　　　cursor: pointer;
　　}
　　.icon-list .active{
　　　　background: #fff;
　　}

</style>

 

 靜態布局后，布局如下圖所示

 　　　　

靜態布局后，最后開始寫入JS代碼，實現輪播效果，其他的不說 ，先上代碼

 　　

<script type="text/javascript">
　　　　$(function(){
　　　　　　var timer = null;  //聲明一個全局定時器
　　　　　　var index = 0;  //索引

　　　　　　$(".next").click(function(){   //點擊右按鈕，調用下一張
　　　　　　　　next();
　　　　　　});

　　　　　　$(".prev").click(function(){    //點擊左按鈕，調用上一張
　　　　　　　　prev();
　　　　　　})

　　
　　　　　　function next(){   //右按鈕
　　　　　　　　index++;
　　　　　　　　if(index > 2){
　　　　　　　　/*

　　　　　　　　　　當圖片到最后一張時跳回第一張，

　　　　　　　　　　本例中在最后一張中放入了第一張的圖片，

　　　　　　　　　　為實現無縫切換圖片的效果。
　　　　　　　　*/
　　　　　　　　　　$(".pic-list").animate({left:-(index)*600},500);
　　　　　　　　　　index = 0;
　　　　　　　　　　$(".pic-list").animate({left:0},0); 
　　　　　　　　}

　　　　　　　　$(".pic-list").animate({left:-index*600},500);
　　　　　　　　iconHover(index);
　　　　　　}

　　　　　　function prev(){    //左按鈕
　　　　　　　　index--;
　　　　　　　　if(index < 0 ){
　　　　　　　　　　index = 2;
　　　　　　　　　　$(".pic-list").animate({left:-(index+1)*600},0);
　　　　　　　　}
　　　　　　　　$(".pic-list").animate({left:-index*600},500);
　　　　　　　　iconHover(index);
　　　　　　}

　　　　　　
　　　　　　function auto(){
　　　　　　　　timer = setInterval(function(){   //設置自動播放的定時器
　　　　　　　　　　next();
　　　　　　　　　　iconHover(index);
　　　　　　　　},2000)
　　　　　　}

　　　　　　auto();  //調用auto

　　　　　　$("#slide").mouseover(function(){   //鼠標移入 定時器取消
　　　　　　　　　　clearInterval(timer);
　　　　　　　　　　$('.btn').css("opacity",0.5)
　　　　　　})

　　　　　　$("#slide").mouseleave(function(){    //鼠標離開 定時器開啟
　　　　　　　　　　auto();
　　　　　　　　　　$('.btn').css("opacity",0)
　　　　　　})

　　　　　　//鼠標碰觸圓點圖標實現圖片左右輪播
　　　　　　$(".icon-list li").mouseover(function(){
　　　　　　　　　　var index = $(this).index();
　　　　　　　　　　$(".pic-list").animate({left:-index*600},500);
　　　　　　　　　　iconHover(index);
　　　　　　})

　　　　　　//實現被選圖片對應圓點圖標索引更新
　　　　　　function iconHover(index){
　　　　　　　　$(".icon-list li").eq(index).addClass("active").siblings().removeClass("active");
　　　　　　}

　　　　})

</script>

 

https://blog.csdn.net/weixin_39230257/article/details/82431354