jq seamless rotation

The final implementation interface is as follows:



When the page is loaded, it will be rotated automatically. When the wheel mouse hovers over the entire container, the left and right buttons will be displayed on both sides. When the mouse clicks on the top of the index circle at the bottom and middle, it will automatically jump to the corresponding picture.


The html section contains the picture list img, the index circle li, and two div buttons:

<div class="lb">
		<div class="lb_img">
			<img src="img/img1.jpg">
			<img src="img/img2.jpg">
			<img src="img/img3.jpg">
			<img src="img/img4.jpg">
			<img src="img/img5.jpg">
			<img src="img/img1.jpg">
		</div>
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="prev"><img src="img/prev.png"></div>
		<div class="next"><img src="img/next.png"></div>
</div>	

The following are CSS stylesheets:

.lb{width:1200px;height:450px;position:relative;top:50%;left:50%;margin:-225px -600px;overflow:hidden;}
.lb .lb_img{width:7200px;height:450px;position:absolute;left:0px;}
.lb .lb_img img{width:1200px;height:450px;float:left;display:block;}
.lb ul{width:110px;height:14px;position:absolute;bottom:20px;left:50%;margin-left:-60px;}
.lb ul li{width:12px;height:12px;border-radius:7px;border:1px solid #fff;margin-left:7px;float:left;cursor:pointer;}
.lb ul .active{background:#fff;}
.lb ul li:hover{background:#fff;}
.lb .prev{width:60px;height:60px;position:absolute;top:50%;left:10px;margin-top:-30px;cursor:pointer;display:none;}
.lb .next{width:60px;height:60px;position:absolute;top:50%;right:10px;margin-top:-30px;cursor:pointer;display:none;}


The following is a call to a JS event. Don't forget to reference the jQuery file before using it. I'm referencing <script src="Http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
var index=0;
$(document).ready(function(){
//Index Button	
	$(".lb ul li").click(function(){
		index=$(this).index();
		$(this).addClass("active").siblings().removeClass("active");		
		$(".lb .lb_img").stop().animate({left:-index*1200+'px'},1000);
	})
//Next Page Button
	$(".lb .next").click(function(){
		autoplay();
	})
//Previous Page Button
	$(".lb .prev").click(function(){
		index--;
		if(index == -1){
		   	index=4;
		   	$(".lb .lb_img").css("left","-6000px");
	   	}
	   	$(".lb .lb_img").stop().animate({left:-index*1200+"px"},1000);
		$(".lb ul li").eq(index).addClass("active").siblings().removeClass("active");

	})
//set timer
	Time=setInterval(autoplay,2000)
		function autoplay(){
			index++;
			$(".lb ul li").eq(index).addClass("active").siblings().removeClass("active");
			if(index == 6){
				index=1;
				$(".lb .lb_img").css("left","0px");
			}

			$(".lb .lb_img").stop().animate({left:-index*1200+"px"},1000);
			if(index==5){
				$(".lb ul li").eq(0).addClass("active").siblings().removeClass("active");	
			}else{
				$(".lb ul li").eq(index).addClass("active").siblings().removeClass("active");
			}
		}
//Mouse pause shows buttons on left and right sides
	$(".lb").hover(function(){
		$(".lb .prev").fadeIn(300);
		$(".lb .next").fadeIn(300);
	},function(){
		$(".lb .prev").fadeOut(300);
		$(".lb .next").fadeOut(300);
	});
//Mouse Hover Clear Timer
	hover1=function(){
		clearInterval(Time)
	};
	hover2=function(){
		Time=setInterval(autoplay,2000)
	}
	$(".lb ul li").hover(hover1,hover2)
	$(".lb .prev").hover(hover1,hover2)
	$(".lb .next").hover(hover1,hover2)
});
</script>



Tags: JQuery

Posted on Thu, 18 Jun 2020 12:15:12 -0400 by Yeodan