前端插件之滚动轮播

约定不等于承诺〃 2022-06-09 07:44 287阅读 0赞

效果如下：

![20170831130339495][]

1.css代码

<style>
    		
          #wrapperslide{
            height:220px;margin:0 auto;overflow:hidden;width:1200px;position: relative;
          }
          .mr_frBtnL{cursor:pointer;display:inline;height:46px;width:28px;position: absolute;left: 0;top: 67px;z-index: 100;}
    	  .mr_frBtnR{float:right;cursor:pointer;width:28px;height:46px;position: absolute;right: 0;top: 67px;z-index: 100;}
          #wrapperslide .over{}
         #wrapperslide ul {
         	transition: all ease 1s;  
            padding: 0;
          }
          #wrapperslide li{
          	text-align: center;
            float: left;
            width: 300px;
            list-style: none;
          }
          #wrapperslide li p{
          	padding: 0 30px;
          }
          #wrapperslide li img{
            width:240px;
            height: 120px;
          }
          
    		</style>

2.html代码

<body>
    		<div id="wrapperslide" >	
    		<img class="mr_frBtnL " id="leftbtn" src="mfrl.gif" />
    		<img class="mr_frBtnR " id="rightbtn" src="mfrr.gif" />
    		<div class="over">
    	      <ul>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>1</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>2</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>3</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>4</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>5</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>6</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>7</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>8</p>
    	        </li>
    	        <li>
    	        	<img src="2.jpg"/>
    	        	<p>9</p>
    	        </li>
    	        
    	      </ul>
    	      </div>
    	    </div>
    	    
    	</body>

3.js代码

<script type="text/javascript">
          window.οnlοad=function(){
            
            var start=0;
            var time1=null;
            var od=document.getElementById("wrapperslide");
            var leftbtn=document.getElementById("leftbtn");
            var rightbtn=document.getElementById("rightbtn");
            var au=od.getElementsByTagName('ul')[0];
            var ali=au.getElementsByTagName('li');
            au.innerHTML=au.innerHTML;
            au.style.width=(ali[0].offsetWidth)*ali.length+'px';
    
            rightbtn.οnclick=function(){
            	if(start == -1500){
            		start=0;
            		au.style.transform='translatex('+start+'px)';
            	}else{
            		start-=300;
            		au.style.transform='translatex('+start+'px)';
            	}	
            }
            
            leftbtn.οnclick=function(){
            	if(start == 0){
            		start=-1500;
            		au.style.transform='translatex('+start+'px)';
            	}else{
            		start+=300;
            		au.style.transform='translatex('+start+'px)';
            	}	
            }    
        }
        </script>

ok，到这一步一个简单的轮播就好了，每次点击移动一张

4.如果想要单个的，这样的将wrapperslide的width调小就ok了；就成了这样

![20170831130802444][]

5.如果想要自动的，那么加上下面这段js：

function run(){
            	time1=setInterval(function(){
    	        	rightbtn.click();
    	        },2000)
            }
            run()
            
            od.οnmοuseοver=function(){
            	clearInterval(time1)
            }
            od.οnmοuseοut=function(){
            	run()
            }

[20170831130339495]: /images/20220609/b0d06d4451304a4ba7565cb3808410e5.png
[20170831130802444]: /images/20220609/39b497f5ade04e388b6b69b885c1149e.png

发表评论取消回复

表情：

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

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

相关阅读

相关使用swiper4轮播插件

[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_download_index.h

蔚落/ 2022年09月02日 05:15/ 0 赞/ 262 阅读

相关 Bootstrap学习js插件篇之轮播

案例下面展示的就是此插件和相关组件制作的轮播案例。 ![Center][] <div id="carousel-example-generic" class

曾经终败给现在/ 2022年08月27日 04:48/ 0 赞/ 247 阅读

相关 JQuery插件之图片轮播插件–slideBox

来源：[http://www.ido321.com/852.html][http_www.ido321.com_852.html] 今天偶然发现了一个比较好用的图片

水深无声/ 2022年08月12日 19:28/ 0 赞/ 388 阅读

相关简单图片轮播插件

经常使用别人的插件，现在自己写一个，纪念一下。 jquery.banner.js / banner 0.1 Copyright (c)

待我称王封你为后i/ 2022年08月12日 00:17/ 0 赞/ 283 阅读

相关 Jquery 图片轮播的插件

前提要引入: jquery这是必然不上少的。 <script src="style/js/jquery.min.js"></script> 其次就是引入插件

约定不等于承诺〃/ 2022年08月10日 09:50/ 0 赞/ 297 阅读

相关 Bootstrap轮播插件

> 轮播插件就是将几张同等大小的大图，按照顺序依次播放 <!-- 分析一下轮播插件的组成： 1.最外层容器div:加类class="carousel

Love The Way You Lie/ 2022年06月12日 06:58/ 0 赞/ 311 阅读

相关前端插件之滚动轮播

效果如下： ![20170831130339495][] 1.css代码 <style> wrapperslide{

约定不等于承诺〃/ 2022年06月09日 07:44/ 0 赞/ 288 阅读

相关 [jquery]轮播图片插件

[jquery.Nivoslider.js丰富图片插件参数详解][jquery.Nivoslider.js] Nivoslider是一款基于jQuery的，能实现多种切换

淩亂°似流年/ 2022年06月04日 02:07/ 0 赞/ 394 阅读

相关 Bootstrap 轮播（Carousel）插件

Bootstrap轮播(Carousel)插件 1.页面布局轮播图的容器添加类名 .carousel 声明为相对定位的容器包含所有内容的容器添加类名 .

系统管理员/ 2022年05月28日 02:44/ 0 赞/ 291 阅读

相关 Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。用法通过 data 属性：使用 data 属性可以很容易控制轮播（C

旧城等待，/ 2022年03月21日 14:00/ 0 赞/ 373 阅读