jquery图片选项卡轮播滚动切换代码

来源:https://www.sucaihuo.com/js/1700.html 2017-04-11 23:25浏览(967) 收藏

这是一款jquery图片选项卡轮播滚动切换,实用代码。
jquery图片选项卡轮播滚动切换代码
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分
$(function(){
	
	var time = 3 * 1000;// 滑动时间间隔
	var bottom_time = 6 * 1000; // 进入下方时滑块时间间隔
	
	var spLength = $('.slide_point span').length,
		scimgWidth = $(window).width(),
		sulWidth = scimgWidth * spLength,
		sNum = 0;
		$(".slide_cont ul").width(sulWidth);
		$(".slide_cont ul li").width(scimgWidth);
	var sTimer = setInterval(moveSlide,time);
	function moveSlide(){
			sNum++;
			if (sNum >= spLength) {
				sNum = 0;
			};
			showPics(sNum);
		}
	//鼠标移入下方的块进行滚动
	$('.slide_point span').mouseover(function(){
			clearInterval(sTimer);
			sNum = $(this).index();
			showPics(sNum);
		}).mouseleave(function(){
			sTimer = setInterval(moveSlide,bottom_time);
		});
	//图片自动滚动
	function showPics(sNum){
		$(".slide_point span").eq(sNum).find('img').attr('src','img/image/2_'+(sNum+1)+'.png');
		$(".slide_point span").eq(sNum).find('img').css({'width':'210px','height':'280px'});
		$(".slide_point span").find('img').each(function(index){
			if(sNum!=index){
				$(this).attr('src','img/image/0_'+(index+1)+'.png');
				$(this).css({'width':'200px','height':'250px'});
			}
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2