jQuery +css实现定时器轮播图效果

骑猪看日落 2022-05-17 23:38 312阅读 0赞

大家好这里是逍遥君，很高兴见到大家，今天写了一篇实现定时器轮播图效果，有兴趣的同学可以一起学习~

效果图![70][]**→![70 1][]**

图片是滚动切换（因为暂时没有动态截图工具，请大家自行脑补）

思路：

**布置一个div作为显示内容，**

**再布置一个ul和ul中的li放在div后面，**

**设置一个定时器，时间到达后自动调用一个方法一定ul的位置以此达到滚动图的效果**

**使用的语言：html，css，JavaScript，jQuery**

然后就是源代码~

html部分

<div id="index_lunbotu_div" style="overflow: hidden; float: left; width: 40%;height:400px;">
    				<ul id="index_lunbotu" style="list-style: none;height: 400px;position: relative;">
    					<li >
    						<img src="img/index_slider1.jpg" />
    					</li>
    					<li >
    						<img src="img/index_slider2.jpg" />
    					</li>
    					<li >
    						<img src="img/index_slider3.jpg" />
    					</li>
    				</ul>
    				
    			</div>

这里没什么太大的不同 只是html 的基本布局，重点在于div中要添加overflow:hidden，与ul中的position：relative两个属性；

css实现滚动动画的部分

#index_lunbotu{
    	-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    	-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    	-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    	-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    	transition: all 0.3s cubic-bezier(1,.01,.32,1);	
    }

js部分

这样 一个简单的定时器轮播图就实现啦~

当然 ，如有需要，你也可以设置按钮控制它

[70]: https://img-blog.csdn.net/20180726193746815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDE4Nzc3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220518/2f1cb68759f945ab8547c42e10be87ff.png