003_JS实现图片轮播与点击播放

步骤：
1、布局：
   outer[div]
       ----imgList[ul]
               ----li(总共5个)
                   ----img(放轮播图)
       ----navDiv[div]
               ----a（总共5个）
2、原理：
       - outer作为“屏幕”，超出屏幕的部分hidden。
       - imgList里面的li排成一排，imgList包含在outer中。
       - JS控制imgList，左右移动。
       - a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。
3、注意：
       - move函数的实现，应该好好理解。
       - 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。

- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。

测试代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--步骤：1、布局：outer[div]----imgList[ul]----li(总共5个)----img(放轮播图)----navDiv[div]----a（总共5个）2、原理：- outer作为“屏幕”，超出屏幕的部分hidden。- imgList里面的li排成一排，imgList包含在outer中。- JS控制imgList，左右移动。- a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。3、注意：- move函数的实现，应该好好理解。- 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。--><style type="text/css">* {margin: 0;padding: 0;}#outer {width: 500px;height: 333px;margin: 10px auto;      /*左右居中*/background-color: greenyellow;padding: 10px 0;  /*设置上下的padding为10px*/position: relative;overflow: hidden;}#imgList {list-style: none;       /*去除li的默认样式*/width: 2600px;left:0px;position: absolute;     /*开启绝对定位，便于移动*/}#imgList li {float: left;            /*float:父元素够大的时候，才会横排*/}#navDiv {position: absolute;     /*设置绝对定位，才能显示到上面*/bottom: 15px;}#navDiv a {float: left;  /*浮动，脱离文档流，横排*/width: 12px;height: 12px;margin: 0 5px;background-color: red;opacity: 0.5;/*兼容IE8透明*/filter: alpha(opacity=50);}#navDiv a:hover {background-color: black;}</style><script src="js/tools.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload = function() {//获取节点var outer = document.getElementById("outer");var imgList = document.getElementById("imgList");var countImg = imgList.getElementsByTagName("li");var navDiv = document.getElementById("navDiv");var allA = navDiv.getElementsByTagName("a");//第一张图片的a标签先被选中var indexA = 0;allA[indexA].style.backgroundColor = "black";//为所有的a标签绑定单击响应函数for (var i = 0; i < allA.length; i++) {//保存超链接所在索引（前面的课程说过为什么这样）allA[i].num = i;//绑定单击响应函数allA[i].onclick = function() {//点击超链接时，应该停止轮播定时器，不然会出现两个动画clearInterval(idTimer);//点击超链接，切换图片indexA = this.num;move(imgList,"left",indexA*-500,20,function(){//点击的动画执行完了，开启轮播定时器autoChange();});//a标签颜色处理mutexA();}}//设置导航按钮居中var navDivWidth = parseInt(getComputedStyle(navDiv,null)["width"]);var outerWidth = parseInt(getComputedStyle(outer,null)["width"]);navDiv.style.left = (outerWidth - navDivWidth)/2 + "px";//设置imgList宽度（图片+20）*数量var imgWidth = 500;var imgMargin = 0;imgList.style.width = (imgMargin + imgWidth)*countImg.length + "px";//轮播图片var idTimer;function autoChange() {idTimer = setInterval(function() {indexA++;//a标签设置move(imgList,"left",indexA*-500,20,function(){mutexA(allA,indexA);                           });},3000);}//开启定时器autoChange();//互斥a标签function mutexA() {//索引值回到开头if( indexA >= countImg.length - 1) {indexA = 0;imgList.style.left = 0 + "px";}//该索引a标签变黑色，其它标签红色for (var j = 0; j < allA.length; j++) {if( j == indexA ) {allA[j].style.backgroundColor = "black";} else {allA[j].style.backgroundColor = "";      //这样做是因为，内联样式优先级更高，//直接设置为red，会覆盖hover效果，//这里直接去掉内联样式，它就受style里面的样式控制了}}                 }}</script></head><body><div id="outer"><ul id="imgList"><li><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li><li><img src="img/5.jpg"/></li><li><img src="img/1.jpg"/></li></ul><!-- 导航按钮 --><div id="navDiv"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body>
</html>

003_JS实现图片轮播与点击播放相关推荐

自定义控件：图片轮播，点击图片进入webview
自定义控件:图片轮播,点击图片进入webview 版权声明:本文为博主原创文章,未经博主允许不得转载. 很方便的先自定义控件,可以直接使用,添加属性和实现功能: import java.util.Ar ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
jqweui轮播图点击图片放大缩小
需要js cs 的直接上官网下:jqweui: jqweui (gitee.com) 直接上代码 <!DOCTYPE html> <html><head><t ...
android图片轮播+点击跳转广告页面
Android轮播网络图片+点击跳转广告页面--------–一些新手总是很头疼怎么获取网络图片的url之后让它像一些广告那样轮播起来,点击图片之后跳转到指定网页.效果如下在布局引用自定义控件 &l ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
js轮播图(点击图片切换定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
图片轮播+点击跳转不同页面（给初学者）
在qq群内有个群友问点击不同轮播图片跳转到不同页面的这个功能怎么写? 首先微信官方给出一个轮播图的事例地址 wxml: <swiper indicator-dots="{{indic ...
html+css+js实现的图片轮播图下方配文字可变图片可点击
js代码 <script>// 首先获取相关DOMvar box =document.getElementById('box');var img =document.getElementB ...

003_JS实现图片轮播与点击播放

003_JS实现图片轮播与点击播放相关推荐

最新文章

热门文章