HTML+CSS+JQ实现图片轮播效果

灰太狼 2022-09-25 02:30 211阅读 0赞

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。

实现的效果：

5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走鼠标继续播放。

![Center][]

实现步骤：

## 1.HTML部分 ##

加入一个div，用来放置图片资源和数字编号。

采用ul-li布局，代码如下：

<div id="ad">
    	<ul id="ad_img">
        	<li><img src="src/ad1.jpg" width="960" height="600" /></li>
            <li><img src="src/ad2.jpg" width="960" height="600" /></li>
            <li><img src="src/ad3.jpg" width="960" height="600" /></li>
            <li><img src="src/ad4.jpg" width="960" height="600" /></li>
            <li><img src="src/ad5.jpg" width="960" height="600" /></li>
        </ul>
        
        <ul id="ad_num">
        	<li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

五张图片，五个数字，简单易懂。

## 2.CSS部分 ##

CSS主要用来处理一下布局的细节，以及写一些类标签方便在js文件中调用。

/*整个广告div的css*/
    #ad{
    	width:960px;
    	height:600px;
    	position:absolute;
    }
    /*取消小圆点*/
    #ad li{
    	list-style:none;
    }
    
    #ad_img li{
    	display:none;
    }
    
    /*角落显示数字的ul*/
    #ad_num{
    	overflow:hidden;
    	position:absolute;
    	bottom:10px;
    	right:10px;
    	color:#FFF;
    }
    /*数字的浮动*/
    #ad_num li{
    	border:#FFF solid 1px;
    	float:left;
    	margin:0px 5px;
    	padding:3px 10px;
    }

经过上面的CSS样式的控制，页面显示出来的布局已经达到。

还有两个类标签numsover和numsout，分别处理鼠标放在和移开<li/>的样式：

.numsover{
    	background-color:#CF3;
    	color:#F00;
    }
    
    .numsout{}

## 3.JQuery部分： ##

jq文件就要控制鼠标时间和自动播放的事件了：

写一个方法用来监听鼠标事件和设置循环时间：

思路如下：

1.获取图片和角标的数组；

2.首先让第一张图片显示出来，并且对应的数字加上CSS效果；

3.监听鼠标事件mouseover()和mouseout()，

在mouseover()中写一个匿名函数，用来控制鼠标移动到数字的li标签上去以后：

（1）把数字加上样式表

（2）把当前的图片隐藏，显示出来鼠标对应的数字索引的图片

在mouseout()中要记得写上把自动轮换的标志设为true；

4.设置轮转事件setInterval()，两个参数分别为

（1）一个匿名函数，用来控制在限定时间后紧接着变换图片和数字的效果

（2）超时时间，单位毫秒。

function changeImg(){
    	/*获取图片和索引的数组*/
    	var $imgs=$("#ad_img li");
    	var $nums=$("#ad_num li");
    	
    	var isStop=false;
    	var index=0;
    	
    	$nums.eq(index).addClass("numsover");
    	$nums.eq(index).siblings().removeClass("numsover");
    	$imgs.eq(index).show();
    	
    	/*鼠标悬停在数字上的事件*/
    	$nums.mouseover(function(){
    		isStop=true;
    		/*先把数字的背景改了*/
    		$(this).addClass("numsover").siblings().removeClass("numsover");
    		
    		/*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作*/
    		index=$nums.index(this);
    		$imgs.eq(index).show("slow");
    		$imgs.eq(index).siblings().hide("slow");
    	}).mouseout(function(){isStop=false});
    	/*设置循环*/
    	setInterval(function(){
    		if(isStop) return;
    		if(index>=5) index=-1;
    		index++;
    		
    		$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
    		
    		$imgs.eq(index).show("slow");
    		$imgs.eq(index).siblings().hide("slow");
    		
    		},2000);
    }

最后在网页加载完调用这个函数，开始执行效果：

$(document).ready(function(e) {
        changeImg();
    });

[Center]: /images/20220719/01ac9088b4474ef3896371958d695b50.png

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现图片轮播效果

引言图片轮播效果大多数会在出现在商品的详情页或应用首页，它可以用来展示商品详情，也可以用来展示广告信息，活动信息等，所以平时练习一下图片轮播效果的实现还是很有必...

比眉伴天荒/ 2024年04月17日 16:02/ 0 赞/ 49 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 312 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 287 阅读

相关 jquery实现简单图片轮播效果

[下载地址][Link 1]jquery实现简单图片轮播效果，按钮控制上下图片翻转效果。 ![1631561661.png][] dd: [Link 1]: https

柔情只为你懂/ 2022年09月11日 11:10/ 0 赞/ 267 阅读

相关原生javascript实现图片轮播效果

最近学习javascript实现动画效果，就用原生的javascript代码实现了图片轮播的效果，供大家参考学习。 1.首先设置图片轮播的地方（id=ban

淡淡的烟草味﹌/ 2022年08月23日 05:43/ 0 赞/ 195 阅读

相关 RollViewPager简单实现android图片轮播效果

Github地址：[https://github.com/Jude95/RollViewPager][https_github.com_Jude95_RollView

电玩女神/ 2022年06月17日 13:49/ 0 赞/ 213 阅读

相关 ios图片轮播效果

> 代码地址如下： > [http://www.demodashi.com/demo/11959.html][http_www.demodashi.com_demo_119

一时失言乱红尘/ 2022年05月29日 00:20/ 0 赞/ 235 阅读

相关用jq实现轮播图片的效果

用jq实现轮播图片的效果使用jq实现简单的图片轮播效果，图片自动轮播功能，左右点击滑动功能，鼠标进入数字列表时实现图片滑动功能；主要是通过操作图片数组删除和添加的元素，

矫情吗；*/ 2022年01月30日 09:09/ 0 赞/ 250 阅读

相关 Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。

Love The Way You Lie/ 2022年01月16日 02:51/ 0 赞/ 475 阅读

相关利用js实现图片的轮播效果

每个三秒钟做一件事: window.setInterval()：按照指定周期（以毫秒计）来调用函数或计算表达式 setInterval("alert('123')",20...

红太狼/ 2020年06月06日 17:01/ 0 赞/ 759 阅读